Hi,
I am working on a project for school. I am new to HTML and CSS and kinda suck at it!
I have my page almost laid out (FINALLY) but can't get the logo and navigation to be next to each other in the header. The navigation is below the logo.
Could someone please tell me what I am doing wrong??? I have been trying to get it to work for hours and hours, and am sure for someone that knows what they are doing it is probably glaringly obvious!
THANK YOU SO MUCH!
This is my HTML
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>DJD Electric - Electrician Greene NY</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Amanda Wylie" />
<styletype="text/css" media="all">@import "pleasework.css";</style> <styletype="text/css" media="all">@import "pleasework.css";</style>
</head>
<body>
<div id="page-container">
<div id="header">
<imgsrc="Images/DJDElectricLogo_mdm.jpg"width="250"height="128"alt="DJD Electric Logo"title="DJD Electric"border="0" />
<div id="NavList"></div>
<ul>
<li><ahref="home.html">Home</a></li>
<li><ahref="services.html">Services</a></li>
<li><ahref="testimonials.html">Testimonials</a></li>
<li><ahref="about.html">About Us</a></li>
<li><ahref="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="content">
<h1> THIS IS THE MAIN HEADING </h1>
<p> This is the content of the paragraph. Blah Blah Blah This is the content of the paragraph. Blah Blah Blah</p>
</div>
<div id="col1" class="column">
<h2>Sub-Heading 1</h2>
<p>This is the content of column # 1. blah blah blah blah blah blah blah blah blah.</p>
</div>
<div id="col2" class="column">
<h2>Sub-Heading 2</h2>
<p>This is the content of column # 2. blah blah blah blah blah blah blah blah blah.</p>
</div>
<div id="col3" class="column">
<h2>Sub-Heading 2</h2>
<p>This is the content of column # 2. blah blah blah blah blah blah blah blah blah.</p>
</div>
<div id="footer">
<p>This is the text for the footer</p>
</div>
</div>
</body>
</html>
THIS IS MY CSS
Code:
body { background-color:white;color:#09367A;font-family:"Estrangelo Edessa", Arial, sansserif;border: .5em;border-bottom-color:#09367a; }
#page-container {
width:960px;
margin:auto;
}
#content {
width:900px;
height:250px;
margin:10px0px5px0px;
padding:10px;
background:#7b96cc;
float:left;
}
#header {
width:900px;
float:left;
display:inline;
clear:;
padding:10px;
border:1pxsolid#ccc;
height:175px;
margin:10px0px5px0px;
background:#3a5894;
}
#navlist
{
display:inline;
float:left;
clear:;
list-style-type:none;
background-color:#09367A;
margin:0;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:white;
background-color:#fc9200;
text-align:center;
padding:5px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#fdae37;
}
Last edited by chrishirst; 01-16-2011 at 12:29 PM..
|