...

View Full Version : nav help - positioning?



jarv
10-23-2009, 01:45 PM
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



<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



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;
}

jarv
10-23-2009, 02:55 PM
please help

Excavator
10-23-2009, 04:11 PM
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 -
<!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>

jarv
10-23-2009, 04:54 PM
thanks! :thumbsup:

jarv
10-23-2009, 05:36 PM
just one thing... I added a hover background image and it's all messed up again?!

Excavator
10-23-2009, 06:32 PM
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)
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;
}

jarv
10-27-2009, 11:46 AM
Just one more thing, I need to add a 37x2 divider after each LI?!
I put one in my 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/

jarv
10-27-2009, 01:03 PM
sorted!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum