...

View Full Version : Center Nav-wrapper



Samz3n
02-11-2012, 09:19 PM
Hello there :)

I am trying to move the Navigation Menu to center, beneath the big header.

The site:
http://www.piya.dk/2012

Here is the code for the whole navigation



#nav-wrapper {
margin-top: 596px;
float: right;
}

ul#nav {
float: right;
margin-top: 24px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

ul#nav,
ul#nav ul {
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:18px;
z-index: 600;
}

ul#nav ul {
margin-top: 0;
}

ul#nav a {
display:block;
height: 20px;
padding: 10px 18px;
color:#bbb;
text-decoration:none;
border-bottom: none;
font-size: 16px;
text-shadow: 0px 1px 0 rgba(0,0,0,1);
text-transform: uppercase;
background: url(images/subnav-bg.png);
}

ul#nav a:hover {
color:#fff;

}

ul#nav li.home-page {
background: url(images/subnav-bg.png);
padding-left: 8px;
}

ul#nav li {
float:left;
position:relative;
padding: 0;
}

ul#nav ul {
position:absolute;
width:200px;
padding:0;
display:none;
background: url(images/subnav-bg.png);
}

ul#nav li ul a {
width:180px;
float:left;
padding: 9px 0 10px 15px;
background: none;
}

ul#nav ul ul {
top:auto;
}

ul#nav li ul ul {
left:195px;
margin:0;
}

ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li:hover ul ul ul ul {
display:none;
}
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li li li li:hover ul {
display:block;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
}

ul#nav ul li,
ul#nav ul ul li,
ul#nav ul ul ul li {
border-left: 5px solid transparent;
-webkit-transition: border-color .1s ease-in;
-moz-transition: border-color .1s ease-in;
-o-transition: border-color .1s ease-in;
transition: border-color .1s ease-in;
}

ul#nav ul li:hover,
ul#nav ul ul li:hover,
ul#nav ul ul ul li:hover {
background: url(images/top-bg.png);
border-left: 5px solid #D10A0A;
}

ul#nav li.first-child {
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
}

ul#nav li.last-child a {
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}

I hope you can help me guys :thumbsup:

Best regards Samz3n

Excavator
02-11-2012, 09:37 PM
Hello Samz3n,
You should place that ul#nav after #header-wrapper is closed, instead of that huge top margin pushing it 596px below it's 100px tall containing #top.

Once you do that, centering it is easy.
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

Samz3n
02-11-2012, 09:52 PM
Here you can find the whole css code:

http://www.piya.dk/2012/style.txt

I moved the navigation after all the different home-sliders etc.

I tried with text-align: center;
- but didn't work

Would you mind, take a look? :(
Thanks a lot for your help.

Excavator
02-11-2012, 10:00 PM
Try making these changes highlighted in red.
markup:


<!-- BEGIN #header-wrapper -->
<div id="header-wrapper">

<!-- BEGIN #header-static -->
<div id="header-static">

<!-- BEGIN #top -->
<div id="top">

<!-- BEGIN #top-inner -->
<div id="top-inner">

<!-- BEGIN #logo -->
<div id="logo">
<a href="http://piya.dk/2012/">
<img src="http://piya.dk/2012/wp-content/uploads/2012/01/blank.png" alt="logo">
</a>
</div>
<!-- END #logo -->

<!-- BEGIN #nav-wrapper -->
<div id="nav-wrapper">delete me</div>
<!-- END ul#nav-wrapper -->

</div>
<!-- END #top-inner -->

</div>
<!-- END #top -->

</div>
<!-- END #header-static -->

</div>
<!-- END #header-wrapper -->
<ul id="nav" class=""><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-20 first-child"><a href="http://piya.dk/2012/">Piya</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://piya.dk/2012/?page_id=12">Biografi</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://piya.dk/2012/?page_id=28">Galleri</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://piya.dk/2012/?page_id=26">Video</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://piya.dk/2012/?page_id=24">Musik</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18 last-child"><a href="http://piya.dk/2012/?page_id=14">Kontakt</a></li>
</ul>

<div class="lines-bg">

<!-- BEGIN #content -->
<div id="content" class="container_24">

<!-- BEGIN .columns -->
<div class="columns">


CSS


/* --------------------------- */
/* NAVIGATION
/* --------------------------- */

#nav-wrapper {
float: right;
}

ul#nav {
width: 417px;
margin: 24px auto 0;
/*float: right;
margin-top: 24px;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

ul#nav,
ul#nav ul {
list-style-type:none;
list-style-position:o

Samz3n
02-11-2012, 10:20 PM
That worked for me!
Thank you very much !! :thumbsup:

I needed to change the width to 421px instead of 417px ..
With 417px the "Kontakt" moved down under the rest of the menu ..

But at least it works now :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum