Forum Moderators: not2easy
Spanning the full width of the page and equidistant as much as possible.
I managed to get it working in Firefox (mac), but it's completely out of whack in Explorer 7.0 - Logo2 shifts down and to the right. The resolution there is 1024x768 and my own is 1280x854.
I have reviewed umpteen tutorials and tried altering the code in several ways (latest attempt was putting a 3-celled table in the header]. Another thing I tried was adding a right margin to Logo 1 in order to get the Text centered. I am still having to play around with such things, only to have it not work in PC IE 7.
Thanks.
HTML -- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><body>
<div id="header">
<div id="logo"><img src="images/newlogo10black.jpg" alt="company logo" width="223" height="108" /></div>
<div id="company-address">
<span class="companyname">Company Name</span><br />
Address line 1<br />
Address 2 />
Address 3</p>
</div>
<div id="logo2"><img src="images/flamestoplogo230.jpg" alt="flamestop logo" width="230" height="50"/></div>
</div>
CSS for Header:
#header {
clear: both;
height: 120px;
width: 100%;
padding: 0 0 0 0;
background: #000000;
margin-bottom: 26px;
}
#logo {
padding-left: 25px;
padding-top: 7px;
float: left;
}
#company-address {
color: #CCCCCC;
padding-top: 22px;
text-align: center;
float: left;
}
#company-address p {
background: #000000;
padding-right: 10px;
text-align: center;
font-size: 85%;
}
#logo2 {
margin-top: 15px;
padding-right: 20px;
float:right;
}
and a warm welcome to these forums. ;)
Try it like this...
[blue]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
[/blue][blue]
<style type="text/css">
#header {
height:120px;
background-color:#000;
margin-bottom: 26px;
}
#logo2 {
width:230px;
height:50px;
margin-top: 15px;
padding-right: 20px;
float:right;
}
#logo {
width:223px;
height:108px;
padding:7px 0 0 25px;
float: left;
}
#company-address {
color:#ccc;
padding-top:22px;
text-align:center;
margin:0 250px 0 248px;
}
#company-address p {
font-size: 85%;
}
</style>
[/blue][blue]
</head>
<body>
[/blue][blue]
<div id="header">
[/blue][blue]
<img id="logo2" src="images/flamestoplogo230.jpg" alt="flamestop logo">
<img id="logo" src="images/newlogo10black.jpg" alt="company logo" >
[/blue][blue]
<div id="company-address">
<p>
<span class="companyname">Company Name</span><br>
Address line 1<br>
Address 2 <br>
Address 3
</p>
</div>
[/blue][blue]
</div>
[/blue][blue]
</body>
</html>[/blue]
I also tried setting the margins and widths in percentages and that seemed to work (in IE) with only minor adjustments.
