Stylesheets - Problem with my header (help!)

Author

Problem with my header (help!)

~john

2006-08-28, 6:38 pm

I'm trying to get my header to have 2 images, one for the top left and
one for the top right. Here's a link to my page...

http://levelwave.com/dev/div/index.html

[Left Logo] and [Right Logo] will eventually be images but what I'm
wanting is for the [Left Logo] to be aligned left and [Right Logo] to
be aligned right. As of now they're both squished to the left and I'm
not sure how to change my CSS to do this.

Here's my CSS for my header div

div#header{height:80px;line-height:80px;margin:0;}

The entire code page is below... any ideas?

thanks,

~john

-------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 24</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px}
div#footer{clear:both;width:100%}
</style>
</head>
<body>

<div id="header">[Left Logo] - [Right Logo]</div>

<div id="wrapper">
<div id="content">
</div>
</div>

<div id="navigation">
</div>

<div id="extra">
<p><strong>3) More stuff here.</strong> very text make long column
make filler fill make column column silly filler text silly column fill
silly fill column text filler make text silly filler make filler very
silly make text very very text make long filler very make column make
silly column fill silly column long make silly filler column filler
silly long long column fill silly column very </p>
</div>

<div id="footer"><p>Here it goes the footer</p></div>

</body>
</html>

Beauregard T. Shagnasty

2006-08-28, 6:38 pm

~john wrote:

> I'm trying to get my header to have 2 images, one for the top left and
> one for the top right. Here's a link to my page...
>
> http://levelwave.com/dev/div/index.html
>
> [Left Logo] and [Right Logo] will eventually be images but what I'm
> wanting is for the [Left Logo] to be aligned left and [Right Logo] to
> be aligned right. As of now they're both squished to the left and I'm
> not sure how to change my CSS to do this.

http://k75s.home.att.net/banner.html

--
-bts
-Motorcycles defy gravity; cars just suck.

sajid@fendoo.com

2006-08-29, 6:45 pm

Replace this line:

<div id="header">[Left Logo] - [Right Logo]</div>

With:

<div id="header"><img src="right logo url" style="float: right;"><img
src="left logo url"></div>