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 8 of 8
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question nav help - positioning?

    hi, on my site: http://vila.slicedcreative.co.uk/ I am trying to sort out my menu navigation, as you can see, it's not looking as it should, can someone please help?

    thanks

    Code:
    <div id="hd">
        		<img src="/images/logo.png" border="0" alt="Vila Fula Logo" align="left" />
        		<div class="navbar">
        		<img src="/images/left_side_nav.png" border="0" alt="left side nav" align="left" />
        		<ul>
        			<li><a href="#">Vila Fulmar</a></li>
        			<li><a href="#">Vila Fulmar</a></li>
        			<li><a href="#">Vila Fulmar</a></li>
        			<li><a href="#">Vila Fulmar</a></li>
        			<li><a href="#">Vila Fulmar</a></li>
        			<li><a href="#">Vila Fulmar</a></li>
        		</ul>
        		<img src="/images/right_side_nav.png" border="0" alt="right side nav" align="left" />
        		</div>
        	</div>
    css
    Code:
    body{
    	background-color: #1e70b5;
    	font-family:Arial,Verdana,Sans-serif;
    }
    h1{
    	color: #7f7f78;
    	font-size: 18px;
    	text-indent: -600px;
    	overflow: hidden;
    }
    h2{
    	color: #264a81;
    	font-size: 14px;
    }
    h3{
    	color: #7f7f78;
    	font-size: 13px;
    }
    p{
    	color: #7f7f78;
    	font-size: 12px;
    }
    ul {
    	list-style-type: none;
    	vertical-align: middle;
    	
    }
    li{
    	background-image: url(/images/1px_nav.png);
    	background-repeat: repeat-x;
    	display:inline;
    	float: left;
    	padding-right: 20px;
    	height: 71px;
    	
    }
    
    .yui-g{
    	padding-left: 40px;
    	padding-right: 30px;
    }
    .yui-u{
    	width:220px;	
    	float:right;
    	
    }
    
    .first{
    	width:612px;
    	float:left;
    
    }
    
    #wrapper {
    	margin:0 auto;
    	width:956px;
    	position:relative;
    }
    .navbar {
    	width:690px;
    	height:71px;
    	position: absolute; 
    	top:50px;
    	right:18px;
    }
    .firstbutton{
    	background-image: url(/images/left_side_nav.png);
    	background-position: left;
    }
    #hd {
    	line-height: 0px;
    }
    #bd {
    
    	background-image: url(/images/1px_mid.png);
    	background-repeat: repeat-y;
    	height:994px;
    	
    }
    #ft {
    	line-height: 0em;
    	color: #fff;
    	font-size: 10px;
    }

  • #2
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    please help

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning jarv,
    There is a jog there because your corner images do not line up with the 1px_nav.png. Your code shows the jog on the right side of the nav menu.

    In this code below, instead of changing the images, I just adjusted the li with a negative margin.
    give this a try -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 956px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #hd {
    	line-height: 0px;
    }
    	#logo {
    		width: 200px;
    		height: 134px;
    		float: left;
    	}
    #navbar {
    	width:690px;
    	height:71px;
    	float: right;
    	margin: 50px 0 0 0;
    }
    	.nav_end {
    		width: 30px;
    		height: 71px;
    		float: left;
    	}
    		ul#menu {
    			height: 71px;
    			float: left;
    			margin: -3px 0 0 0;
    			list-style-type: none;
    		}
    		#menu li {
    			height: 71px;
    			float: left;
    			background: url(1px_nav.png) repeat-x;
    		}
    		#menu a {
    			height: 71px;
    			padding: 0 10px 0;
    			line-height: 67px;
    		}
    		#menu a:hover {
    			color: #fff;
    		}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="hd">
                <img src="logo.png" alt="Vila Fula Logo" id="logo" />
                    <div id="navbar">
                        <img src="left_side_nav.png" alt="left side nav" class="nav_end" />
                            <ul id="menu">
                                <li><a href="#">Vila Fulmar</a></li>
                                <li><a href="#">Vila Fulmar</a></li>
                                <li><a href="#">Vila Fulmar</a></li>
                                <li><a href="#">Vila Fulmar</a></li>
                                <li><a href="#">Vila Fulmar</a></li>
                                <li><a href="#">Vila Fulmar</a></li>
                            </ul>
                        <img src="right_side_nav.png" alt="right side nav" class="nav_end" />
                    <!--end navbar--></div>
            </div>
        <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 10-23-2009 at 03:18 PM.
    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

  • #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    thanks!

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    just one thing... I added a hover background image and it's all messed up again?!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your hover image (41px high) is not the same height as your 1px_nav.png (71px high).
    You might want to do some work on your images, it would help if the hover image that replaces the background of a button was the same size as the image it's replacing.

    Try making these changes to your CSS.
    There is some conflicting CSS that needs deleted (highlighted in red) and a different approach for your buttons (highlighted in yellow)
    Code:
    html {
    	background-color: #1e70b5;
    }
    body{
    	background-color: #1e70b5;
    	font-family:Arial,Verdana,Sans-serif;
    }
    h1{
    	color: #7f7f78;
    	font-size: 18px;
    	text-indent: -600px;
    	overflow: hidden;
    }
    h2{
    	color: #264a81;
    	font-size: 14px;
    }
    h3{
    	color: #7f7f78;
    	font-size: 13px;
    }
    p{
    	color: #7f7f78;
    	font-size: 12px;
    }
    /*
    ul  a{
    	vertical-align: middle;
    }
    li{
    	background-image: url(/images/1px_nav.png);
    	background-repeat: repeat-x;
    	display:inline;
    	float: left;
    	padding-right: 20px;
    	height: 71px;
    	
    }
    
    li a{
    	vertical-align: middle;
    	
    }*/
    /** CLASSES **/
    .yui-g{
    	background-image: url(/images/1px_mid.png);
    	background-repeat: repeat-y;
    	padding-left:69px;
    	padding-right: 37px;
    }
    .yui-u{
    	width:224px;	
    	float:right;
    }
    
    .first{
    	width:594px;
    	float:left;
    	margin-top: 330px;
    }
    .navbar {
    	width:690px;
    	height:71px;
    	position: absolute; 
    	top:50px;
    	right:18px;
    }
    .firstbutton{
    	background-image: url(/images/left_side_nav.png);
    	background-position: left;
    }
    .sideimage1 {
    	background-image: url(/images/button_sprite.jpg);
    	background-position: 0px 0px;
    	width:224px;
    	height:100px;
    }
    .sideimage2 {
    	background-image: url(/images/button_sprite.jpg);
    	background-position: -224px 0px;
    	width:224px;
    	height:100px;
    }
    .sideimage3 {
    	background-image: url(/images/button_sprite.jpg);
    	background-position: -448px 0px;
    	width:224px;
    	height:100px;
    }
    .toptext {
    	padding-right: 40px;
    	margin-top: 16px;
    }
    /** END CLASSES **/
    
    /** IDs **/
    #doc {
    	width:956px;
    }
    
    #hd {
    	line-height: 0px;
    	height:134px;
    	position:relative;
    }
    #bd {
    	line-height: 0px;
    	background-image: url(/images/top_page_03.png);
    	background-repeat: no-repeat;
    	min-height: 400px;
    }
    #ft {
    	background-image: url(/images/bottom.png);	
    	background-repeat: no-repeat;
    	width:896px;
    	height:9px;
    	line-height: 0em;
    	color: #fff;
    	font-size: 10px;
    	padding-left: 38px;
    	padding-top: 30px;
    }
    #ft .textonright {
    	float:right;
    	padding-right:18px;
    }
    /** END IDs **/
    
    /** Menu **/
    #navbar {
    	width:746px;
    	height:71px;
    float: right;
    }
    .nav_end {
    	width: 30px;
    	height: 71px;
    	float: left;
    }
    ul#menu {
    	height: 71px;
    	float: left;
    	margin: -3px 0 0 0;
    	list-style-type: none;
    }
    #menu li {
    	height: 71px;
    	float: left;
    }
    #menu a:link,
    #menu a:visited,
    #menu a:active {
    	height: 71px;
    	padding: 0 15px 0;
    display: block;
    	background: url(/images/1px_nav.png) repeat-x;
    	line-height: 67px;
    	font-weight: bold;
    	font-size: 13px;
    	color: #264a81;
    	text-decoration: none;
    }
    #menu a:hover {
    margin: 15px 0 0;
    line-height: 40px;
    	background: url(/images/1px_nav_on.jpg) repeat-x;
    } 
    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:

    jarv (10-27-2009)

  • #7
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question

    Just one more thing, I need to add a 37x2 divider after each LI?!
    I put one in my code:

    Code:
    <ul id="menu">
                                <li><a href="#" title="Vila Fulmar">Vila Fulmar</a><img src="/images/nav_divider.jpg" alt="nav divider" /></li>
                                <li><a href="#" title="The Area">The Area</a></li>
                                <li><a href="#" title="The Property">The Property</a></li>
                                <li><a href="#" title="Gallery">Gallery</a></li>
                                <li><a href="#" title="Contact Us">Contact Us</a></li>
                                <li><a href="#" title="Availability & Prices">Availability & Prices</a></li>
                            </ul>
    but it fell out of place?!

    http://vila.slicedcreative.co.uk/

  • #8
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    sorted!


  •  

    Posting Permissions

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