Drop down Navbar- Help Centering it

[mmtoruno]

I got to working on a Drop Down Navbar
For now I only have 3 drop down "tabs" and I would like for them to be centered on my Homepage.

Also how do I change the backgroung inside the tabs to match the same color of the background box in my slideshow

Thanks for all the help

my page is http://www.torunofamily.smugmug.com/

[mmtoruno]

Bump ^^^^

[Allen]

I got to working on a Drop Down Navbar
For now I only have 3 drop down "tabs" and I would like for them to be centered on my Homepage.

Also how do I change the backgroung inside the tabs to match the same color of the background box in my slideshow

Thanks for all the help

my page is http://www.torunofamily.smugmug.com/
Play with the width. What ever the width is the margin: 0 auto; will center
that width. Too small and the nav will wrap to two lines.

/* style the outer div to give it width */
.menu {
margin: 0 auto;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:400px; /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

Move this from the "head tag" to the top of the "header".

<div id="my_header"><a href="http://torunofamily.smugmug.com"><img src="/img/spacer.gif" border="0" height="70" width="605"></a></div>

Went thru and cleaned up your html a little. It was in pretty good shape,
see the bold for the changes. Also added in the relative links, makes the
code smaller and easier to read. Don't realy need the
http://www.torunofamily.smugmug.com or
http://torunofamily.smugmug.com
in front of each.

Also remove that thing at the end.

<!-- CSS Dropdown Nav Bar -->
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->

<div align="center">

<div class="menu">

<ul>

<!-- First Main Menu Item -->

<li><a href="/" title="Home">Home</a></li>

<!-- Next Main Menu Item -->

<li><a class="drop" href="/galleries" title="Galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Travel" title="Travel">Travel</a></li>
<li><a href="/Holidays" title="Holidays">Holidays</a></li>
<li><a class="drop" href="/Bianca" title="Bianca Category">Bianca
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="/gallery/2894266" title="Bianca">2007»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/2894266">Biancas's 1 yr. Portraits 2007</a></li>
<li><a href="/gallery/2903936">Bianca's 1 Yr. B-Day Party 2007</a></li>
<li><a href="/gallery/2903680">Bianca's1st Bath Robe 2007</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="/Events" title="Events Category">Events»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/3138416">Sandra's 15 Anos</a></li>
<li><a href="/gallery/3350253">Alexis 15 Anos</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="/%20Anniversary" title="Anniversary Category">Wedding Anniversary»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/2913330">2 Yr. Anniversary 4/15/07</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="/gallery/2908148" title="Please sign our guestbook!">Guestbook</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

</div>
</div>
<!-- End Navbar Code -->

Find More Posts by SteveM << REMOVE THIS

[mmtoruno]

Play with the width. What ever the width is the margin: 0 auto; will center
that width. Too small and the nav will wrap to two lines.

/* style the outer div to give it width */
.menu {
margin: 0 auto;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:400px; /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

Move this from the "head tag" to the top of the "header".

<div id="my_header"><a href="http://torunofamily.smugmug.com"><img src="/img/spacer.gif" border="0" height="70" width="605"></a></div>

Went thru and cleaned up your html a little. It was in pretty good shape,
see the bold for the changes. Also added in the relative links, makes the
code smaller and easier to read. Don't realy need the
http://www.torunofamily.smugmug.com or
http://torunofamily.smugmug.com
in front of each.

Also remove that thing at the end.

<!-- CSS Dropdown Nav Bar -->
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->

<div align="center">

<div class="menu">

<ul>

<!-- First Main Menu Item -->

<li><a href="/" title="Home">Home</a></li>

<!-- Next Main Menu Item -->

<li><a class="drop" href="/galleries" title="Galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Travel" title="Travel">Travel</a></li>
<li><a href="/Holidays" title="Holidays">Holidays</a></li>
<li><a class="drop" href="/Bianca" title="Bianca Category">Bianca
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="/gallery/2894266" title="Bianca">2007»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/2894266">Biancas's 1 yr. Portraits 2007</a></li>
<li><a href="/gallery/2903936">Bianca's 1 Yr. B-Day Party 2007</a></li>
<li><a href="/gallery/2903680">Bianca's1st Bath Robe 2007</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="/Events" title="Events Category">Events»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/3138416">Sandra's 15 Anos</a></li>
<li><a href="/gallery/3350253">Alexis 15 Anos</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="/%20Anniversary" title="Anniversary Category">Wedding Anniversary»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/2913330">2 Yr. Anniversary 4/15/07</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="/gallery/2908148" title="Please sign our guestbook!">Guestbook</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

</div>
</div>
<!-- End Navbar Code -->

Find More Posts by SteveM << REMOVE THIS



Al,

Thank you very much. :bow My Navbar is now centered.

Now all I need is to change the backgroung inside the tabs to match the same color of the background box in my slideshow, how do I that?

[Allen]

Al,

Thank you very much. :bow My Navbar is now centered.

Now all I need is to change the backgroung inside the tabs to match the same color of the background box in my slideshow, how do I that?
Not familar with your CSS but this gets all your colors changed. Works in
Firefox so don't know how IE will look, might need additional changes.

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */


/* CSS Section */

/* style the outer div to give it width */
.menu {
margin: 0 auto;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:400px; /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#fff;
width:100; /* Defines the main box dimensions. */
height:30px; /*How tall your cells are*/
border:1px solid #fff;
border-width:1px 1px 0 0;
background: #444;
padding-left:10px;
line-height:29px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:125px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#444; color: #fff;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#444; color: #ccc;
}
.menu ul ul :hover > a.drop {
background:#444; color: #ccc;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#444; color: #fff;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#444; color: #ccc;
}
.menu ul ul ul :hover > a {
background:#444; color: #ccc;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:125px; /* Size of the daughter cells */
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}


/* position the third level flyout menu */
.menu ul ul ul{
left:125px;
top:0;
width:125px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-125px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#444;
color: #fff;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:125px;
w\idth:129px;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
background:#444;
color: #ccc;
}
.menu :hover > a, .menu ul ul :hover > a {
background:#444;
color: #ccc;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}

/* End Navbar Code */

[caroline]

Hi Allen:wave

I've got the same question, tried following your instructions here and in webdev changed the width to 650 which seems to improve things. Could you take a look please because I recall you had to do some things for IE which I can't check as Im FF and Safari only (mac).

Cheers,
Caroline

[Allen]

Hi Allen:wave

I've got the same question, tried following your instructions here and in webdev changed the width to 650 which seems to improve things. Could you take a look please because I recall you had to do some things for IE which I can't check as Im FF and Safari only (mac).

Cheers,
Caroline
What question are you referring to?:scratch
Have no idea what cha talking about.:D
You have no dropdowns and it looks centered in FF and IE6.

[caroline]

What question are you referring to?:scratch
Have no idea what cha talking about.:D
You have no dropdowns and it looks centered in FF and IE6.

Isn't this thread called centering navbar :wink well if its not thats what i was asking about - http://www.carolineshipsey.co.uk/
Does it really look centered to you ? Looks more to the left to me:scratch
No dropdowns ? 'Mendip' should have dropdowns ? please confirm I have dropdowns:bow:bow I didn't think I had any problem there.

Edit: OK "Drop down Navbar -Help centering it" oops

[Allen]

Isn't this thread called centering navbar :wink well if its not thats what i was asking about - http://www.carolineshipsey.co.uk/
Does it really look centered to you ? Looks more to the left to me:scratch
No dropdowns ? 'Mendip' should have dropdowns ? please confirm I have dropdowns:bow:bow I didn't think I had any problem there.

Edit: OK "Drop down Navbar -Help centering it" oops
:roflI looked at your personal site. Will now lookie a public one.

[Allen]

Isn't this thread called centering navbar :wink well if its not thats what i was asking about - http://www.carolineshipsey.co.uk/
Does it really look centered to you ? Looks more to the left to me:scratch
No dropdowns ? 'Mendip' should have dropdowns ? please confirm I have dropdowns:bow:bow I didn't think I had any problem there.

Edit: OK "Drop down Navbar -Help centering it" oops
Boy, you had me going there for a while. Nothing would change, then I
remembered you where working with a theme customization. YOU HAVE
TWO SETS OF NAV CSS!!.:D The one in the theme is overriding your user
CSS. So make this change to both of them, esp. the one in the theme.

#navcontainer {
position: relative;
display: block;
z-index: 99;
padding: 0px 0px 10px 0px;
height: 20px;
width: 630px;
_width: 630px;
margin: 0 auto;
}

Looks like the same number works for IE6 and FF so you can delete the _width.

[caroline]

Boy, you had me going there for a while. Nothing would change, then I
remembered you where working with a theme customization. YOU HAVE
TWO SETS OF NAV CSS!!.:D The one in the theme is overriding your user
CSS. So make this change to both of them, esp. the one in the theme.

#navcontainer {
position: relative;
display: block;
z-index: 99;
padding: 0px 0px 10px 0px;
height: 20px;
width: 630px;
_width: 630px;
margin: 0 auto;
}

Looks like the same number works for IE6 and FF so you can delete the _width.

Thanks Allen :))

Caroline (who would like life to be simple)