Here is the situation. I want to edit the HTML in my forum but there is no CSS support. I have included what I have, barring I didn't screw it up. What I want to do is put the three elements after the opening text side by side, in line. Next I want to do the same with the last to elements, the hit counters. My working knowledge is limited and I have tinkered to the last of my patience. I am a amateur, self taught, noob, whatever you want to call it so forgive my lack of knowledge.
<p>Click on the Iowa state icon to view members in your area of the state. To be placed on the map with what you are interested in finding click on the "Pop Smoke" icon and post your state, county and interest on the "local Patriots" group page. In order to view the Iowa Constitution click the Constitution icon.</p>
<p><img class="align-center" src="http://i68.tinypic.com/331lr0i.jpg" alt="" width="150"/></p>
<p><strong><strong><img class="align-center" src="http://i63.tinypic.com/e5qw7l.png" alt="" width="125"/></strong></strong></p>
<p><img class="align-center" src="http://i68.tinypic.com/znrh28.jpg" alt="" width="200" border="0"/></p>
<p><img alt="" src="http://api.ning.com:80/files/nkvdZEQNy6zCn2jimzPD4qqESNX8HVjut48i5dAhMIf3v26qIZPzpAG6BqDSJKGk2ZV*G7wvlRG2*j3zCkGfOUKCqKyc83y1/alumbar.gif" width="540"/></p>
<p><a rel="nofollow" href="http://www.reliablecounter.com" target="_blank"><img src="http://www.reliablecounter.com/count.php?page=modernmilitiamovement.com/group/iowa-state-group&digit=style/plain/6/&reloads=1" alt="" title="" border="0"/></a><br/><a rel="nofollow" href="http://www.reliablecounter.com" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">Unique visits</a></p>
<img src="http://www.reliablecounter.com/count.php?page=modernmilitiamovement.com/group/iowa-state-group3&digit=style/plain/6/&reloads=0" alt="" title="" border="0"/></a><br/> <a rel="nofollow" href="http://www.curinglight.com" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">All visits</a></p>
You're using inline style ("style=...") already. Paragraph elements display "block" by default, which means they will each start a new line and span the the entire width available to them.
I'd suggest wrapping each set of tags you want vertically aligned together in a div and either change the display styling of your paragraphs or remove some of them.
Related
I am trying to make a top bar on this website above the menu that lists the contact information and the social media icons (I will take them out of the main menu nav) https://grownowsma.com/
The three issues I'm having:
1) I can't get the whole content of the secondary top bar to align right. I want them above the "Get in touch" area
- For this I've tried various CSS selectors using the align: right and align-contents: right; no success
2) I want the email and phone number to be vertically aligned to look better with the icons. I've tried various selectors with vertical-align: center. I read that VA only works inline, but this is inline so I'm stumped.
3) If you click on the Facebook icon it opens, but if you click on any of the other social icons they don't. I tried wrapping each social icon in a so maybe separating them would help, but for some reason no luck. Any ideas on changing the HTML to make the links work on all four social media icons?
<p style="text-align: right; font-family: 'Muli'; vertical-align: center;">
josh#grownowsma.com | <em><a
href="tel:(978)%20857-4349" target="_blank" rel="noopener">978-857-
4349 </a> | </em><span><a href="https://www.facebook.com/Grow-Now-Social-
Media-Agency-1275074409247860/" target="_blank" rel="noopener"><img
class="alignnone wp-image-520" src="https://grownowsma.com/wp-
content/uploads/2017/11/facebook.png" alt="" width="25" height="25" /> </a>
</span><span><a href="https://twitter.com/grownowsma" target="_blank"
rel="noopener"><img class="alignnone wp-image-519"
src="https://grownowsma.com/wp-content/uploads/2017/11/twitter.png" alt=""
width="25" height="25" /></a></span><span> <a
href="https://www.instagram.com/grownowsma/" target="_blank"
rel="noopener"> </a><a href="https://www.instagram.com/grownowsma/"
target="_blank" rel="noopener"><img class="alignnone wp-image-521"
src="https://grownowsma.com/wp-content/uploads/2017/11/instagram.png" alt=""
width="25" height="25" /> </a></span><span><a
href="https://www.linkedin.com/company/11331850/" target="_blank"
rel="noopener"><img class="alignnone wp-image-518"
src="https://grownowsma.com/wp-content/uploads/2017/11/linkedin.png" alt=""
width="25" height="25" /></a></span>
</p>
(FYI: This question is poorly written. I know it wouldn't be easy, but you really should have included a minimal example of what you're trying to do. It might have even helped you solve it on your own. Either way, after taking a quick look into it, I can't just not write what I found, so here's a quick answer.)
All three issues should be correctable with just two changes. Your horizontal alignment issue is because you have your nav set to col-lg-0 (on the immediate first child of .row-menu-inner). This isn't the correct value for a full-width nav. Change it to col-lg-12. Your other right-aligning rules will then work. To vertically align the social icons you can add vertical-align: middle to your img.alignnone rule.
You need to change this class col-lg-0 middle to col-lg-12 , or style it with css .row-menu-inner .col-lg-0.middle{ width: 100%; float: none;}
I have an image which I want to align with the edge of text below. The text below is centered, but I can't figure out how keep it aligned on the left.
The code I have is:
<img src="Logo.png" style="margin: auto"/>
<h1 style="text-align: center;>The Collaborative Observer</h1>
<p style="text-align: center; font-size: 100%; padding-left: 6cm">The best thing that has happened to ICE since ICE.</p>
I also use the padding feature to align the bottom text, and I am wondering if there is a better way to do that.
The code above is modified for color, but looks like this.
just simply insert <center><img src="Logo.png" style="margin: auto"/></center>
when img & text in one div box, must set the 'vertical-align:text-bottom',so that the text under the image. sorry my English
<style>
.logo-box{display: table; text-align: center;}
.logo-box img{height: 100px; width: 100px; vertical-align:text-bottom}
</style>
<div class="logo-box">
<img src="Logo.png" />
<h3>The Collaborative Observer</h3>
</div>
<p style="text-align: center; font-size: 100%; padding-left: 6cm">The best thing that has happened to ICE since ICE.</p>
Seems like a good use of <figure> and <figcaption>.
From HTML5 Doctor:
The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
The figure element can be used to annotate illustrations, diagrams, photos, code listings, etc., that are referenced in the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content — e.g., to the side of the page, to dedicated pages, or to an appendix.
So why not...
<figure>
<img src="Logo.png" style="margin: auto"/>
<figcaption>
<h1>The Collaborative Observer</h1>
<p>The best thing that has happened to ICE since ICE.</p>
</figcaption>
</figure>
<figure> and <figcaption> are both block-level elements, so they will take up the full width of their container unless otherwise specified. This will allow the caption below to stretch to the edge of the element on each side, and then image will then be lined up correctly. Then add the following to your CSS file...
figure img {
margin: auto;
}
figcaption {
text-align: center;
}
figcaption p {
font-size: 100%;
padding-left: 6cm;
}
I think this is what you wanted :
<div style="text-align: center;">
<div style="left:10%;display:inline;margin:0 auto;">
<img src="http://almadaenmisr.com/templates/logo/1410252800_1266901625.jpg" width="100px" style="" />
</div>
<h1 style="display:inline;">The Collaborative Observer</h1>
<br />
<p style="text-align: center; font-size: 100%;padding-left: 15%;display:inline;">The best thing that has happened to ICE since ICE.</p>
</div>
Float the image left & inline the text.
Though this is working code, I would like to suggest using frameworks like bootstrap/skeleton for design so that its easier to work with and also makes it readily usable with all screen sizes.
I have tried several answer here and have not been able to find what is going on.
I am making a wordpress site, I have some knowledge but I am not an expert and I havent had success in accomplishing what I am looking for.
Here is the deal, I am trying to place social icons in the footer of a website (wordpress, with a theme). When I place the images, it looks like it is intended to do:
The left column shows the icons properly aligned
As soon as I start placing the Anchor Tags like this (only one of the icons has the anchor tags):
<div>
<a href="[full link to your Facebook page]">
<img title="Facebook" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453371609_Facebook.png" alt="Facebook" width="35" height="35" />
</a>
<img title="Twitter" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453371295_twitter_social_media_online.png" alt="Twitter" width="35" height="35" />
<img title="YouTube" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453416978_youtube.png" alt="YouTube" width="35" height="35" />
<img title="LinkedIn" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453417011_linkedIN.png" alt="LinkedIn" width="35" height="35" />
<img title="Mail" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453417082_mail.png" alt="Mail" width="35" height="35" />
</div>
The one that has a link ocuppies the whole row and moves the others to the next one.
I tried inspecting the moved Icon and realized per this image, that is the anchor property thats taking the whole space, as the image is the right size:
Is the Anchor tag that is taking the whole space
Now I have tried so many things, in the a img a at ccs, i placed display in block, inline-block, and I always get the same results.
Jus as a test, I tried to use a plugin for social icons and the icons were also displaying vertically.
Here is the css regarding the img:
a img, a {
display: inline-block
border: none;
outline:none;
}
a {
outline:none;
text-decoration: none;
color:#525252;
}
I also, created a class .footer a, where I specified the size of the anchor, but it didnt help.
Can you please point me in the right direction?
try with using within "inline element":
style="position: absolute;"
or add a class in the CSS with following position:
position: absolute;
I would start with the following style rule:
.textwidget > div > a {
display: inline-block;
width: 35px;
height: 35px;
margin: 0;
padding: 0;
}
I have 4 small images lined up horizontally as shown below
<span style="font-size: 10.0pt; font-family: Verdana, Tahoma, Geneva, sans-serif; color: gray">
<img src="image source">
<img src="image source">
<img src="image source">
<img src="image source"><br /> </span>
when i run the code, browsers diplay these for images with the right space between them, but if i run the code using outlook the test it, the images do not have the spacing between them. I understand this is an outlook problem but is there a way to solve these issue, i have tried adding padding style and margin stil to each image but that does not help. How can i get around this problem to add spaces between these images.
Outlook tends to ignore most of CSS and almost anything you put into a "style" attribute, so your most reliable option here is to insert (non-breaking space) entities between the images.
I was wondering if you could display a link as normal text.
<a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>
I'm trying to overlap an image that is also a button, with the text "Log in", it works as it is with the code above, but I was wondering if I can change the "log in" which displays as blue and underlined to appear as normal text.
In css:
a {
color: inherit;
text-decoration: inherit;
}
These values can also be stuck in your anchor tag's style attribute.
Should result in your anchor tags looking the same as the text color and decoration of the parent(s).
If you have a look at Cascading Style Sheets (CSS) you can change the colour and the text style of the link.
In your example, you could use
<a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
<div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font>
</div>
</a>
However I would learn how to use external stylesheets and link them to your HTML through the <link> tag in the <head> of your html. You can then style up individual tags through the tag name, an id or a css class. So an updated example would be:
<link rel="stylesheet" href="link-to-your-css-file" />
in your css file have
a.imgLink{
color: white; text-decoration: none;
}
div.imgLink{
position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}
Then your html would be
<a class="imgLink" id="" href="" target="_parent">
<img src="" width="121" height="20" alt="">
<div class="imgLink">
Log In
</div>
</a>
Not only does it make your HTML "dry" but it gives you greater control over the styles of your html by only changing the css file.
If you don't want the link to be underlined,
set " text-decoration:none"
use this code in your html file
<style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>
Short answer: yes.
Longer answer:
Yes, here is a fiddle, but you probably don't want to hide links from your user.
stslavik makes a good point with "text-decoration: inherit". Here is another fiddle. On my browser the "blam" and "stslavic" both show with strike-through, but I'd go with the "inherit" versus the "none"; just seems better to me.
(P.S not advertising this and no spam. Click on 'Hate AI' to reach my project)
You can do this =>
<h1><a style="text-decoration: none; color: inherit;" href="https://obnoxiousnerd.github.io/hate-ai">Hate AI</a></h1>
<p>A personal assistant that hates you but still helps you.</p>
The logic here was adding a style to the a tag which contains the following:-
text-decoration: none;
color: inherit;
text-decoration for removing the underline under the text.
color: inherit for removing the usual purple color of links.
Sure - just adjust the CSS for 'a' elements on the page.
Just a simple snippit to show some size/coloring possibilities, to make your link fit thematically when the rest of your text a bit better.
Wow, Look at this website! It's called Website! It's a shame that this link looks horrible, though!
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.website.com/">Oh, boy! You can now click here to visit Website's website without the link looking bad!</a></h2>
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.bing.com/">Uh oh, the Website website is broken! Visit the pinnacle of innovation, Bing, instead!</a></h2>