PDA

View Full Version : Positioning problem with Nav bar


windspeed
06-27-2013, 11:37 PM
Hello,
I'm trying to create a Box (#nav) around my menu list at the bottom of my page (as a smaller version of the #header white box at the top) and I can't get to position correctly....well, can't get it to do anything really!
I've posted the page below and placed the css code into the head. (I've made the #nav Pink so you can that it's way out. It positions itself underneath the #header instead of at the bottom of the page and doesn't even encompass the menu list. )
I've spent days trying to fix this but to no avail, am I even working on the right track? Thanks C

http://www.windspeedkites.com.au/testindex.html

edbr
06-28-2013, 03:35 AM
you mean like this?
<!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" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<title>Windspeed Kites</title>
<link rel="stylesheet" href="index.css" media="screen" />
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image:url(images/bgstrip.jpg);
background-repeat:repeat-x;
}

.wrapper {
margin: 10px auto;
width: 820px;
height:580px;
background-color:none;
border-style:solid;
border-width:5px;
border-color:#007dc3;
border-radius:20px;
box-shadow: 5px 5px 5px #fff;
}

.header {
margin: 5px auto;
width: 780px;
background-color: #fff;
border-radius:20px;
box-shadow: 5px 5px 5px #666;
}

#logo {
width: 300px;
height: 120px;
text-align:center;
float: none;
margin: 5px auto;
}

#leftcolumn {
color: #72858c;
border-style:solid;
border-width: 6px 4px 2px 4px;
border-color: #FFFFFF;
border-radius:12px;
background: #007dc3;
margin: 2px 6px 2px 4px;
padding: 2px;
height: 160px;
width: 250px;
float: left;
}

#middlecolumn {
color: #72858c;
border-style:solid;
border-width: 6px 4px 2px 4px;
border-color: #FFFFFF;
border-radius:12px;
background: #007dc3;
margin: 2px 6px 2px 4px;
padding: 2px;
height: 160px;
width: 250px;
float: left;
}
#rightcolumn {
color: #72858c;
border-style:solid;
border-width: 6px 4px 2px 4px;
border-color: #FFFFFF;
border-radius:12px;
background: #007dc3;
margin: 2px 4px 2px 4px;
padding: 2px;
height: 160px;
width: 250px;
float: left;
}

#column1 {
color: #72858c;
border-style:solid;
border-width: 8px 2px 2px 2px;
border-color: #FFFFFF;
border-radius:8px;
background: #0179ca;
margin: 2px 12px 2px 4px;
padding: 2px;
height: 130px;
width: 180px;
float: left;
}

#column2 {
color: #72858c;
border-style:solid;
border-width: 8px 2px 2px 2px;
border-color: #FFFFFF;
border-radius:8px;
background: #0179ca;
margin: 2px 13px 2px 4px;
padding: 2px;
height: 130px;
width: 180px;
float: left;
}
#column3 {
color: #72858c;
border-style:solid;
border-width: 8px 2px 2px 2px;
border-color: #FFFFFF;
border-radius:8px;
background: #0179ca;
margin: 2px 13px 2px 4px;
padding: 2px;
height: 130px;
width: 182px;
float: left;
}

#column4 {
color: #72858c;
border-style:solid;
border-width: 8px 2px 2px 2px;
border-color: #FFFFFF;
border-radius:8px;
background: #0179ca;
margin: 2px 3px 2px 4px;
padding: 2px;
height: 130px;
width: 182px;
float: left;
}

h1 {
color:#333;
margin:0;
padding:2px;
text-align:center;
font-weight:bold;
font-style:italic;
font-size:24pt;
}

h2 {
color:#fff;
margin:0;
text-align:center;
font-weight:bold;
font-style:italic;
font-size:16pt;
}

h3 {
color:#333;
margin:0;
padding:2px;
text-align:center;
font-weight:normal;
font-style:italic;
font-size:12pt;
}

p {
color:#fff;
padding:0px;
text-align:center;
font-size:10pt;
font-style:italic;
font-weight:normal;
}

#nav {
margin: 5px auto;
width: 780px;
background-color:#ff33cc;
border-style:solid;
border-width: 2px 2px 2px 2px;
border-color: #FF33CC;
border-radius:8px;
}

#nav li {
list-style:none;
margin:0;
padding:0;
display:inline;
}

#nav li a {
color:#666;
font-weight:bold;
font-size:11pt;
text-decoration:none;
padding:0 10px 4px 10px;
display:block;
margin:0;
line-height:25px;
overflow:hidden;
float:right;
}

#nav li a:hover {
background:#b3d9cc;
}


#footer {
border:2px solid #fff;
border-radius:5px;
background-color:#0179ca;
color:#333;
margin:5px ;
padding:1px;
text-align:center;
font-size:10pt;
}

a {
color:#fff;
}

a:hover {
color:#F9502D;
background:#F4FBD2;
}

#photos {
position:relative;
width:370px;
margin:0 auto 0 auto;
}

.imgbox1 {
position:relative;
padding:0px;
border:1px solid #000;
margin:1px 2px -15px 1px;
width:248px;
height:84px;
float:center;
}

.imgbox2 {
position:relative;
padding:0px;
border:1px solid #000;
margin:1px 2px -15px 1px;
width:178px;
height:60px;
float:center;
}
-->
</style>
</head>
<body>

<!-- Begin Wrapper -->
<div class="wrapper">
<div class="header">
<div id="logo"><img name="logo" src="images/test.png" width="300" height="120" alt="logo"/></div>
<h1>Windspeed - Kites, Sports Gear & Outdoor Toys</h1>
<h3>Windspeed, with over 25 years as Australia's premier Kite wholesaler,
now suppy a wide range of <br/>
Backyard Games, Outdoor Toys and Sports Gear to good Toy, Hobby and Sports stores.</h3>
</div>
<div id="leftcolumn">
<h2>Kites</h2>
<div class="imgbox1">

</div>
<p>Windspeed Kites - Australian Made <br/>
Ocean Breeze Kites - Imported</p>
</div>
<div id="middlecolumn">
<h2>Retailer Access</h2>
<div class="imgbox1">
<img name="retailers" src="images/IndexCollageKites.jpg" width="250" height="84" alt="retailers image" />
</div>
<p>See all of our products in one page <br/>
Kites - Games - Sports - Toys </p>
</div>
<div id="rightcolumn">
<h2>Backyard Games</h2>
<div class="imgbox1">
</div>
<p>like Quoits, Hookey, Bocce, Tennis, <br/>
Skip Ropes, Pogo Sticks n' Mowers</p>
</div>
<div id="column1">
<h2>Skate n' Scoot</h2>
<div class="imgbox2"> </div>
<p>Skateboards, Scooters<br/>
and Accessories</p>
</div>
<div id="column2">
<h2>Roller Skates</h2>
<div class="imgbox2"> </div>
<p>Roller Skates, Inline Skates<br/>
Blades and Accessories</p>
</div>
<div id="column3">
<h2>Sports Gear</h2>
<div class="imgbox2"> </div>
<p>Darts, Basketball, Netball <br/>
Table Tennis n' Billards</p>
</div>
<div id="column4">
<h2>Water n' Wheels</h2>
<div class="imgbox2"> </div>
<p>Body boards, Sunglasses<br />
Trikes, Karts & Push-a-Longs</p>
</div>

<!-- Begin Navigation -->
<div id="nav" class="header">
<li><a href="contactus.html">contact</a></li>
<li><a href="aboutus.html">about us</a></li>
<li><a href="wheels.html">wheels</a></li>
<li><a href="water.html">water</a></li>
<li><a href="sport.html">sport</a></li>
<li><a href="skate.html">skate</a></li>
<li><a href="backyardgames.html">backyard games</a></li>
<li><a href="kites.html">kites</a></li>
<li><a href="retailers.html">shops access</a></li>
<li><a href="index.html">home</a></li>
</div>
<!-- End Navigation -->

</div>

</body>
</html>

windspeed
06-30-2013, 12:39 PM
Perfect! Works like a treat. I'm not sure why but I'll spend some time understanding that over the next few days. Thankyou very much. C

edbr
07-01-2013, 02:12 AM
i just added the header class to your footer id

windspeed
07-02-2013, 01:20 AM
Yes, I say that but I always thought you could use EITHER one of the other. I've spent last night searching and can see now how the two can work in unison (still don't understand why but I don't understand much about internal combustion either but that doesn't stop me using my car I guess.)
Thanks again....I now have another box in my css quiver.