Can you give me help on how to code this nav please

 

 

thanks

 

Robbie

Well the HTML would be...

 

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Free Sports Bets</a></li>
   <li><a href="#">Free Casino</a></li>
   <li><a href="#">Free Poker</a></li>
   <li><a href="#">Free Games</a></li>
   <li><a href="#">Free Bingo</a></li>
   <li><a href="#">Free Casino</a></li>
   <li><a href="#">Visit The Village Forum <span>Opens in a new window</span></a></li>
</ul>

 

Then style that skeleton.

thanks mike

do you have any tips for the css as that is what i am struggling with nothing seems to work i need to get 5px of padding on the left but it will not budge.

do you have any tips for the css as that is what i am struggling with nothing seems to work i need to get 5px of padding on the left but it will not budge.

 

What are you applying the padding to?

do you have any tips for the css as that is what i am struggling with nothing seems to work i need to get 5px of padding on the left but it will not budge.

 

Try this to get you started...

 

ul {
list-style-type: none;
}
li {
float: left;
padding: 10px;
}

What are you applying the padding to?

 

i am trying to move the background to the right 5px.

Ok this might help (i should be working though lol)

 

<!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">
ul {
list-style-type: none;
}
li {
float: left;
background-image: url(bg.jpg);
padding-top: 18px;
padding-right: 10px;
padding-bottom: 18px;
padding-left: 10px;
text-transform: uppercase;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #0b4372;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #2878bf;
}
a {
color: #FFF;
text-decoration: none;
}
</style>
</head>

<body>
<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Free Sports Bets</a></li>
   <li><a href="#">Free Casino</a></li>
   <li><a href="#">Free Poker</a></li>
<li><a href="#">Free Games</a></li>
   <li><a href="#">Free Bingo</a></li>
   <li><a href="#">Free Casino</a></li>
</ul>
</body>
</html>

 

... using this image...

 

 

Hopefully this'll get you on your way as i've got lots of work to do!

thanks mike for taking the time out to help me out. I'll try what you have said but here is what i have done myself and what i get.

 

 

Using this HTML

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>

<link rel="stylesheet" type="text/css" href="main.css"/>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div id="content">

<div id="header">

<img src="images/header.jpg" width="999" height="252" alt="the free betting village header" />

</div>

<div id="navigation">

<ul>

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

<li><a href="#">Free Sports Bets</a></li>

<li><a href="#">Free Casino</a></li>

<li><a href="#">Free Poker</a></li>

<li><a href="#">Free Games</a></li>

<li><a href="#">Free Bingo</a></li>

</ul>

</div>

 

<div id="content_left"></div>

<div id="content_middle"></div>

<div id="content_right"></div>

<div id="footer"></div>

</div>

</body>

</html>

 

 

And this CSS :

 

@charset "utf-8";

/* CSS Document */

 

body {

background-image:url(images/main_bg.jpg);

background-repeat: repeat-x;

background-color: #abaacb;

font-family: Arial, Helvetica, sans-serif;

margin: 0px 0px 0px 0px;

}

 

#content {

margin-top: 0px;

margin: 0 auto;

width: 1010px;

height: auto;

background-color: #bfbfd7;

}

 

#header {

padding: 5px 0px 0px 5px;

}

 

#navigation {

background:url(images/nav_bg.jpg);

background-repeat: no-repeat;

background-position: center;

margin: 0px;

padding: 5px 0px 0px 7px;

width: 1000px;

height: 52px;

}

 

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

 

#navigation ul li {

display: inline;

margin: 0px;

}

 

#navigation ul li a {

height:33px;

display: block;

float: left;

padding: 16px 26px 0 26px;

font: bold 14px Arial;

color: #FFF;

text-decoration: none;

background: url(images/nav_seperator.jpg) no-repeat right center;

}

 

#navigation ul li a:hover {

color:#363636;

background: url(images/navigation-hover.png) repeat-x left top;

}

 

#navigation ul li#active a {

color:#363636;

background: repeat-x left top;

}

 

Thanks for your help but i am really struggling and i have no clue how to make it look better.

I want to be able to do it and its do my head in.

I understand you guys are all busy and can't thank you enough for your help.

 

Thanks

Edited May 31, 201115 yr by RobbieD90