Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts

    Placing logos on top of a banner w/ CSS

    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
    Code:
    * {
    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
    Code:
    <!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>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    use this for the ie transparency problem

    Code:
    	<!--[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]-->

  • #4
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Well, I tried using floats, but that turned out disastrous. I've got it looking pretty good right now. Here's the code:
    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;
    }
    Code:
    <!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.
    Last edited by 194673; 12-31-2006 at 03:41 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •