...

View Full Version : CSS Nav Bar - One Small Problem :)



MysticalEquine
05-08-2010, 05:58 PM
Someone here helped me with making sure the main bar stuck, now I'm having the very last problem and I have exhausted myself tying to fix it

(pic included for examples)

When the page is collapsed smaller, the hover horizontal bar goes across the page instead of directly under the main navigation bar

Example Page Normal
http://i39.photobucket.com/albums/e198/indigodreamz/Mystical%20Equine/navexample1.png

Example Page Collapsed
http://i39.photobucket.com/albums/e198/indigodreamz/Mystical%20Equine/navexample2.png

CSS For Navigation Bar




.nav {
height:35px;
background: url(images/bg2.gif) repeat-x;
/*position:absolute;
left:235px;
top:210px;*/
font-family:tahoma;
font-size:11px;
width:800px;
z-index:100;
margin:0 auto;
padding:0;
}

.nav .table {
display:table;
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(images/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#ffffff;
}


.nav .select a:hover,
.nav .select li:hover a {
background: url(images/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#000000;
}

.nav .select a b{
font-weight:bold;
}

.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(images/hover.gif) right top;
cursor:pointer;
}

.nav .select_sub {
display:none;
}

.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#112D45;
}

.nav .select :hover .select_sub,
.nav .current .show {
display:block;
width:794px;
position:absolute;
left:235px;
top:242px;
margin:0 auto;
background:url(images/back.gif);
padding:0;
z-index:100;

text-align:center;
}

.nav .current .show {
z-index:100;
}

.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#ffffff;
}

.nav .current .sub li.sub_show a {
color:#ffffff;
cursor:default;
}

.nav .select .sub li a {
font-weight:normal;
}

.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#000000;
}




Any help really really appreciated!

MysticalEquine
05-15-2010, 06:42 PM
can anyone help me...its driving me nuts!

effpeetee
05-16-2010, 06:07 PM
Trying to be helpful.
I have put the page here. (http://exitfegs.co.uk/16_5.html) I will try to understand what the problem is.

This version with css (http://www.exitfegs.co.uk/16_5b.html)in the head portion.
You do not have a Doctype.
I have added one. Doctypes are vital to ensure cross browser performance

What exactly do you do to produce the problem?
What screen resolution?
What browser?

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum