content and container and widths: Navigation

Ant · March 17, 2010

To begin, my fault in all this, amongst other things, is not understanding how width: auto,100% etc effects my containers and the elements inside.

I want my navigation menu to fill my 990px wide div that holds it. So the elements should expand themselves till they reach the end. Obviously if I have to much content it will run past, but that's not the case.

I want my nav links & boxes to fill my 990px div and be centered. Almost like on this sites home page, BUT equal blank space both left and right of the first and last nav button.

I ask myself, should I tell the div to expand all content inside equally till it reaches the 990px width. OR do I tell the elements inside the div to expand till they reach the containers 990px boundary horizontally. I'm confused by this. Which controls which? i.e whos the master?

Heres what I have so far. Of course I cant seem to center the text vertically in the boxes, only horizontally.If some of this seems unnecessary,it's probably because I was trying various different things to see if any would make a change.

#navigation {

height: 30px;

width: 990px;

}

#navigation {

background-color: #CC9999;

height: 50px;

}

ul

{

list-style-type:none;

margin:0;

padding:0;

}

li

{

float: left;

display: inline;

}

a

{

height:23px;

text-align: center;

background-color:#666633;

font-family: Arial, Helvetica, sans-serif;

text-decoration: none;

font-weight: bold;

text-transform: uppercase;

color: #FFFFFF;

letter-spacing: 2pt;

width: 100px;

display: block;

}

<ul>

<li><a href="contact.asp">Contact</a></li>

<li><a href="about.asp">About</a></li>

<li><a href="contact.asp">Contact</a></li>

<li><a href="about.asp">About</a></li>

</ul>

</div>

falkencreative · March 17, 2010

You might want to start here (and adjust spacing as necessary):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<style type="text/css">

		#navigation {
		background-color: #CC9999;
		height: 50px;
		width: 990px;
		}


		ul
		{
		margin:0;
		padding:0 0 0 10px; /* add left padding to add some spacing */
		}

		li
		{
		float:left;
		width:12.5%; /* 100 divided by the total number of nav items: 8 */
		list-style: none; /* remove bullets */
		overflow: hidden; /* added since we are floating the li */
		}

		a
		{
		height:50px;
		line-height: 50px; /* vertically align text - set to the same value as the height */
		text-align: center;
		background-color:#666633;
		font-family: Arial, Helvetica, sans-serif;
		text-decoration: none;
		font-weight: bold;
		text-transform: uppercase;
		color: #FFFFFF;
		letter-spacing: 2pt;
		display: block;
		width:96%; /* 95% of the li width */
		}

	</style>

</head>
<body>

<div id="navigation">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>



</ul>
</div>

</body>
</html>

Wickham · March 18, 2010

I want my nav links & boxes to fill my 990px div and be centered. Almost like on this sites home page, BUT equal blank space both left and right of the first and last nav button.

I want my nav links & boxes to fill my 990px div and be centered.

That's a contradiction. If the boxes fill the container, they don't have to be centered (unless you mean the text inside).

Ben's method of making each nav li width: 12.5% means that they should fit exactly, but you won't get a blank space at far left and right, you will only get standard padding or margin on all of them.

Another method is to use a method of centering the li tags inside a container (which can be a fluid width if you want). See item 4 here:-

http://www.wickham43.net/dropdownmenus.php

where the li tags have no stated width, so some are wider than others, and the container has no width, but the whole menu centers inside. Drag the window of my example wider and narrower and see that the menu stays centered.

Edit: one problem with Ben's 12.5% is that all menu li tags are the same width, so if one has link text for a short word like Home and another has a long link text like Televisions and Computers, the longer one might not fit 12.5% and the Home one would have a large space both sides of the text. My example avoids this.

Edited March 18, 2010 by Wickham

PicnicTutorials · March 18, 2010

Morning, Ant you may find all these examples helpful also. http://www.visibilityinherit.com/code/center-nav.php

Ant · March 18, 2010

Guys, thanks for the help.

Whats tough is trying to figure out how to combine 4 different elements of the nav. bar:

ul, li, a, #navigation & div, to create what I think is a complex task. I try and associate each of the elements as a visual representation in my mind. Problem is they don't necessarily have an "image" associated with them.

The type of stuff that loses me is this: width:95%; /* 95% of the li width */ from this css.(see below) To me it reads, the width of EACH a element in my nav. should be 95%, BUT whats the width of the a elements? The size of the words chosen along with the text size I denoted (or it's default size) as well as the size of each box generated by a and li ?

Is the li the actual word and box size, or is the a item the actual word and box size. Doesn't the a tag just make the li word a link.

a

{

height:50px;

line-height: 50px; /* vertically align text - set to the same value as the height */

text-align: center;

background-color:#666633;

font-family: Arial, Helvetica, sans-serif;

text-decoration: none;

font-weight: bold;

text-transform: uppercase;

color: #FFFFFF;

letter-spacing: 2pt;

display: block;

width:95%; /* 95% of the li width */

}

By the time I get a good handle on all this, it will all be outdated and go the way of things like rubylith, paste up etc.

Ant

Wickham · March 18, 2010

The ul tag is the container for all the menu button li tags and it can have its own margin to separate it from outside elements or padding to stop inner li tags from going right to the edges.

Li tags are the containers inside the ul tag and can have there own margin to separate each other from the next li tag and padding to stop the text inside from going to the edges of the li container.

The "a" tag contains the actual text link and can also have padding and margin to sides but not top and bottom unless the "a" tag has been converted to a block element (it's an inline element by default). This is quite a useful tutorial:-

http://www.maxdesign.com.au/articles/inline/

see Inline elements and padding and Inline elements and margins.

So you can edit the margin or padding on any of them. It's best to start with no margin or padding for all of them with a general reset:-

h1, h2, h3, h4, h5, h6, p, ul, li, a { margin: 0; padding: 0; }

at the top of your stylesheet and then add margin or padding to just a few places after the general reset.

I distrust % widths because I often think that browsers apply the % differently, so I either don't state a width at all and see what it looks like with just padding and/or margin, then add widths in px if necessary.

If you don't state any width the text can expand the container if someone increases text size.

You shouldn't have to use a div tag inside ul or li tags, although you might need a div as a container for the whole ul tag menu.

Edited March 18, 2010 by Wickham

Ant · March 23, 2010

Wickham, thanks.

I think I have it.

Question:

If I want to declare the font type for my links (NOT THE hover etc, but the plain link text) where should I do that? in the a or the a:link. As a test I also tried declaring them in the #nav ul, #nav li, #nav a etc.and they all effected the link text. Shouldn't only one WORK. How am I able to declare a font type for the ul, etc element if they are not elements that represent TEXT?

Whats the right way, and if there is one, why do other ways work as well.

Below is what I have so far.

The one problem I'm having, is when I preview it in different browsers,from dreamweaver, the initial look of the nav bar is slightly distorted. When you click on it, it sort of SNAPS into proportion and looks correct.

Any reason for that?

/* nav styling */

#nav {

text-align:center;

height: 30px;

}

#nav ul {

display:inline-block;

list-style:none;

}

