...

View Full Version : Placing logos on top of a banner w/ CSS



194673
12-31-2006, 01:57 AM
Well, the effect I"m trying to achieve is to have logos placed over a banner area. The two problems I'm having is...
1. The only way I found was to use absolute positioning, but then it will be messed up as browser sizes change.
2. IE messes up my PNGs trasparancy.
style.css

* {
margin: 0;
border: 0;
padding: 0;
}

body {
background: #E6E6E6;
font: Verdana, Arial, Helvetica, sans-serif 13px normal;
padding: 5px;
}

table {
border: 0;
}

#header {
background: url(images/banner_bg.jpg) repeat-y;
width: 768px;
height: 150px;
}

#header p {
display: block;
margin-left: 10px;
text-align: left;
padding-left: 10px;
padding-bottom: 10px;
font: Impact, sans bolder;
font-size: 32px;
color: #9CF;
}

#header p.sub {
text-align: left;
margin-left: 125px;
margin-top: -15px;
padding-left: 10px;
padding-bottom: 10px;
font: Verdana, sans-serif italics;
font-size: 15px;
color: #FF6;
}

#header #image {
position: absolute;
top: 5px;
right: 325px;
}

#header #image2 {
position: absolute;
top: 35px;
right: 895px;
}

p.blurb {
padding: 10px;
width: 210px;
display: block;
margin: 0px auto;
background: #99F;
border: 1px solid;
}

#title {
background: url(images/title_bg.jpg) repeat-y;
height: 35px;
font: Arial Black oblique;
font-size: 18px;
color: #FFF;
padding-left: 5px;
padding-bottom: 5px;
text-align: left;
margin: 5px 0px;
}

#title #pulse {
float: left;
position: absolute;
left: 325px;
top: 198px;
}

#footer {
margin: auto;
background: #004;
width: 768;
height: 20px;
padding: 0px 5px;
text-align: center;
color: #FFF;
margin-top: 5px;
}

#navigation {
background: url(images/nav_bg.jpg);
height: 30px;
width: 728px;
margin: 5px 0px;
padding: 0px 20px;
vertical-align: middle;
}

/* CONTENT START */

#container {
margin: auto;
width: 768px;
display: block;
}

td.content1 {
background: #BCF;
width: 513px;
padding: 5px;
height: auto;
}

td.content2 {
background: #EEF;
width: 250px;
padding: 5px;
height: auto;
margin-left:10px;
float: right;
}

/* CONTENT END */


index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PETscan Central :: Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">

<div id="header">
<div id="image2"><img src="images/petscan.png" /></div>
<div id="image"><img src="images/logo.png" /></div>
<p>::PETscan Central::</p>
<p class="sub">Helping Save Lives</p>
</div>

<div id="navigation">
<ol>
<a href="index.php">Home</a>
</ol>
</div>

<div id="title">
Home
<div id="pulse"><img src="images/pulse.png" /></div>
</div>

<table cellspacing="0">
<tr>
<td class="content1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam porta, orci vel pulvinar rutrum, enim leo molestie risus, vel molestie enim nisl ut arcu. Cras condimentum magna in ligula. Morbi sollicitudin scelerisque diam. Ut urna. Donec posuere. Proin varius ipsum fringilla est. Pellentesque orci. Sed lectus. Vestibulum non felis. Nulla feugiat lectus vitae dolor. Nam porta feugiat sapien.

Nulla vitae nisl vel mauris molestie faucibus. Phasellus ut est. Proin eros. Mauris eu metus quis sem vulputate convallis. Donec sit amet nibh quis velit pulvinar volutpat. Vestibulum semper magna sit amet justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus urna, pretium id, consectetuer eget, nonummy sit amet, massa. Phasellus venenatis augue. Sed suscipit. Vestibulum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec blandit mattis dui. Maecenas nisi. Proin non sem vitae dui rhoncus molestie. Etiam tempor. Etiam porttitor. Vivamus nibh.

Curabitur fringilla turpis a felis. Sed venenatis. Aenean tellus tellus, suscipit vitae, volutpat at, pellentesque quis, est. Nulla odio massa, imperdiet nec, tempus nec, ullamcorper id, mauris. Phasellus vel odio. Aliquam ut risus eget leo consectetuer lobortis. Proin mauris. Nulla facilisi. Vivamus consectetuer nonummy purus. Nulla facilisi. Curabitur odio. Aenean non lectus ut massa tempus fringilla. Vestibulum congue vulputate mauris. Quisque mollis leo nec pede. Aenean gravida, ligula at blandit sodales, orci ipsum placerat orci, quis elementum felis diam sed sem. Donec ipsum. Quisque sollicitudin dictum sapien.

