I have a list that contains texts and two icon images. The text doesnt align with the images so I want to be able to add a margin to the links. However, after at least an hour of checking I still can't get it to work, here is my code:
<div class="company-info pull-right">
<ul class="social-header">
<li>Follow Us</li>
<li class="socials"><i class="twit-icon"></i></li>
<li class="socials"><i class="linked-icon"></i></li>
</ul><!--/social header-->
</div><!--/pull right-->
</div><!--/company info-->
.social-header{
list-style:none;
}
.social-header li{
display:inline;
}
.social-header li.socials{
margin-top:10px;
}
margin wont work on an inline element.
.social-header li{
display:inline-block;
float: left;
}
.social-header li.socials{
padding-top:10px;
}
You're using display:inline, change this to display:inline-block.
This is because inline elements cannot have any size, padding etc. Think of them as if they were a letter in a paragraph.
I would recommend reviewing the vertical-align property, its options, and see if one of those will do the trick. I often use vertical-align: middle.
I don't have you image files, but I just snagged some off Google and added my own img CSS class. The key was changing it to inline-block and using the vertical-align attribute. CSS classes to as follows
.social-header{
list-style:none;
}
.social-header li{
display:inline-block;
}
.social-header li{
vertical-align: middle;
}
img{
width: 45px;
height: 45px;
}
and the html
<div class="company-info pull-right">
<ul class="social-header">
<li><h2>Follow Us</h2></li>
<li class="socials"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" /></li>
<li class="socials"><img src="http://inhouseww.com/static/assets/imgs/icon-linkedin.png" /></li>
</ul>
</div>
Related
Here is my code: http://jsfiddle.net/DFN5y/
As you can see the list items on the right are on the line below. Can anyone please tell me how to remedy this? This is my code:
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
</ul>
<ul id="nav" style="float:right;">
<li>Sign up</li>
<li>Login</li>
</ul>
You could set them inline by making ul as inline-block element
ul {
display: inline-block;
}
but you have two nav's and duplicate id's so look at the example below and try to follow that style in future coding
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
<li class="right">Sign up</li>
<li class="right">Login</li>
</ul>
#nav li {
display: inline-block;
padding-left: 40px;
}
.right{
float: right;
}
or you could float them without class e.g.
#nav li:nth-child(3),
#nav li:nth-child(4) {
float: right;
}
or even simpler by moving just third element e.g.
#nav li:nth-child(n+3) {
float: right;
}
FIDDLE
your #nav is having 100% width and does not have float, thats why its taking complete space till right edge.
#nav {
float: left;
padding-left: 100px;
}
Fiddle
Try:
ul li {
display: block;
float:left;
padding-left: 40px;
}
Just add this to your CSS :
ul{ display : inline-block;}
And please change the id's of your ùl`tags so that they are different ! Id's should be unique on the page.
Have a look at this fiddle.
Basically i have changed the original in 4 ways:
replaced the id nav, which had been issued twice, by a class of the same name
distinguished between the first and the second nav-ul in css formatting
moved the style dfinitions from the element attribute to the css (somehow the float rule messed up teh alignment)
all nav-ul being displayed as inline-block to assue verticla alignment.
You'd be better off adding them all to the same ul element and then using the :nth-child pseudo-selector to add additional padding to the middle elements to create the separation you want.
http://jsfiddle.net/DFN5y/17/
ul li:nth-child(3){
padding-left: 20%;
background: red;
}
I want to have the phone number and email address vertically align with the little icons next to them. I'm trying to change their line-height, but that changes the line height of all the li's in that area. I think that is because they are inline. Here is the site and the css.
LINK: www.matthewtbrown.com/newsite
HTML:
<ul class="contact">
<li><img src="http://s7.postimg.org/64ux9a1if/email.png"></li>
<li class="contacttext">mbrown74#rocketmail.com</li>
<li><img src="http://s7.postimg.org/g0w08x7af/phone.png"></li>
<li class="contacttext">978-761-1205</li>
</ul>
CSS:
.contact {
color: #fff;
text-align: center;
float:none;
}
.contact > li {
display: inline;
}
.contacttext {
font-size: 19px;
padding-left: 5px;
}
That's where vertical-align comes into play which aligns inline elements to each other:
In your case the following should work:
.contacttext{
vertical-align:text-top;
}
Also note, that if you want to have your li contain the img properly, it needs a display-type other than the default inline - inline-block might be suited most.
Try something like this:
li {
display: inline;
vertical-align: top;
line-height: 25px;
}
after this i have this result:
try this
<ul class="contact">
<li class="contacttext">
<img src="http://s7.postimg.org/64ux9a1if/email.png">mbrown74#rocketmail.com
</li>
<li class="contacttext">
<img src="http://s7.postimg.org/g0w08x7af/phone.png">978-761-1205
</li>
I just kept the icons and the text in the same li's
I got it. I did:
.contacttext {
font-size: 19px;
padding-left: 5px;
display:inline-block;
vertical-align:middle;
}
You could add margin-bottom to your <img> to solve this issue.
li img {
margin-bottom: 3px;
}
I am trying to position a text in the middle height of an image, but the margin-top or margin-bottom would not work as I want.
Any tips on this?
I created an JsFiddle to show the work -
http://jsfiddle.net/HdW7Y/1/
As you see the the text Login User is below the login button.
HTML
<div id="topNav">
<ul>
<li class="topMenu-bg1 show_hide_contact">
</li>
<li class="topMenu-bg2 show_hide_login">
User Login</p>
</li>
</ul>
</div>
CSS
#topNav li {
margin-top:5px;
padding-top:7px;
list-style:none;
float:left;
border-right:1px solid black;
}
.icon2text{
font-weight: bold;
font-size: 0.7em;
display: inline;
}
You can use the vertical-align property on .icon2text and set it to top:
http://jsfiddle.net/HdW7Y/2/
Add
.topMenu-bg2 show_hide_login{
valign:middle;
}
If you replace the p tag with a span and remove the top padding from the li item and the top padding from the a tag it should all line up.
I'm displaying a set of thumbnail images with links on a webpage like this
Here's the HTML
<div id="newsletters-and-journals">
<p id="pubs-caption">Publications</p>
<ul>
<li class="pubs">
<img class="pub-cover" src="images/CXuyv.png" />
<span>Journal - January 2012</span>
</li>
<li class="pubs">
<img class="pub-cover" src="images/vER9H.png" />
<span>Newsletter - May 2012</span>
</li>
</ul>
</div>
and the CSS
#newsletters-and-journals ul { position:relative; top:12px; left:30px; }
.pubs { display:inline; margin-right:60px; }
.pub-cover { width:120px; height:140px; }
also a fiddle http://jsfiddle.net/nK0de/3jeVF/2/
How can I display the links under each corresponding image?
Thank you
It is also works:
.pubs {
display: inline-block;
margin-right: 60px;
width: 120px;
}
width is your image's width.
You can make either <img> or <span> to display:block
http://jsfiddle.net/3jeVF/6/
to solve your problem just add a
br
tag in between
img and span tag.
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.