Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Logo and Navigation not lining up in Header
Old 01-16-2011, 11:32 AM Logo and Navigation not lining up in Header
Junior Talker

Posts: 1
Name: Amanda
Trades: 0
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..
wyliea is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 01-16-2011, 02:33 PM Re: Logo and Navigation not lining up in Header
Novice Talker

Posts: 10
Name: JD
Trades: 0
well if tht's exactly ur html and css code then im surprise u can still able to see ur html strucuture properly

spaces are missing from various HTML tags and even in CSS properties.


anyway well to place ur logo and navigation next to each other there are 2 ways

1. give align="left" to the image or
2. give float: left to both of them.


hope it will help...
jsd132 is offline
Reply With Quote
View Public Profile
 
Old 01-16-2011, 03:56 PM Re: Logo and Navigation not lining up in Header
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Using align="left" is the wrong way, alignment is what CSS is for.

Your navigation isn't even INSIDE the Navlist div, because you've closed the div before you put this inside of it -
Quote:
<div id="NavList"></div>
I really don't see the need for a div to hold your navigation though, the UL itself should be sufficient.

Float the logo.
Float the ul of your nav.
Make sure you CLEAR your floats (see the stickies)
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 01-18-2011, 07:03 AM Re: Logo and Navigation not lining up in Header
Average Talker

Posts: 15
Name: Kannan
Trades: 0
align="left" is used to wrap texts around an image. it will not help in your case.
use
Quote:
{ float: left }
property for both logo and navigation.
its always a good practice of putting elements inside a div to maintain a good structure.
kannan is offline
Reply With Quote
View Public Profile Visit kannan's homepage!
 
Old 01-18-2011, 08:37 AM Re: Logo and Navigation not lining up in Header
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Quote:
its always a good practice of putting elements inside a div to maintain a good structure.
Where did you get THAT idea? That is not true at all, it all depends on the layout and what you're doing. In this case, the UL doesn't have to be inside a div.

Adding divs everywhere is inefficient and creates bloated code and "div-itis". A "div" is a DIVISION - many things can be inside a "division" that don't have to also be enclosed inside divs.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Last edited by LadynRed; 01-18-2011 at 08:39 AM..
LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Logo and Navigation not lining up in Header
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 1.50249 seconds with 12 queries