Navigation Menu

[Sirax]

Hey all,I have a little issue with a navigation menu that I'm building on a test-website.You can visit the test-page by clicking on this link:CLICK HEREWhen you go with your mouse over the menu buttons, you can see that the :hover effect is to high. Also when you click on a button, there comes a dashed line around the button, but that line is also 1px to high at the top.So when I edit some things in the styles.css I can't get it the way I want.HTML code:

<div id="title"><!--TITLE STARTS--></div><!--TITLE ENDS--><div id="navigation"><!--NAVIGATION STARTS--><ul><li><a href="#" class="active">home</a></li><li><a href="#">products</a></li><li><a href="#">services</a></li><li><a href="#">about</a></li><li><a href="#">links</a></li><li><a href="#">contact</a></li></ul></div><!--NAVIGATION ENDS-->

CSS code:

* {	margin: 0px;	padding: 0px;}body {	background-color: #FFFFFF;	background-image: url(images/bg.gif);	background-repeat: repeat-x	font-family: Verdana;}#container {	margin: auto;	width: 793px;}#title {	height: 63px;	width: 367;	background-image: url(images/logo.png);	background-repeat: no-repeat;	background-position: center;	margin-top: 49px;}#navigation {	height: 60px;	width: 793px;	float: left;}#navigation li {	display: block;	list-style-type: none;	float: left;	background-image: url(images/nav_seperator.gif);	background-repeat: no-repeat;	background-position: left;	margin-top: 37px;}#navigation li a {	color: #686868;	font-family: Verdana;	font-weight: normal;	width: 108px;	height: 39px;	text-align: center;	text-transform: uppercase;	font-size: 15px;	padding-top: 23px;	float: left;	text-decoration: none;	margin-left: 1px;}#navigation li a:hover {	background-image: url(images/nav_hover.gif);	background-repeat: repeat-x;	color: #0087c7;	margin-left: 1px;}#navigation li a.active { 	background-image: url(images/nav_hover.gif);	background-repeat: repeat-x;	color: #0087c7;	margin-left: 1px;}

I hope someone can tell me what I'm doing wrong, because I get this issue with all the menu's I'm trying to build.Thx in @vance

[jeffman]

I am concerned that your page has such a big background image that incorporates the rest state of your menu items.Most menus with rest-state background and a hover-state background toggle the background image of a single element, such as an <a> element or in <li> element. That is, the background image is swapped. There are 2 advantages to such a plan. 1, the resting image and the hover image occupy the same physical space, so alignment is very simple, virtually automatic. 2, the whole menu is a self-contained unit that relies on no external elements for positioning. A new header can be added, with an entirely different height, and the menu would not have to be adjusted. Certainly the body background would not have to be adjusted.The plan you're using now relies on a static background image to provide the rest-state of your menu items. The hover-state adds an image that overlays the background without replacing it. This makes positioning a challenge, and will make long-term maintenance an extreme hassle.

[Sirax]

Ok, so what do you suggest I should do? The thing that I want to do is... I've designed a Website layout in Photoshop CS4, and now I would like to make a HTML/CSS website from that design.You can see a picture of the complete layout by clicking HERESo what is the best way to get this design in a working html/css? Now I did for my background 60x1000px gif and repeat it to the x-as.

[jeffman]

Basically, same as you're doing now. Just do the backgrounds different. Don't try to work all the different features into a body background. Give the header, the nav, and the content their own backgrounds.I use photoshop the way you're doing all the time. Then I pick things apart to construct the separate elements. That's the step you skipped.

[Sirax]

So you mean I should remove the background image in the body in css? And just add a white color for the body background?Then for each element (title, navigation, content) you add the background image? But inhere for example I have already for the title a image (logo), so here I need to do a div title for the background and for example another div called logo for the logo image then?

[jeffman]

I don't know what you should do for the body background. Something sensible. Maybe use the textured pattern that I see now in the bottom of your page. A repeating image for that could be as small as 24px or so, I think.For your "title," currently you have the logo placed on a solid color. So your div can have a background color and a background image. The logo image can be the size the logo itself. Its background position can be centered.Or give the div background color, and no background image, and put the logo in an <img> tag inside the div. Again, the logo image only needs to be as wide as the logo itself. It does not need to be the width of the screen. An advantage to using this technique is you would not have to define the div height in CSS. The div would automatically size itself to the height of the image. (You could of course add padding if you like.) Even better if the image is a .png file with alpha transparency. Then you could change the div's background color without having to change the image.

[Sirax]

Ok thanks for all the help and tips...I'll try to do it the way you told me and I hope that will work :)You will here from me later if it worked or not

[scout1idf]

I noticed you didn't put a px on your width element.

#title {	height: 63px;	[b][color="#FF0000"]width: 367;[/color][/b]	background-image: url(images/logo.png);	background-repeat: no-repeat;	background-position: center;	margin-top: 49px;}

Hope that helps....

[Sirax]

@ scout1idf:Thx, thats something I did not noticed, but now my title issen't in the middle of the browser anymore when I add the px... :S@ Deirdre's Dad:Ok so you told me I don't have to make a bg.gif for the whole background and then do repeat-x, but how do you import then things like this?CLICK HEREThose small lines?And another thing: You said my background color for the header (title) is just a solid color (#F1F1F1), but how can I give it a specified height? like with a img you just say height: 50px and it's ok but if no img is used?

[jeffman]

Rather than explain it all, I went ahead and tweaked your stuff. It was a little more complicated than I wanted, since you want that menu bar to extend past the container. So I put your nav system outside the container also. Everything is tweaked except the logo image. All the backgrounds, the separator, the css, and the index file. I also added a new image to handle the rest state of your nav bar. But most of the work is still yours. Just rearranged into something more flexible.The main thing is, you can change the top section and not have to change the other sections also. Same with the nav section. Changing it doesn't mean you have to change anything else.EDIT: link removed

[Sirax]

Yeah, thats the stuff I wanted to have, I'm gonna look into the css/html code and check it with mine, so I can see what the differents is.Thanks alot for the help at this point so far :)Btw... Do you have a way to copy the images that you've used from the link you gave me?

[jeffman]

The image addresses are spelled out in the css file, so you can just put those in your browsers address bar

[Sirax]

Ok I found the images :)Now one more little thing... As you can see, at the right of the nav bar next to the button contact, there is no end, no seperator.I tried to add it like this:

