I'm a beginner at CSS and am trying to understand how the text in each li element in a nav menu can be centered, both vertically and horizontally.
As an example, I am looking at this particular nav menu from David Appleyard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu</title>
<style type="text/css">
body {
padding: 50px;
}
/* The CSS Code for the menu starts here */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
</style>
</head>
<body>
<!-- Grey Menu -->
<div id="menu_wrapper" class="grey">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li class="active">About</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
How is he getting his li text nicely in the middle of the li elements? Is he just playing around with padding and line-heights until he gets it perfect?
Also, on a side note, why does he set his #menu li as to display:block?
Here's the breakdown:
display: block;
He's doing this because you can give block boxes padding. This is nice because padding is included in the 'clickable' area around the link. Users are accustomed to thinking of menu items as 'buttons,' so it's nice to be able to click more than just the text.
View a JSFiddle isolating the padding on an anchor
Note: I only floated the a to keep it from extending the entire width of the iframe
Centering horizontally
The padding of the anchor elements is symmetrical, so they're appearing to be centered horizontally. The line that does this is padding: 0 20px;. Note that the fact that these block boxes don't extend the full width is because their parents are set to float left.
Here's a JSFiddle isolating this centering effect.
Note: The parents being floated left is what causes everything to appear on the same line
Centering vertical
Text is centered, by default, about the center of the line. If you're trying to center a single line within a containing element, a nifty trick is to just set the line-height to be the height of that element. In this case, the parent is set to be height: 40px so he's matching that height. The line that does what I've described here is line-height: 40px;
Here's a JSFiddle isolating the vertical centering.
Other possibilities
You'll see that I centered the a horizontally and vertically in the very first JSFiddle I posted. That's usually the method I use, but of course, there's always more than one way to do things. The best method is probably dependent on the context of your project!
Yes, it's the line-height: 40px that centers vertically. This won't look right if the text were ever to wrap.
Anchors are display: block so that padding is applied to a block-level element, rather than the default inline (try changing it to see how the appearance changes). The anchor will essentially "fill" it's container LI element, which is floated to keep things on the same line (while not "inline").
Related
So I've been working on a website in html5 and css3, but I've ran into a problem. My wrapper is 960px, and within that wrapper I have 2 DIVs, 1 being floated left, and the size of that one is 240px, and 1 floating right, with the size being 695px. In browsers there is a zoom feature, which I assume simulates different resolutions. So when I zoom out a couple of clicks, my right floated div, expands and goes underneath my left floated div. Take a look at the screenshots:
Normal: http://puu.sh/iMCEn/eff5baff4d.png
Zoomed: http://puu.sh/iMCGQ/98145b5788.png
Here is my CSS:
* { margin:0; padding:0;}
#font-face {
font-family: reckoner;
src: url(../fonts/Reckoner.ttf);
}
#font-face {
font-family: champ;
src: url(../fonts/champ.ttf)
}
body {
background-color: #333333;
}
#wrap {
width: 960px;
margin: 150px auto 0 auto;
}
#banner {
color: #e5e5e5;
font-family: reckoner;
font-size: 65px;
text-shadow: 0px 0px 10px black;
margin-left: 10.5px;
}
#main {
height: auto;
overflow: auto;
background-color: #1a1a1a;
border: 1px solid #404040;
outline: 2px solid black;
}
#nav {
font-family: champ;
width: 240px;
float: left;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
text-decoration: none;
background: #262626;
padding: 7px;
margin: 10px;
outline: 1px solid #404040;
border: 1px solid black;
}
#nav ul li:hover {
background-color: #404040;
}
#nav ul a {
text-decoration: none;
color:#e5e5e5;
font-size:17px;
text-transform: uppercase;
text-shadow: 0px 0px 10px black;
}
#content {
float: right;
width: 695px;
min-height:500px;
background-color: #262626;
margin: 10px;
outline: 1px solid #404040;
border: 1px solid black;
}
Here is the HTML:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>AAA GAMING - TRIPLE A GAMING</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrap">
<div id="banner">AAA GAMING</div>
<div id="main">
<div id="nav">
<ul>
<li>Home</li>
<li>Donate</li>
<li>Chat</li>
<li>How To Connect</li>
<li>Application</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! Thank you!
The zoom feature does not simulate different resolutions, a better way to do this is resizing the browser window. Zoom is notorious at breaking layouts due to rounding errors so I wouldn't fret too much over it, but in this case fixing the problem is easy.
I replicated this problem in Chrome.
Floats are often glitchy like this because if anything happens to make the stuff fitting in the remaining space beside a float, wider than the floating element, they'll get bumped down below the floating element. This is what is happening here. In general, I also avoid placing two floating elements side-by-side.
The two basic solutions are:
Make the element narrow enough that it doesn't happen
Use something besides a float (like absolute positioning)
(2) is a long-term solution I'd recommend for new layouts. But a quick solution to implement (1) in this case is to change the margin of the #content element. Under:
margin: 10px;
Add the line:
margin-left: -10px;
This fixes the problem on my browser at all zooms down to 25%. It also doesn't visibly effect the layout at all in any other way, because it doesn't affect the width of the visible part of the element itself, it only effects the width of its container which can force it to get bumped down.
It looks like your main container is changing width on the browser zoom. If you set the min-width style on it, it will stop shrinking beyond the breaking point. I set it to min-width: 965px; and that seemed to stop the breaking on zoom (at least in Chrome).
I have a horizontal menu that is made up of a series of ul's and li's. The submenus look great so I don't need to do anything with those. The primary ul looks great until you hover over the far right li.
When doing that, it looks good in Safari but the hover comes about 2 pixels short of the background on the ul in Firefox and IE and even more in Chrome. I have tried adjusting the padding to make it look good in Firefox and IE but then you still have the same issue in Chrome and in Safari, that far right li breaks down to a new line. Of course, adjusting it to look good in Chrome makes all the other browsers break to a new line. This site is using Wordpress which creates the menu dynamically so I can only change the CSS. Here is the basic idea for the code:
<html>
<head>
<style type="text/css">
#header {
margin: 0 auto;
width: 980px;
}
ul li {
font-size: 13px;
line-height: 21px;
}
#header .main-nav #menu-main-navigation {
background: #169BAC;
width: 100%
}
#header .main-nav > div ul {
width: 100%;
list-style: none;
float: left;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#header .main-nav > div ul li ul{
top: 43px;
}
#header .main-nav .menu-div>ul>li {
padding: 5px 14px;
float: left;
border-right: solid 1px #54AEC2;
}
#header .main-nav .menu-div ul li:hover {
background: #2A588D;
}
#header .main-nav .menu-div>ul>li:first-child {
padding-top: 9px;
height: 28px;
}
#header .main-nav .menu-div>ul>li:last-child {
padding: 5px 26px;
border-right: none;
}
#header .main-nav .menu-div>ul>li a{
line-height: 15px;
text-decoration: none;
color: #FFF;
padding: 0px 13px;
text-align: center;
display: inline-block;
}
</style>
<head>
<body>
<header id="header">
<nav class="main-nav">
<div class="menu-div">
<ul id="menu-main-navigation" class="menu">
<li id="menu-item-275">Home</li>
<li id="menu-item-310">For New<br />Patients</li>
<li id="menu-item-376">Cleanings &<br />Prevention</li>
<li id="menu-item-381">General<br />Dentistry</li>
<li id="menu-item-453">Restore Your<br />Smile</li>
<li id="menu-item-462">Dental Anxiety &<br />Sedation Options</li>
<li id="menu-item-463">Dentistry For<br />Kids</li>
<li id="menu-item-464">Insurance &<br />Payment Options</li>
</ul>
</div>
</nav>
</header>
</body>
You can see the site at http://riverbend.caswellwebcreations.com.
Thank you for any help that you can give me on this.
The width of the li elements is being defined by their padding and the font-size (and padding) of the a elements inside them. The font propertys are not uniform between browsers, some browsers put text bigger or smaller than others. That seems to be the problem.
If you want to stretch the li elements "cross-browser" you should define the width of the li elements via css like this:
#menu-item-275{
width: 64px;
}
#menu-item-310{
width: 77px;
}
#menu-item-376{
width: 96px;
}
#menu-item-381{
width: 82px;
}
#menu-item-453{
width: 104px;
}
#menu-item-462{
width: 131px;
}
#menu-item-463{
width: 105px;
}
#menu-item-464{
width: 132px;
}
If you sum the width of each li item (plus padding and border) you get the width of the menu container: 980px. And the browsers will take that width to render the li's.
I hope this works!
UPDATE
Just found another (and more easy) solution!: https://stackoverflow.com/a/14361778/3762078
#header .main-nav .menu-div>ul>li:last-child {
padding: 5px 20px;
border-right: none;
float: none; /* ADD THIS */
overflow: hidden; /* AND THIS */
}
'float: none'. Forces last li element to be as wide as it can (the
default block element's behavior).
'overflow: hidden'. Prevents the last li element to stretch to ul's full width.
Although this doesn't prevent the width changes to all li elements on every browser, hence making the last li's width be thinner or wider (and sometimes expanding that li's height), is a nice solution.
Following is a css the menu items appear from the corner of the bar
http://jsfiddle.net/bej85/
and I edited the css and added
width:19em;
in #nav ul section of css and the menu items came to center.
http://jsfiddle.net/bej85/1/
I am not very clear as why adding a margin brought menu items to center,
I am new to css kind of thing and html so I want to understand this behavior.
Following is code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
list-style:none;
margin:0 auto;
padding: 0;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
and here is how it appears when width:19em is in nav ul section
and if width:19em is not present in nav ul section then it appears as below
What I want to know is why is this behavior of width:19em in nav section.
That is not because of width: 19em but it is because of margin: 0 auto applied to the UL element.
margin: 0 auto brings any Block element to center if it has some width applied which is less than its parent element's width.
If you are not aware of the UL elements width then use display: inline-block to it and give text-align: center to its parent element.
I'm trying to make a banner on my webpage, the part on the top that is 700px wide and 80px high.
Code looks like:
<div class="container-narrow" style="heigth: 80px;">
<img src="#" width="52" height="52" alt="my logo" />
<ul>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
Css:
.container-narrow
{
margin: 0 auto;
max-width: 700px;
background: yellow;
}
ul
{
float: right;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a
{
float: right;
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
What I want is the image and the horizontal menu to be vertically aligned in the center of the 80px. the logo to the left and the menu to the right.
I've tried to set the height and then padd/margin my way to get the job done but it feels rubbish...
Problem:
ul has a width:100%; if you give it a black border you will see that its occupying the width of the page, means it has no space to reside on the left of the logo inside the yellow header.
Removing this width will give the following result: http://jsfiddle.net/YBVe6/
Now since the header has a fixed max width, which is 700px, there's many ways to center the logo and the menu.
Fastest way I can think of is the following:
Give ul a display: inline-block;, (remove float: right;) then give the header a text-align: center;, here's the result : http://jsfiddle.net/YBVe6/1/
And if you want the menu to be displayed in the upper part, just add vertical-align: top;.
To start of, it's a good practice if you have an external CSS, don't put additional CSS in your HTML blocks:
<div class="container-narrow">
and put the height style in your css sheet, as you have a class setup for your div there anyway.
Second, making typo's is a pain if you want your CSS to work properly, so instead of heigth you should use height, will make you div actually 80px high.
Third of all: margins are there the position elements. Use them!
.container-narrow
{
height: 80px;
margin: 0 auto;
max-width: 700px;
background: yellow;
}
img
{
margin-top:14px;
}
ul
{
float: right;
padding: 0;
margin: 0;
list-style-type: none;
margin-top:25px;
}
a
{
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
Edit
This is mostly applicable for vertical alignment. If you want to auto-center horizontally, you can make use of the margin:auto concept. This is possible because a page can't extend beyond the browser width (browser height can extend as you have scrolling available as default behavior).
I'd like to center a list of left-aligned items.
This is what I currently have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shrinkwrapped List</title>
<style type="text/css">
#wrapper {
margin: auto;
width: 500px;
border: solid 1px #CCCCCC;
}
#header {
text-align: center;
font-size: 200%;
}
#content {
text-align: center;
}
#content ul {
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
border: solid 1px #666666;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Shrinkwrapped List
</div>
<div id="content">
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur</li>
<li>Adipiscing elit</li>
<li>Morbi odio</li>
<li>Mi blandit vehicula</li>
</ul>
</div>
</div>
</body>
</html>
Which produces a page that looks like:
What I really want looks like this:
I can accomplish this by adding width: 200px; to #content ul but the problem is that I have a lot of lists like this and they all have various widths.
I'd like the <ul> to shrink to the content so it can be centered correctly. Or am I going about this the wrong way?
Thanks for any help you can provide.
Solution
Thanks to KennyTM and Magnar, here is the solution:
Add these four lines to #content ul's CSS rules:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
I've tested this in IE6, IE7, IE8 and Firefox 3.6. The results looks like the second image above and the list always fits to the content of the items.
Set the <ul> to use display: inline-block;. See http://jsbin.com/atizi4.
Note that inline-block is not supported (completely) for IE ≤7.
You can probably adopt my previous answer. Inline-block for IE, display:table for modern browsers. Might need to explicitly specify a list-style-type.
Edit: Since this is a list, may be able to get away with inline-block on the ul and not display:table. You need to declare in a separate rule, display:inline; after inline-block for IE.
I'd look at using CSS and putting a margin: 0 auto on the <ul> with a maximum width container.
Try this. It involves in incompatibilities, but I don't really know how older browsers handle margins and padding and all that anymore since I only work with new ones. It only involves some minor changes to your CSS.
/* I didn't style the other parts, so I'm taking them out to save space. */
#content {
margin: 0 auto;
}
#content ul {
border-top: solid 1px #666666;
border-bottom: solid 1px #666666;
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
width: 202px;
}
#content li {
border-left: solid 1px #666666;
border-right: solid 1px #666666;
margin: 0 auto;
padding: 0;
width: 200px;
}
Edit: I want to clarify what I changed. I changed how content is aligned, but honestly, you can change that back, I don't think it has an effect.
What I originally did was set a fixed width and centered your li element, which you had no styling for. That just centered the content. The border you placed was on the ul so it was very wide, but if we placed it in the li then we would have many boxes. So, I split the border style. The reason why #content ul has a 202px width is because borders count on the outside of the width.
I hope the explanation made it clear to why it worked. Good luck! I tested this out in Google Chrome.
A solution compatible with any browser, no matter how old it is:
Center the table and put your list inside.
Example:
<table style="margin-left:auto; margin-right:auto;"><tr><td>
<ul>
<li>Line1</li>
<li>Line test 2</li>
<li>Line long for test</li>
</ul>
</td></tr></table>