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.
Related
I have a media query to make my navbar buttons vertical on small screens, but when this happens there is blank space to the left of each button and I don't know why, as there is no left margin in my code. Thanks in advance to anyone who can get rid of this.
CSS:
/* Navbar */
#navbar {
background-color: #599;
list-style-type: none;
overflow: hidden;
margin: 0px;
width: auto;
text-align: centre;
font-family: 'corbel','arial';
text-align: center;
}
#nav_li {
float: left;
display: inline;
text-align: center;
}
#nav_a {
text-decoration: none;
margin: 10px;
display: inline-block;
color: white;
}
/* Media queries for smaller screens*/
#media screen and (max-width : 350px){
/* reduce padding */
header nav a{padding:.7em .7em; }
[role=main]{padding:1.5em 1.5em;}
/* make navbar vertical */
#nav_li{text-align: center;
border-bottom: 1px solid #eee;}
#nav_li, #navbar_a{width: 100%;}
HTML:
<ul id='navbar'>
<li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
<li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
<li id='nav_li'><a id='nav_a' href='testimonials.html'>Testimonials</a></li>
<li id='nav_li'><a id='nav_a' href='contact.html'>Contact </a></li>
</ul>
By Default UL Element Take some padding from left. You need to add below css to resolve this:
#navbar {
padding: 0px;
}
In my navigation bar, the links to other pages are placed underneath each other.
The links change by background-color when you hover them. Now I want it to hover full screen.
I already tried by setting padding-left and padding-right:auto, but that just doesn't work as I expect.
I don't want to add a fixed measurement(ex. padding-left: 100px; padding-right:100px;) because then it won't be responsive anymore when I minimize or enlarge the browser.
How can I do this?
Sorry I don't want it to hover fullscreen but to hover the size of the <div>.
HTML:
<div id="website">
<nav>
<ul>
<li>wie</li>
<li>hoe</li>
<li>wat</li>
<li>contact</li>
</ul>
</nav>
</div>
CSS:
body {
font-size: 62.5%; /* 16px*62.5%=10px */
font-family: Cabin, Arial, sans-serif;
color: black;
background-image: url(../images/ruitjesweb.svg);
}
#website {
max-width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
nav {
background-color: white;
}
nav li {
padding-top: 15px;
padding-bottom: 15px;
font-size: 1rem;
text-transform: uppercase;
}
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
}
nav a:hover {
background-color: green;
color: white;
}
If I understand your question right, all you need to do is add the display: block attribute to your <a> elements, e.g. like this:
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
display: block; /* <-- add this line */
}
This will cause the links to be rendered as block-level elements, which will, by default, take up the entire width of the <li> element containing them.
Here's a demo of the result on JSFiddle. In the demo, I also added display: block (instead of the default display: list-item) to the <li> elements to get rid of the bullets, and padding: 0 to the <ul> to get rid of the indentation. The result is that all these elements, down to the <a>s, inherit the full width of the enclosing <div>.
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 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".