I have an CSS issue with a menu.
Through CSS I´ve added padding to li's.
The li's have display: inline.
It works when I set to inline-block, but I want to know why it doesn't work with inline. In my understanding padding should work with inline elements.
HTML
<header>
<nav>
<ul id="mainmenu">
<li>Home</li>
<li>Users</li>
<li>Rankings</li>
<li>In the press</li>
<li>Blog</li>
</ul>
</nav>
</header>
CSS
body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; }
header nav { height: 25px; background: #eeeeee; }
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; }
header nav li { display: inline; padding: 10px 5px; }
Working demo
http://jsfiddle.net/4QLmp/
PS browser is Chrome Canary
The padding is there, but since the <li>s are defined as inline, they're aligned to the same text baseline. That cuts off the top padding beyond the top of the page border. If you do change the css to:
header nav li { display: inline; padding: 20px 5px; border: 1px solid red; position: relative; top: 50px;}
so that the <ul>s get pushed down, you'll see the padding present. inline-block doesn't follow the same text-alignment rules, so everything gets pushed down so the whole block is visible.
header nav li { display: inline; padding: 10px 5px; }
UPD:
The W3C’s CSS2 spec states that for Inline, non-replaced elements, "the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property".
Related
This question already has answers here:
How do I justify a horizontal list?
(10 answers)
Closed 7 years ago.
I have used the code from this question to create a horizontal menu where each item is evenly spaced.
Here is my version:
<div id="navigation">
<ul>
<li class="first">
Home
</li>
<li>
About us
</li>
<li>
What we cover
</li>
<li>
Monitoring agencies
</li>
<li>
Publishers
</li>
<li>
News
</li>
<li>
Contact us
</li>
<span></span>
</ul>
</div>
And the CSS:
#navigation {
text-align: justify;
}
#navigation ul span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
#navigation ul {
display: inline;
list-style: none;
}
#navigation ul li {
display: inline
}
#navigation ul li a {
display: inline;
border-right: solid 1px #ccc;
}
#navigation ul li.last a {
border-right: none;
}
Is there a way to make the vertical lines move to the right such that they are halfway between the end of the a tags and the end of the li tags?
Here is a fiddle.
I've added an answer here.
Hack Using Extra Elements for the Spacer Motif
Fiddle reference: http://jsfiddle.net/audetwebdesign/bF6ey/
Consider the following HTML:
<div id="navigation">
<ul class="navigation">
<li class="first">
Home
</li>
<li class="spacer-motif">|</li>
<li>
About us
</li>
<li class="spacer-motif">|</li>
...
<li class="spacer-motif">|</li>
<li>
Contact us
</li>
</ul>
</div>
I added an extra list item between the links: <li class="spacer-motif">|</li> (yes, I cringe also...).
The CSS is as follows:
#navigation {
padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
display: table;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: table-cell;
text-align: center;
width: 1%; /* force cell to shrink-to-fit text */
outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
width: 10%; /* force spacers to take up a lot of space */
outline: none;
}
#navigation ul li a {
white-space: pre;
}
The layout is based on using table display types.
For ul, use display: table and set the width to 100%. Remember to zero out margin and padding values.
For li, use display: table-cell and text-align: center.
The trick is to force the table cells to shrink-to-fit the text labels by
setting width: 1%, and then, for the li.spacer-motif, set width: 10% to force
the spacers to expand (evenly) to fill up the line.
To keep the text links from wrapping into 2 or 3 lines, set white-space: pre in the <a> elements (the links).
Cleaning Up The Semantics
The problem here is that the link texts vary in width and this makes it impossible to simply use table-cell's with a right or left border and centered text. The extra spacing will vary among the links and the left/right border will not be evenly spaced between the link texts.
The way around this is to add extra elements. I used a pipe (|) but I suppose you could add a pseudo-element with a 1px border and center it and so on.
However, if the elements are a problem, they could be inserted using jQuery or JavaScript.
IE 7 Support - Hack for CSS
If you need IE7 support, you need to adjust the CSS according to the following:
CSS: table and table-cell replacement for IE7
here take a look at this fiddle HERE
I made some small adjustments. I changed display:inline; to float:left; and centerd the text.
The space is coming from the 5px padding i gave to the
ul li a
I would use display: table on ul and display: table-cell on li for this.
and even padding on both sides for the a tag
Depending on the spacing your after, something like this should work:
#navigation ul li a {
padding-right: 10px;
}
Change the 'px' value to your needs.
You can try something like this:
#navigation ul li a {
display: inline;
margin-right: -14px;
padding-right: 14px;
border-right: solid 1px #ccc;
}
But it might not be cross-browser.
http://jsfiddle.net/gjFYf/2/
I found that padding-right: 30px; in #navigation ul li a worked nicely.
I've got this working by inserting extra list elements into the list and then setting the width of these elements to a single pixel. I've also set their background color and removed the border on the hyperlinks.
New styles...
#navigation ul li.line {
display: inline-block;
*display: inline;
zoom: 1;
width: 1px;
background-color: #ccc;
height: 24px;
position: relative;
top: 5px;
}
#navigation ul li a {
display: inline;
line-height: 36px;
height: 36px;
text-decoration: none;
font-size: 18px;
color: #14328C;
font-weight: bold;
}
New Html snippet...
<li>
Publishers
<li class="line" />
</li>
It doesn't work in IE7 though. The text align seems to ignore the extra li unless it contains content.
Its also now semantically incorrect.
Fiddle.
I want to centre align the menus , I tried using text-align but still no result
Following is the html code:
<div id="menu" class="clearfix">
<ul>
<li>HOME</li>
<li>WATCH</li>
<li>TAGS</li>
<li>CHANNELS</li>
</ul>
<br style="clear:both">
</div>
And the css used:
#menu {
width: 100%;
margin-bottom: 2em;
margin-top: 5px;
border-top: 1px solid #333;
border-bottom: 1px solid #515152;
text-align: center;
background-image: url("./images/menu.gif");
}
#menu ul {
font: bold 11px Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
float: left;
display: inline;
background-color: black;
}
Any suggestions?
Thank You.
You have float:left on the li. Take that line out:
#menu li {
display: inline;
background-color: black;
}
Since you don't need float anymore, you can also get rid of the <br style="clear:both"> as it'll just put a blank line below the menu now.
Here's a tutorial on how to properly use float.
Floating is often used to push an image to one side or another, while
having the text of a paragraph wrap around it
Set
#menu ul{
text-align:center;
}
and then set
#menu li{
margin:0px auto;
}
This will leave top and bottom margins as 0px but will automatically detect the left and right margins and make them equal and centered.
Also, remove
float:left;
from
#menu li
I believe you are trying to center the contents of your #menu tag with the text-align:center. This won't work because you have the 'ul' inside it. What I would do is remove the text-align:center from the #menu tag.
Then in the '#menu ul' tag I would add:
margin: 0 auto; /* this will center the UL, but needs to be used with a width set */
width: 500px; /* change this to the width you desire */
In order for a block level element to be centered on a page you need to provide a width that is smaller than the width of the parent element it is nested in and then set the margin to be auto for the left and right sides.
I have a problem with the rendering of the navigation in Firefox. It is fine in Chrome and Opera, but in Firefox the whole navigation div floats right at the top right corner.
HTML:
<nav class="table">
<ul id="menu">
<li>Business</li>
<li>Specialities</li>
<li>Contact us</li>
</ul>
</nav>
And the CSS is:
.table {
display: table;
margin: 0 auto;
background: #ffe;
}
ul#menu {
min-width: 100%;
list-style: none;
margin: 1em 0 1em 0;
}
ul#menu li {
display: inline;
margin: 3em;
padding: 0;
}
ul#menu li a {
font-weight: bold;
font-size: 1em;
text-decoration: none;
text-transform: uppercase;
}
The attribute margin you are setting it to "0 auto". With the information given I see the navigation in the left top corner in chrome also. And it is correct to see it there.
The attribute margin has the structure: top right bottom left //Thank you PeeHaa
It is the same if you use the following attributes: margin-right, margin-left, margin-top and margin-bottom. Those are to specify a particular margin.
If this doesn't answer your question, then you have to see if you have some
position:fixed;
or
position:absolute;
or
float:left/right;
for any tag into your html.
I have made a functional CSS navigation-bar, except for some fugly CSS side-effects --
I am trying to vertically center the text in each list block, and vertical-align: middle was not working. Instead, I am using padding-top: 13px, but this renders the padded area without the background-color of the rest of the list element, and the display: inline block styling of the link does not extend to the padded area either! (a:hover is affecting only the area below the padding)So how can I vertically center text in list elements without these CSS problems?
Here is the relevant CSS:
/* header section */
#header
{
padding-left: 115px;
margin-bottom: 10px;
}
#main-menu
{
list-style-type: none;
}
#main-menu li
{
border: 1px solid black;
text-align: center;
padding-top: 13px;
color: #666;
font-family: "Lucida Console";
font-variant: small-caps;
letter-spacing: 2px;
/* for block layout */
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 153px;
height: 32px;
}
#main-menu a:link, a:visited
{
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 100%;
height: 100%;
background-color: #eee;
}
#main-menu a:hover, a:active
{
background-color: #bbb;
}<br /><br />
...and here is the relevant HTML:
<!-- header section -->
<div id = "header">
<ul id = "main-menu">
<!-- no spaces between list elements when all on the same line! -->
<li>home</li><li>about</li><li>cart</li><li>login</li><li>sign up</li>
</ul>
</div> <!-- end of header section -->
Things that I changed:
Changed the link to display as a block element.
Removed the padding at the top of the li elements.
Added that padding height to the height of the li elements.
Set the line-height to the height of the li elements.
Some formatting
http://jsfiddle.net/gtr053/7yrX7/
Try setting a line height
line-height: 13px;
I don't know much to anything but I've used this just now and it works
Entered into the Quick CSS of General styling
li {
display:inline;
padding: 0px 50px;
}
The first px brings the menu items down, and the second spreads them apart.
I have the following html for a simple navigation:
<header>
<div class="login">
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</header>
I have the following css:
header {
height: 145px;
border: 1px solid #f00;
}
.login {
float: right;
}
.login ul {
list-style: none;
margin: 0;
padding: 0;
}
.login li {
display: inline;
}
.login li a {
color: #fff;
background-color: #666;
padding: 5px 10px;
}
I am using HTML5 boilerplate so my header is displayed as a block element. When I view the page in a modern browser the result looks like:
Why is the anchor padding extending outside of the red border/header element? What is causing this behavior?
Furthermore, when I view the same page in IE compatibility view, it now looks like:
Here it seems like the padding is not applied at all or cut off by the containing div. I tried setting a height for the div but the result was still the same. What is causing this behavior?
Thanks
Try putting a display:block on .login li a and put a float:left on the .login li
Also you can shorten your code and take out the unnecessary div and just put the class on the ul.
HTML:
<header>
<ul class="login">
<li>Link</li>
<li>Link</li>
</ul>
</header>
CSS:
header {
height: 145px;
border: 1px solid #f00;
}
.login {
list-style: none;
margin: 0;
padding: 0;
float:right;
}
.login li {
float:left;
}
.login li a {
color: #fff;
background-color: #666;
padding: 5px 10px;
display:block;
}
http://jsfiddle.net/KPzUv/
What you are seeing is the body margin or padding. Set the margin to zero and it should go away. This is probably also a follow on problem caused by "margin collapse" between the header and the body causing the padding of the following element to leak through but I don't have time to check right now.