Alright everyone, my css and HTML document code is listed below. Basically
what I am trying to do is "float" the header image over top of the rest of
the page. I wanted to make the header image overlap the main content area
as well as the left side nav bar. Also like I mentioned before, the layout
looks great (and correct) in all of the browsers except Internet Explorer.
As last time - any help would be greatly appreciated. I am new to designing
with css and am trying to learn how to do things by the standards.
Thanks,
Matthew Stoneback
Css code below:
#header {
position: absolute;
top: 25px;
left: 50px;
}
#header img {
border-style: solid;
border-color: #000000;
border-width: 1px;
}
#completepage {
position: relative;
width: 800px;
background-color: #cccccc;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-left: auto;
margin-right: auto;
}
#sidebar {
width: 200px;
float: left;
color: #ffffff;
background-image: url(../images/sidebar.gif);
background-repeat: repeat-y;
}
#sidebar div {
padding-top: 150px;
padding-right: 20px;
padding-left: 20px;
}
#main {
width: 600px;
float: left;
}
#main div {
padding-left: 15px;
padding-right: 15px;
}
#navigation {
padding-top: 150px;
}
p.navbar {
border-style: dashed;
border-color: #000000;
border-width: 1px;
padding: 5px;
text-align: center;
font-size: 1.3em;
}
#content {
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
/* backslash hack hides from IE mac\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end backslash hack */
#footer {
width: 600px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
HTML code below:
<!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"; lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style/tams.css"
/>
<title>:: Tam's German Shepherds :: Home ::</title>
</head>
<body>
<div id="completepage" class="clearfix">
<div id="header"> <img src="images/tamsheader.gif" alt="Tam’s German
Shepherds" />
</div><!--div around header image-->
<div id="sidebar">
<div>
<!--div used for padding-->
<p> Color Test | This is a test to see how to line up the left hand
side
secondary navigation bar. This horizontal bar should run the entire
length
of the page, outline in a small border. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
sed
leo sed lacus luctus egestas. Suspendisse potenti. Morbi enim. Morbi
id
diam. Praesent tempor tellus ac diam. Nullam cursus. Vestibulum
volutpat
hendrerit ipsum. Integer bibendum libero et lectus. Etiam congue,
turpis
sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis
porta
mauris. </p>
<p> Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat.
Suspendisse
bibendum. Fusce ac sapien. Donec ac turpis. Nulla magna velit,
sagittis
at, vestibulum sit amet, lobortis at, purus. Quisque mattis pretium
justo.
Cras sagittis, quam ut imperdiet congue, nisl ante auctor odio,
vitae
gravida nibh enim quis massa. Nullam urna wisi, blandit quis,
porttitor
pharetra, dignissim nec, mauris. Curabitur posuere mattis ipsum.
Nunc
in metus aliquam felis bibendum tincidunt. </p>
<p> Nullam tincidunt volutpat orci. Morbi scelerisque. Aliquam vitae
neque
eget urna consectetuer suscipit. Nullam luctus augue quis est. </p>
<p> Donec mollis, sapien non tempus semper, nulla diam sagittis magna,
sed
sodales ligula dui eu wisi. Cras at erat nec quam pharetra sagittis.
Pellentesque
lacinia nonummy mi. Morbi a ante in odio luctus vulputate. Sed
tincidunt.
Nullam tincidunt volutpat orci. Morbi scelerisque. Aliquam vitae
neque
eget urna consectetuer suscipit. Nullam luctus augue quis est. Donec
mollis,
sapien non tempus semper, nulla diam sagittis magna, sed sodales
ligula
dui eu wisi. Cras at erat nec quam pharetra sagittis. Pellentesque
lacinia
nonummy mi. Morbi a ante in odio luctus vulputate. Sed tincidunt.
</p>
</div>
<!--end div used for padding-->
</div>
<!--end sidebar-->
<div id="main">
<div>
<!--div used for padding-->
<div id="navigation">
<p class="navbar"> <a href="index.htm" title="Tam's German
Shepherds">Home</a>
| <a href="html/puppies.htm" title="Tam's Puppies">Puppies</a> |
<a href="html/females.htm" title="Tam's Females">Females</a>
| <a href="html/males.htm" title="Tam's Males">Males</a> | <a
href="html/sale.htm" title="Dogs For Sale">Dogs
For Sale</a> | <a href="html/links.htm" title="Tam's
Links">Links</a>
| <a href="html/photo.htm" title="Tam's Photo Album">Photo
Album</a>
| <a href="html/contact.htm" title="Contact Tam's">Contact Us</a>
</p>
</div>
<!--end navigation-->
<div id="content">
<h1> About Us & What We Offer </h1>
<p> Tams German Shepherds was founded in 1992. It is the joint
venture
of Mark and Tammi Kinner and Jeri Scott, incorporating the values
of
the working, conformation, obedience and herding German Shepherd
into
the total dog concept. Our German Shepherds are bred with
thoughtfulness
to conformation, working/herding/obedience abilities and longevity
and
are also family raised. Please take a look at what we have to
offer
in dogs and bitches, what’s for sale and what is coming up.
</p>
</div>
<!--end content-->
</div>
<!--end div used for padding-->
</div>
<!--end main-->
</div>
<!--end div around entire page-->
<div id="footer">
<p> :: Tam's German Shepherds :: Copyright 2006 © ::
Site Designed by Eddy
Sound :: </p>
<p> <a href="http://validator.w3.org/check?uri=referer";
title="World Wide Web Consortium">
<img src="images/valid-xhtml10.gif" alt="Valid XHTML 1.0
Strict" height="31" width="88" /></a>
</p>
</div><!--end footer-->
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