In dapibus. Duis urna odio, elementum id, sodales in, ultrices id, ipsum. Quisque elementum imperdiet urna. Integer sed sapien. Donec nisl. Maecenas ullamcorper elementum pede. Nullam non enim et nibh congue pellentesque. Nunc a purus in libero sagittis lacinia. Donec dolor leo, eleifend porttitor, fringilla ut, bibendum id, mi. Nam eu eros non pede tempor imperdiet. In at pede vel risus aliquam vestibulum. Maecenas nulla nisl, eleifend sit amet, tincidunt at, ornare sed, diam. Fusce eu diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla orci odio, aliquet non, imperdiet id, commodo sed, justo. Ut sollicitudin tortor sed urna. Aenean justo.

Nulla nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque gravida. Curabitur auctor faucibus orci. Etiam mauris. Aenean ac nunc. Nunc in nisl. Curabitur ullamcorper. Integer tellus. Nunc sed augue. Pellentesque ligula quam, lacinia sit amet, semper mollis, ultricies at, dui. Curabitur scelerisque dolor a odio. Sed rutrum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras nibh. Nulla euismod cursus eros.
</td>
<td class="content2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam porta, orci vel pulvinar rutrum, enim leo molestie risus, vel molestie enim nisl ut arcu. Cras condimentum magna in ligula. Morbi sollicitudin scelerisque diam. Ut urna. Donec posuere. Proin varius ipsum fringilla est. Pellentesque orci. Sed lectus. Vestibulum non felis. Nulla feugiat lectus vitae dolor. Nam porta feugiat sapien.

<p class="blurb">Nulla vitae nisl vel mauris molestie faucibus. Phasellus ut est. Proin eros. Mauris eu metus quis sem vulputate convallis. Donec sit amet nibh quis velit pulvinar volutpat. Vestibulum semper magna sit amet justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus urna, pretium id, consectetuer eget, nonummy sit amet, massa. Phasellus venenatis augue. Sed suscipit. Vestibulum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec blandit mattis dui. Maecenas nisi. Proin non sem vitae dui rhoncus molestie. Etiam tempor. Etiam porttitor. Vivamus nibh.</p>
</td>
</tr>
</table>

<div id="footer">All Images and Content Copyright &copy; 2006-2007</div>

</div>
</body>
</html>

_Aerospace_Eng_
12-31-2006, 02:14 AM
Add position:relative; to the #header CSS. You don't have to use absolute positioning either. You can use floats and margins. http://css.maxdesign.com.au/floatutorial/

haveacigar
12-31-2006, 02:41 AM
use this for the ie transparency problem




<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

194673
12-31-2006, 03:10 AM
Well, I tried using floats, but that turned out disastrous. I've got it looking pretty good right now. Here's the code:

* {
margin: 0;
border: 0;
padding: 0;
}

body {
background: #E6E6E6;
font: 13px Verdana, Arial, Helvetica, sans-serif normal;
padding: 5px;
}

table {
border: 0;
}

#header {
background: url(images/banner_bg.jpg) repeat-y;
position: relative;
width: 768px;
height: 150px;
}

#header p {
float: left;
margin-bottom: 113px;
margin-left: 10px;
font: 32px Impact, sans bolder;
color: #9CF;
}

#header p.sub {
position: absolute;
top: 38px;
left: 115px;
font: 15px Verdana, sans-serif italics;
color: #FF6;
}

#header #image {
float: right;
margin: 0px 0px 10px 0px;
}

#header #image2 {
position: absolute;
top: 38px;
left: 5px;
}

p.blurb {
padding: 10px;
width: 210px;
display: block;
margin: 0px auto;
background: #99F;
border: 1px solid;
}

#title {
position: relative;
background: url(images/title_bg.jpg) repeat-y;
height: 35px;
width: 450px;
margin: 5px 0px;
}

#title p {
position: absolute;
top: 5px;
left: 5px;
font: 18px Impact oblique;
font-family:Impact;
color: #FFF;
}

#title #pulse {
position: absolute;
top: 0;
left: 0;
}

#footer {
margin: auto;
background: #004;
width: 768px;
height: 20px;
padding: 0px 5px;
text-align: center;
color: #FFF;
margin-top: 5px;
vertical-align: middle;
}

#navigation {
background: url(images/nav_bg.jpg);
height: 30px;
width: 728px;
margin: 5px 0px;
padding: 0px 20px;
vertical-align: middle;
}

/* CONTENT START */

#container {
margin: auto;
width: 768px;
display: block;
}

td.content1 {
background: #BCF;
width: 513px;
padding: 5px;
height: auto;
}

td.content2 {
background: #EEF;
width: 250px;
padding: 5px;
height: auto;
margin-left:10px;
float: right;
}

/* CONTENT END */

#icons {
margin-top: 5px;
text-align: center;
clear: both;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PETscan Central :: Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">

<div id="header">
<p>::PETscan Central::</p>
<p class="sub">Helping Save Lives</p>
<div id="image2"><img src="images/petscan.png" alt="" /></div>
<div id="image"><img src="images/logo.png" alt="" /></div>
</div>

<div id="navigation">
<a href="index.php">Home</a>
</div>

<div id="title">
<p>Home</p>
<div id="pulse"><img src="images/pulse.png" alt="" /></div>
</div>

<table cellspacing="0">
<tr>
<td class="content1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam porta, orci vel pulvinar rutrum, enim leo molestie risus, vel molestie enim nisl ut arcu. Cras condimentum magna in ligula. Morbi sollicitudin scelerisque diam. Ut urna. Donec posuere. Proin varius ipsum fringilla est. Pellentesque orci. Sed lectus. Vestibulum non felis. Nulla feugiat lectus vitae dolor. Nam porta feugiat sapien.

Nulla vitae nisl vel mauris molestie faucibus. Phasellus ut est. Proin eros. Mauris eu metus quis sem vulputate convallis. Donec sit amet nibh quis velit pulvinar volutpat. Vestibulum semper magna sit amet justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus urna, pretium id, consectetuer eget, nonummy sit amet, massa. Phasellus venenatis augue. Sed suscipit. Vestibulum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec blandit mattis dui. Maecenas nisi. Proin non sem vitae dui rhoncus molestie. Etiam tempor. Etiam porttitor. Vivamus nibh.

Curabitur fringilla turpis a felis. Sed venenatis. Aenean tellus tellus, suscipit vitae, volutpat at, pellentesque quis, est. Nulla odio massa, imperdiet nec, tempus nec, ullamcorper id, mauris. Phasellus vel odio. Aliquam ut risus eget leo consectetuer lobortis. Proin mauris. Nulla facilisi. Vivamus consectetuer nonummy purus. Nulla facilisi. Curabitur odio. Aenean non lectus ut massa tempus fringilla. Vestibulum congue vulputate mauris. Quisque mollis leo nec pede. Aenean gravida, ligula at blandit sodales, orci ipsum placerat orci, quis elementum felis diam sed sem. Donec ipsum. Quisque sollicitudin dictum sapien.

In dapibus. Duis urna odio, elementum id, sodales in, ultrices id, ipsum. Quisque elementum imperdiet urna. Integer sed sapien. Donec nisl. Maecenas ullamcorper elementum pede. Nullam non enim et nibh congue pellentesque. Nunc a purus in libero sagittis lacinia. Donec dolor leo, eleifend porttitor, fringilla ut, bibendum id, mi. Nam eu eros non pede tempor imperdiet. In at pede vel risus aliquam vestibulum. Maecenas nulla nisl, eleifend sit amet, tincidunt at, ornare sed, diam. Fusce eu diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla orci odio, aliquet non, imperdiet id, commodo sed, justo. Ut sollicitudin tortor sed urna. Aenean justo.

Nulla nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque gravida. Curabitur auctor faucibus orci. Etiam mauris. Aenean ac nunc. Nunc in nisl. Curabitur ullamcorper. Integer tellus. Nunc sed augue. Pellentesque ligula quam, lacinia sit amet, semper mollis, ultricies at, dui. Curabitur scelerisque dolor a odio. Sed rutrum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras nibh. Nulla euismod cursus eros.
</td>
<td class="content2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam porta, orci vel pulvinar rutrum, enim leo molestie risus, vel molestie enim nisl ut arcu. Cras condimentum magna in ligula. Morbi sollicitudin scelerisque diam. Ut urna. Donec posuere. Proin varius ipsum fringilla est. Pellentesque orci. Sed lectus. Vestibulum non felis. Nulla feugiat lectus vitae dolor. Nam porta feugiat sapien.

<p class="blurb">Nulla vitae nisl vel mauris molestie faucibus. Phasellus ut est. Proin eros. Mauris eu metus quis sem vulputate convallis. Donec sit amet nibh quis velit pulvinar volutpat. Vestibulum semper magna sit amet justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus urna, pretium id, consectetuer eget, nonummy sit amet, massa. Phasellus venenatis augue. Sed suscipit. Vestibulum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec blandit mattis dui. Maecenas nisi. Proin non sem vitae dui rhoncus molestie. Etiam tempor. Etiam porttitor. Vivamus nibh.</p>
</td>
</tr>
</table>

<div id="footer">All Images and Content Copyright &copy; Kevin Gao 2006-2007</div>

<div id="icons">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11.png" alt="Valid XHTML 1.1 Transitional" height="31" width="88" /></a>
&nbsp;&nbsp;
<a href="http://jigsaw.w3.org/css-validator/"><img src="http://www.w3.org/Icons/valid-css.png" alt="Valid CSS 1.0" height="31" width="88" /></a>
</div>

</div>
</body>
</html>


Edit: BTW, that png script works great haveacigar! Thanks a lot to the both of ya.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum