jack_o_lantern
03-12-2006, 10:26 PM
Hi,
I'm trying to use the float property to lay out the navigation bar of a site. I've inserted some images that float left and are inline with each other. I've also inserted an image for a logo and floated it right.
Now, I'm trying to place a ul beneath my logo, and line it up on the right side. I'd thought that floating it right would be the way to go, but when I do that it ends up below div class 'banner'.
Is my problem in the order I've placed my elements in html, or is it how I'm trying to apply float? I've reread the section in Wium and Lie's 'Cascading Style Sheets' on float and clear, but I'm still trying to wrap my head around it.
Thanks for any help you can give me.
Here's my stylesheet:
/*
Body - provides underlying color (light yellow),default font color (black), font style and some margins
*/
body {
background-color: #FEF4DE;
color: #000000;
margin: 0em
}
/*
Links - hyperlink color values
*/
a:link a:hover {
color: #990033}
a:visited {
color: #336600}
/*
Area 1 - Banner
*/
div.banner {
background-color: #c0c0c0;
color: #000000;
font: .9em "arial narrow", sans-serif;
width: 100%;
padding: 0em;
border-bottom: .2em solid black
}
img.leftbanner {
float: left
margin: 0em;
border: .1em solid black;
width: 123px;
height: 92px
}
img.logo {
float: right;
margin: 1em 1.5em
}
ul.bannernav {
margin: 1em 1.5em;
list-style-type: none;
}
li.bannernav {
display: inline
}
/*
Area 2 - Sidebar
*/
div.sidebarlinks {
background-color: #c0c0c0;
float: left;
min-height: 100%;
padding: 2em 2em;
border-right: .2em solid black
}
UL.sidebarlinks {
width: 25%;
float: left;
font: 1em sans-serif;
text-transform: uppercase;
line-height: 1.2em;
list-style: none;
margin-top: 0.5em;
margin-bottom: 0.5em
}
p {
font-family: sans-serif;
font: 11pt arial;
}
Here's my html:
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="djstyles.css">
</head>
<body>
<div class="banner">
<img class="logo" src="images/DJLogo.jpg" alt="Dunbar/Jones (PLC)">
<img class="leftbanner" src="images/SustPage/MWAPrairie.jpg" alt="Picture of MWA Prairie">
<img class="leftbanner" src="images/Workshop/FacilitationSmallWeb.jpg"
alt="Picture of Facilitation Workshop">
<img class="leftbanner" src="images/Workshop/OsborneWkshp3Web.jpg"
alt="Picture from Osborne Workshop">
<img class="leftbanner"
src="images/General%20Graphic/View%20South%20over%20pond%20slide%20Web1.jpg"
alt="Picture of South Pond">
<ul class="bannernav">
<li class="bannernav">Home |</li>
<li class="bannernav">About Us |</li>
<li class="bannernav">Services |</li>
<li class="bannernav">Clients |</li>
<li class="bannernav">Public Participation |</li>
<li class="bannernav">News</li>
<ul>
</div>
<div class="sidebarlinks">
<p>Some text</p>
</div>
<p>Other text</p>
</body>
</html>
I'm trying to use the float property to lay out the navigation bar of a site. I've inserted some images that float left and are inline with each other. I've also inserted an image for a logo and floated it right.
Now, I'm trying to place a ul beneath my logo, and line it up on the right side. I'd thought that floating it right would be the way to go, but when I do that it ends up below div class 'banner'.
Is my problem in the order I've placed my elements in html, or is it how I'm trying to apply float? I've reread the section in Wium and Lie's 'Cascading Style Sheets' on float and clear, but I'm still trying to wrap my head around it.
Thanks for any help you can give me.
Here's my stylesheet:
/*
Body - provides underlying color (light yellow),default font color (black), font style and some margins
*/
body {
background-color: #FEF4DE;
color: #000000;
margin: 0em
}
/*
Links - hyperlink color values
*/
a:link a:hover {
color: #990033}
a:visited {
color: #336600}
/*
Area 1 - Banner
*/
div.banner {
background-color: #c0c0c0;
color: #000000;
font: .9em "arial narrow", sans-serif;
width: 100%;
padding: 0em;
border-bottom: .2em solid black
}
img.leftbanner {
float: left
margin: 0em;
border: .1em solid black;
width: 123px;
height: 92px
}
img.logo {
float: right;
margin: 1em 1.5em
}
ul.bannernav {
margin: 1em 1.5em;
list-style-type: none;
}
li.bannernav {
display: inline
}
/*
Area 2 - Sidebar
*/
div.sidebarlinks {
background-color: #c0c0c0;
float: left;
min-height: 100%;
padding: 2em 2em;
border-right: .2em solid black
}
UL.sidebarlinks {
width: 25%;
float: left;
font: 1em sans-serif;
text-transform: uppercase;
line-height: 1.2em;
list-style: none;
margin-top: 0.5em;
margin-bottom: 0.5em
}
p {
font-family: sans-serif;
font: 11pt arial;
}
Here's my html:
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="djstyles.css">
</head>
<body>
<div class="banner">
<img class="logo" src="images/DJLogo.jpg" alt="Dunbar/Jones (PLC)">
<img class="leftbanner" src="images/SustPage/MWAPrairie.jpg" alt="Picture of MWA Prairie">
<img class="leftbanner" src="images/Workshop/FacilitationSmallWeb.jpg"
alt="Picture of Facilitation Workshop">
<img class="leftbanner" src="images/Workshop/OsborneWkshp3Web.jpg"
alt="Picture from Osborne Workshop">
<img class="leftbanner"
src="images/General%20Graphic/View%20South%20over%20pond%20slide%20Web1.jpg"
alt="Picture of South Pond">
<ul class="bannernav">
<li class="bannernav">Home |</li>
<li class="bannernav">About Us |</li>
<li class="bannernav">Services |</li>
<li class="bannernav">Clients |</li>
<li class="bannernav">Public Participation |</li>
<li class="bannernav">News</li>
<ul>
</div>
<div class="sidebarlinks">
<p>Some text</p>
</div>
<p>Other text</p>
</body>
</html>