Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    70
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Arrow Center Nav-wrapper

    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

    Code:
    #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

    Best regards Samz3n

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Samz3n (02-11-2012)

  • #3
    New Coder
    Join Date
    Apr 2010
    Posts
    70
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try making these changes highlighted in red.
    markup:
    Code:
    		
    	<!-- 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
    Code:
    /* --------------------------- */
    /*        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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Samz3n (02-11-2012)

  • #5
    New Coder
    Join Date
    Apr 2010
    Posts
    70
    Thanks
    30
    Thanked 0 Times in 0 Posts
    That worked for me!
    Thank you very much !!

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •