Menu problems border in active state.

[rrdesign]

Hi All,

I'm having some difficulties with a new site i'm building. I'm using some background images and roleovers and i'm quit new to that. The problems come with the long titles my client want. When i use a space or want to put it under eachother it is not lining up and the background image i copied to the second line. Als in my submenu when the tekst link goes to a second line it is not lining up it is a few pixels more to the left. And one more problem is the spacing in between all the links it seems the one has more space then the other one. I would like to have them lined up. Any ideas?

http://www.rrdesign.nl/HELMA/index.html

Update:

Okay i fixed a lot of things thanks to vikram. The only thing i'm still not able to fix is the border that is taking the length from the active background image. Anybody knows a way to fix this?

Regards,

Rein

[vikram1vicky]

Do the following changes in #nav ul li CSS properties and it will work fine

1. Remove padding-left and padding-right
2. Add text text-align: center;
3. Change width to 120px;


Following is working example:

#nav ul li {
    float: left;
    font: 0.75em/1.5em Arial,Helvetica,sans-serif;
    padding-top: 14px;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
}

[rrdesign]

Thanks that solved some problems. But still if my link will be longer it will move to a second line. That wouldn't be a problem if it didn't mass up my background. I now removed the background image for each button and just used one big bg for the hole bar. I still get with the "din en iso overzicht" button problems, i would like to have it lined up straight under eachother and that it is centered in the middle like the others (not sure if that is possible).

I still have the problem with the submenu under "informatie" where the links are not lined up, i don't really want to make the background box as big as the text.

And i have one more problem with the active state. I made the bottom-padding a bit bigger so that triangle can show up when its active. The only problem with this is that the right border is also keep going down until there.

Anybody can help me with this? Hope i'm not asking to much.

Regards,
Rein

[vikram1vicky]

You have to limit the navigation text lenght.

For sub navigation, you have to define display:block and width to <a>, so that all text will adjust within that width.

[rrdesign]

Okay, how do i'll define the block with to <a>?

[rrdesign]

Okay, how do i'll define the block with to <a>?

I changed some things, think it already looks a lot better. For the block define to <a> i now made to classes one for each submenu and changed the width there. But not very keen on that. Still having the problem with the border going down because of the active state image.

There also came another problem with the content. I have 2 divs left and right floated. But when the submenu goes down it was moving the image to the right, now i've but the content to clear:both but that is moving all the content down when the menu elapse and thats not what i want.

[vikram1vicky]

Host your latest code, We ll check it and try to help you

[rrdesign]

My Navigation css:

@charset "utf-8";
/* CSS Document */

#nav {
	background-image:url(images/menu_bg.png);
	background-repeat:no-repeat;
	width: 1000px;
	height: 47px;
	padding:0;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;

}

#nav ul li {
float: left;
padding-top:14px;
font: 0.75em/1.5em Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align:center;
}

#nav ul li a{
	padding: 0 10px 28px 10px;
	color: #fff;
}

#nav ul a:link, #nav ul a:visited {
	text-decoration:none;
	padding-top:15px;
	background-repeat:no-repeat;
	border-right: 1px solid #fff;
}

#nav ul a:hover {
	text-decoration:none;
	background-image:url(images/menu_btn2.png);
	background-position: -278px 0;
}

#nav ul a:active {
	text-decoration:none;
	background-image:url(images/menu_active.png);
	background-position: center -0px;
}

.last-child a {
	border:none !important;
}

.last-child {
	border: none !important;
}

/* ----- SUBNAV SMALL ----- */

#nav li.subNav ul {
	display:none;
}

	
#nav li.subNav:hover ul {
	display:block;
	margin:16px 0 0 0;
	font-size:1em;
	width:120px;
}

#nav li.subNav ul li {
	background-color:#36c194;
	width: 135px;
	text-align: left;
	border-bottom: 1px solid #fff;
	padding: 5px 0 5px 0;
}

#nav li.subNav ul li a {
color:#FFF;
font-size: 1em;
padding:10px 10px 10px 10px;
background:none;
border-right: 0px;
}

#nav li.subNav ul li a:link, #nav li.subNav ul li a:visited {
	text-decoration:none;
	color: #FFF;
}

#nav li.subNav ul li a:hover, #nav li.subNav ul li a:active {
	text-decoration:none;
	color: #004229 !important;
}

/* ----- SUBNAV BIG ----- */


#nav li.subNav2 ul {
	display:none;
}

	
#nav li.subNav2:hover ul {
	display:block;
	margin:16px 0 0 0;
	font-size:1em;
	width:150px;
}

#nav li.subNav2 ul li {
	background-color:#36c194;
	width: 173px;
	text-align: left;
	border-bottom: 1px solid #fff;
	padding: 5px 0 5px 0;
}

#nav li.subNav2 ul li a {
color:#FFF;
font-size: 1em;
padding:10px 10 10px 10px;
background:none;
border-right: 0px;
}

#nav li.subNav2 ul li a:link, #nav li.subNav ul li a:visited {
	text-decoration:none;
	color: #FFF;
}

#nav li.subNav2 ul li a:hover, #nav li.subNav ul li a:active {
	text-decoration:none;
	color: #004229;
}

Layout Code

/* CSS Document */


body {
	
	background-image: url(images/bg.png);
	background-repeat:repeat-x;
}

#container {
	width: 1000px;
	margin-left: auto ;
  	margin-right: auto ;
}

#header {
	background-image:url(images/banner.jpg);
	background-repeat:no-repeat;
	background-color: #FFF;
	height: 162px;
}


#content {
	background-color: #FFF;
	width: 970px;
	margin-top: 5px;
	margin-left: auto ;
  	margin-right: auto ;
	height: 400px;
	clear:both;
}

#left {
	float: left;
	width: 208px;	
	text-align: left;
	vertical-align:text-top;
}

#right {
	float: left;
	width: 761px;
	text-align: left;
	vertical-align:text-top;
}

#footer {
	height: 10px;
	margin-top: 5px;	
}

HTML Code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Helma-BV</title>

<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="nav.css" rel="stylesheet" type="text/css" />


</head>

<body>

<div id="container">
	
    <div id="header">
    </div>
    
<div id="nav">
      <ul>
        <li><a href="home.htm">Home</a></li>
        <li class="subNav2"><a href="#">Technische Informatie</a>
<ul>
        <li><a href="voorwaarde.htm">Algemene Voorwaarde</a></li>
            <li><a href="#">Tolerantie voor Sluitingen</a></li>
            <li><a href="#">Oppervlakte</a></li>
            <li class="last-child"><a href="#">Boorgate Tabel</a></li>
          </ul>
        </li>
        <li class="subNav"><a href="#">Din/Iso overzicht</a>
          <ul>
            <li><a href="#">Din 1 - 480</a></li>
            <li><a href="#">Din 508 - 939</a></li>
            <li><a href="#">Din 960 - 6927</a></li>
            <li class="last-child"><a href="#">Din 7337 - 80704</a></li>
          </ul>
        </li>
        <li><a href="overzicht.htm">Producten</a></li>
        <li><a href="nieuws.htm">Nieuws</a></li>
        <li><a href="leveringsoverzicht.htm">Leveringsoverzicht</a></li>
        <li><a href="contact.htm">Contact</a></li>
        <li class="last-child"><a href="bestellen.htm">Bestellen</a> </li>
      </ul>
  </div>
    
    <div id="content">
		<div id="left">
      <img src="images/left_slide.jpg" width=		"208" height="320" alt="Foto van een schroef" />          
      <p><a href="#">Algemeene Voorwaarde</a></p>
      </div>
        
        <div id="right"></div>
        
    </div>
    
    <div id="footer"></div>
</div>
</body>
</html>

[vikram1vicky]

Add following CSS properties to main nav li

position:relative;

Add following CSS properties in sub nav ul

position:absolute;
left:0;
top:16px;
z-index:10;

Hope it will resolve your issue

[rrdesign]

Thank you so much for your help vikram that really did the trick i was trying this z-index on 1 and 2 but it was not working.

Now i only have one problem left and that is the border that goes down together with the arrow. I fixed it a little bit by only extanding the padding when in active state so the border is not showing on all the buttons. I'd try things like border none on active and add a left border aswel but then you get a 2px border, so that didn't work.

Is there maybe a code for a maximum height for the border? Is there a way that i can keep the border the same height and let the arrow come out when its in active state?

I'm now having the active state with a image and more padding because it has more height. Is this the right way to do it or is there a better way?