<div id="navigation"><!--NAVIGATION STARTS-->  <ul>	<li><a class="active" href="#">home</a></li>	<li><a href="#">products</a></li>	<li><a href="#">services</a></li>	<li><a href="#">about</a></li>	<li><a href="#">links</a></li>	<li><a href="#">contact</a></li>  </ul>  <div class="seperator"></div></div><!--NAVIGATION ENDS-->

.seperator {	float: left;	background-image: url(images/nav_seperator.gif);	background-repeat: no-repeat;}

But I think I'm missing some css code to get the image in place... any idea?

[jeffman]

It would probably work if the div had a defined width, but then you'd be surprised, because it would appear after the 793px (way over to the right) not immediately after the final <li> element, which is where you want it.Without drastically revising your structure and CSS, I have found a solution. I don't especially like it, but it does seem harmless enough. Add the following item to the end of your menu list, immediately after the "contact" item:<li><a href="#" style="width:2px;cursor:default"></a></li>

[Sirax]

Thats a strange way to fix the problem, but ok it worked and I trust you that it's not harmless :)Now I was building the sitebuild further and again I'm stuck abit:The website looks like this at this point:SEE HERESo as you can see, the nav bar is not the same lenght as the content is... The left side of the navbar is good with the content below, but the right side of the navbar is not equal with the content below. And then the icon + text I placed in the first content, doesn't appears like in the PSD layout like HERE.

[jeffman]

The menu buttons do not line up because their total width is less than 793px. If you are absolutely certain that these are the only buttons you will have, then simply divide 793 by 6 buttons and adjust the width of each button.If you like the button width and would like the buttons centered, then adjust the width of the <ul> so it is exactly as wide as the total width of the buttons. Make sure it is still centered.The icon is not working because it is a background, and text floats over the background. If you want the icon, the text, but no heading, then the icon needs to be in an <img> element, not background, so that text can wrap around it.In your .psd, I see a heading beside the icon. This is actually easy, because you can create a heading element with the icon as a background, and use padding-left or text-align:center to position the words to the right of the icon.

[Sirax]

I'm absolutely certain that I only need those 6 buttons, so when I divide 793 by 6 it's 132px for each button.So if I'm right I have to change this: width: 108px; to this: width: 132px; in this part of the css: #navigation li a { ? Our how do I add the width for each button?Ok I tried it this way, and it worked :)So the menu is now nicely centered in the middle equal with the content boxes below.Allthough, at the right side, I'm still missing some 2px as you can see HERE.I tried with this line: <li><a href="#" style="width:2px;cursor:default"></a></li> to add a margin-left: 2px; but no effect.Lol I'm sorry I'm so detailed but I want my first sitebuild to be perfect you know