Advanced Search

clickable header logo; swaps to plain version onprint or if CSS is off

/ Published in: CSS
Save to your folder(s)
set up for the logo in the header section of a site. The clickable logo takes you to the home page onclick, works as a 'top' for 'back to top' links, and swaps out to a plain version onprint or if css is off.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!-- HTML Doc -->
  2. <body>
  3. <div id="everything">
  4.     <div id="header">
  5.         <a href="index.cfm" id="top"><div id="headerLogo"><img src="images/uc_san_diego_logo_285.png" width="490" height="46" border="0" alt"uc san diego extension" /><br /></div></a>
  6.     </div>
  7. </div>
  8. </body>
  9.  
  10. <!-- CSS Doc -->
  11. body {text-align:center; margin:0; font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#322B27;background:#fff url(../images/springSpreeBodyBg.jpg) repeat-x 50% 0; line-height:1.5em;}
  12. div#everything {text-align:left;width:100%; display:table; margin:0 auto;background:url(../images/springSpreeEverythingBg.jpg) no-repeat 50% 0;}
  13. div#header {text-align:left;width:1025px;margin:0 auto; height:180px; }
  14. div#headerLogo{width:490px;height:46px;background:url(../images/uc_san_diego_logo.png) repeat-x 0 0; float:left; position:relative; left:136px; top:26px;}
  15. div#headerLogo img {visibility:hidden;} /* hide image for screen, show for print */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.