* html #nav ul { /* Target IE6 */

display:inline;

}

*+html #nav ul { /* Target IE7 */

display:inline;

}

#nav li {

display:inline;

}

#nav a {

float:left;

text-decoration:none;

padding:0 17px; /* variable width */

font-size: 13px;

height:30px;

line-height: 30px; /* vertically align text - set to the same value as the height */

display:inline;

}

#nav a:link

{

font-weight:normal;

color:#FFFFFF;

background-color:#98bf21;

text-align:center;

padding:6px;

text-decoration:none;

text-transform:uppercase;

font-family: Arial, Helvetica, sans-serif;

}

#nav a:visited

{

font-weight:normal;

color:#FFFFFF;

background-color:#98bf21;

text-align:center;

text-decoration:none;

text-transform:uppercase;

font-family: Arial, Helvetica, sans-serif;

}

#nav a:hover

{

color:#333300;

background-color:#7A991A;

font-family: Arial, Helvetica, sans-serif;

font-weight: bolder;

}

#nav a:active

{

color:#333300;

background-color:#7A991A;

font-family: Arial, Helvetica, sans-serif;

font-weight: bolder;

}

/* nav styling */

<ul>

<li><a href="#">Photos</a></li>

<li><a href="#">Destinations</a></li>

<li><a href="#">Events</a></li>

<li><a href="#">Lessons</a></li>

<li><a href="#">Spey Casting </a></li>

<li><a href="#">CONTACT US</a></li>

</ul>

</div>

newseed · March 23, 2010

Keep in mind the order of how things are styled. If you css a ul to have a certain style it will render accordingly including child elements. However, any child elements such as li can override the ul element and the a element can override both ul and li elements.

Let's say you have this in your html:

<ul id="nav">
<li><a href="#urlhere">Home Link</a></li>
<li><a href="#urlhere">Contact Link</a></li>
<li>Welcome</li>
</ul>

You can see that I have two hyperlinks and one without. Now let's say the default ul element has a font-size of 12px, font-weight being bold and the color is black:

ul {font-size: 12px; font-weight: bold; color: #000;}

and you want to override it with a different size and color. First we will set the new font size specifically for the #nav.

ul#nav {font-size: 14px;}

The above is now 14px font height.

Now you want to make the links a different color. You would do this:

ul#nav a {color: #ff0000;}

This will only change the hyperlink color to red. The text 'Welcome' will still stay black.

Now you want to make the text 'Welcome' to not be bold while keeping the hyperlinks bold.

ul#nav li {font-weight: normal;}

ul#nav a {color: #ff0000; font-weight: bold;}

So it's possible to set a lot of different styles to the ul element without styling the child elements and still renders the styles. Doing the example above are additional ways to isolate a certain element that you can style without affecting the other elements.

To take it one step further and define each hyperlink to have it's own color.

<ul id="nav">
<li><a class="red" href="#urlhere">Home Link</a></li>
<li><a class="blue" href="#urlhere">Contact Link</a></li>
<li>Welcome</li>
</ul>

ul#nav a.red {color: #ff0000;}

ul#nav a.blue {color: #0000ff;}

I hope that helps.

Edited March 23, 2010 by newseed

Ant · March 23, 2010

Thanks newseed.

I'm trying to understand it.

Up till now I was using class and ID's to style my elements in a very straightforward way. i.e. adding all different classes to elements at every instance. I never thought of doing it the way you showed.

I think it's under "CSS: Use Descendant Selectors" I think i skipped a big section of class/ID when I learned css.

I understand this ul#nav. You are telling the UL element to be styled according to the css when it is the child of the ID = nav. Is that right? It cuts down on the html code?

What I don't understand is this: ul# a {color: #ff0000;} Whats the ID... "a" ?

Ant

Wickham · March 23, 2010

I think that everywhere he has ul# it should be ul#nav - just a typo.

Ant · March 23, 2010

Thanks Wickham.

Any thoughts for this:

"The one problem I'm having, is when I preview it in different browsers,from dreamweaver, the initial look of the nav bar is slightly distorted. When you click on it, it sort of SNAPS into proportion and looks correct.

Ant

newseed · March 23, 2010

My apologies. I have corrected my post.

Sign In

content and container and widths: Navigation

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation