logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 06-27-2013, 10:37 PM   #1
windspeed
 
Join Date: Sep 2008
Posts: 6
Default Positioning problem with Nav bar

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
windspeed is offline   Reply With Quote
Old 06-28-2013, 02:35 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

you mean like this?
Code:
<!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>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 06-30-2013, 11:39 AM   #3
windspeed
 
Join Date: Sep 2008
Posts: 6
Default

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
windspeed is offline   Reply With Quote
Old 07-01-2013, 01:12 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

i just added the header class to your footer id
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 07-02-2013, 12:20 AM   #5
windspeed
 
Join Date: Sep 2008
Posts: 6
Default

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.
windspeed is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:50 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com