Actions

Creating clickable background images using CSS

From Joomla! Documentation

Revision as of 16:45, 1 June 2009 by Dblosvision (Talk | contribs)

What this is about

Okay, lets say you have a mostly finished template, with a typical corporate layout: A header, a content body area, and a footer. In the header you have placed a background image with a big company logo and some nice artwork next to it, with some dynamic content on top of the bottom right corner of the background image. Suddenly you realise that a click on the company logo part of that background image should bring the user back to the homepage. Usually you would cut out the image and place it directly inside the link. However you don't have enough time to cut up the image and re-work your template accordingly, so what you need is a quick-fix.

At this point your HTML structure might look something like this:

<div id="site">
    <div id="full-width-header">
        <div id="header-content">We love using Joomla!</div>
    </div>
    <div id="body-content">OSM saves the world!</div>
    <div id="footer-content">(c) the really cool web-designer</div>
</div>

And your CSS like this:

#full-width-header {
    background: url(header-logo.jpg);
    width: 800px;
    height: 172px;
}
#header-content {
    position: relative;
    float: right;
    width: 400px;
    height: 172px;
    vertical-align: bottom;
    text-align: right;
}

Note: Legitimate uses for the following technique might include things like tab-interfaces where the tabs should be able to stretch and still have a background image, or blog-skins which only differ in CSS.


<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

 <head>
   
   <title></title>
   <![CDATA[/*
* -----------------------------------------------------
* Blogger Template Style
* Name:     Snapshot: Tequila
* Designer: Dave Shea
* URL:      mezzoblue.com / brightcreative.com
* Date:     27 Feb 2004
* Updated by: Blogger Team
* ------------------------------------------------------ */

/* Variable definitions

  ====================

  <Variable name="textcolor" description="Text Color"
            type="color" default="#474B4E" value="#000000">

  <Variable name="pagetitlecolor" description="Blog Title Color"
            type="color" default="#7B8186" value="#000000">

  <Variable name="titlecolor" description="Post Title Color"
            type="color" default="#7C78B5" value="#000000">

  <Variable name="footercolor" description="Post Footer Color"
            type="color" default="#B4BABE" value="#000000">

  <Variable name="sidebarcolor" description="Sidebar Title Color"
            type="color" default="#7B8186" value="#666666">

  <Variable name="linkcolor" description="Link Color"
            type="color" default="#93DB04" value="#cc0000">

  <Variable name="visitedlinkcolor" description="Visited Link Color"
            type="color" default="#839D07" value="#cc0000">

  <Variable name="bodyfont" description="Text Font"
            type="font"
            default="normal normal 100% Helvetica, Arial, sans-serif" value="normal normal 81% Times, serif">

  <Variable name="startSide" description="Start side in blog language"
            type="automatic" default="left" value="left">

  <Variable name="endSide" description="End side in blog language"
            type="automatic" default="right" value="right">

  • /

/* -- basic html elements -- */ body {

 padding: 0;
 margin: 0;
 font-size: small;
 color: $textcolor;
 background: #fff; 
 text-align: center;

}

a {

 color: $linkcolor;
 font-weight: bold;
 text-decoration: none;

} a:visited {

 color: $visitedlinkcolor;

} a:hover {

 text-decoration: underline;
 color: #6C65D5;

} h1 {

 margin: 0;
 color: $pagetitlecolor;
 font-size: 1.5em;
 text-transform: lowercase;

} h1 a, h1 a:link, h1 a:visited {

 color: $pagetitlecolor;

}

h2, #comments h4 {

 font-size: 1em; 
 margin-top: 2em;
 margin-$endSide: 0;
 margin-bottom: 0;
 margin-$startSide: 0;
 color: $sidebarcolor;
 background: transparent url(http://www.blogblog.com/snapshot_tequila/bg-header1_$startSide.gif) bottom $endSide no-repeat;
 padding-bottom: 2px;

} h3 {

 font-size: 1em; 
 margin-top: 2em;
 margin-$endSide: 0;
 margin-bottom: 0;
 margin-$startSide: 0;
 background: transparent url(http://www.blogblog.com/snapshot_tequila/bg-header1_$startSide.gif) bottom $endSide no-repeat;
 padding-bottom: 2px;

} h4, h5 {

 font-size: 0.9em;
 text-transform: lowercase;
 letter-spacing: 2px;

} h5 {

 color: #7B8186;

} h6 {

 font-size: 0.8em;
 text-transform: uppercase; 
 letter-spacing: 2px;

} p {

 margin-top: 0;
 margin-$endSide: 0;
 margin-bottom: 1em;
 margin-$startSide: 0;

} img, form {

 border: 0; margin: 0;

}

/* -- layout -- */

  1. outer-wrapper {
 width: 700px;
 margin: 0 auto; 
 text-align: $startSide;
 font: $bodyfont;
 background: #fff url(http://www.blogblog.com/snapshot_tequila/bg-body_$startSide.gif) $startSide top repeat-y;

}

  1. header-wrapper {
 background: #D8DADC url(http://www.blogblog.com/snapshot_tequila/bg-headerdiv_$startSide.gif) $startSide top repeat-y;
 position: relative;
 _height: 0;

}

.descriptionwrapper {

 background: #fff url(http://www.blogblog.com/snapshot_tequila/bg-sidebar2.gif) 1px 0 no-repeat;
 width: 264px;
 padding-top: 0;
 padding-$endSide: 0;
 padding-bottom: 0;
 padding-$startSide: 8px;
 margin-top: 1px;
 margin-$endSide: 0;
 margin-bottom: 2px;
 margin-$startSide: 0;
 position: absolute;
 bottom: 0px;
 $endSide: 0px;

}

.description {

 border: 1px solid #BFFC45;
 background: #CCFD6A url(http://www.blogblog.com/snapshot_tequila/bg-profile.gif);
 padding-top: 10px;
 padding-$endSide: 0;
 padding-bottom: 10px;
 padding-$startSide: 7px;
 margin-top: 4px;
 margin-$endSide: 0;
 margin-bottom: 0;
 margin-$startSide: -6px;
 color: #839D07;
 font-weight: bold;

}

  1. header-inner {
 background: transparent url(http://www.blogblog.com/snapshot_tequila/header-02_$startSide.gif) bottom $startSide no-repeat;
 _height: 0;  

}

  1. main-wrapper {
line-height: 1.4;
float: $startSide;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\""; 
voice-family: inherit;
width: 404px;

} /* IE5 hack */

  1. main {}
  1. sidebar {
 float:$endSide;
 border-top: solid 1px #fff;
 padding-top: 4px;
 padding-$endSide: 0;
 padding-bottom: 0;
 padding-$startSide: 7px;
 background: #fff;
 width: 264px;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

}

  1. footer {
 clear: both; 
 background: #E9EAEB url(http://www.blogblog.com/snapshot_tequila/bg-footer_$startSide.gif) bottom $startSide no-repeat;
 border-top: solid 1px #fff;
 min-height: 15px;

}

/* -- header style -- */

  1. header h1 {
 padding-top: 12px;
 padding-$endSide: 0;
 padding-bottom: 92px;
 padding-$startSide: 4px;
 width: 557px; 
 line-height: 1;

}

/* -- content area style -- */

  1. main {
line-height: 1.4;

} .post h3 {

 font-size: 1.2em;
 margin-bottom: 0;
 color: $titlecolor;

} .post h3 a {

 color: $titlecolor;

} .post {

 clear: both;
 margin-bottom: 4em;

} .post-footer .post-author, .post-footer .post-timestamp {

 color: $footercolor;

}

.uncustomized-post-template .post-author, .uncustomized-post-template .post-timestamp {

 float: $startSide;
 margin-$endSide: 4px;

}

.uncustomized-post-template .post-footer .comment-link {

 float: $endSide;
 margin-$startSide: 4px;

}

.post img {

 border: 1px solid #E3E4E4;
 padding: 2px;
 background: #fff;

}

.deleted-comment {

 font-style:italic;
 color:gray;

}

.feed-links {

 clear: both;
 line-height: 2.5em;

}

  1. blog-pager-newer-link {
 float: $startSide;
}


  1. blog-pager-older-link {
 float: $endSide;
}


  1. blog-pager {
 text-align: center; 
}

.comment-footer {

 margin-bottom: 10px;

}

/* -- sidebar style -- */

.sidebar .widget {

 margin-top: 1.3em;
 margin-$endSide: 0;
 margin-bottom: 0.5em;
 margin-$startSide: 0;
}

.sidebar h2 {

 font-size: 1.3em; 

} .sidebar dl {

 margin-top: 0;
 margin-$endSide: 0;
 margin-bottom: 10px;
 margin-$startSide: 0;

} .sidebar ul {

 list-style: none;
 margin: 0;
 padding: 0;

} .sidebar li {

 padding-bottom: 5px;
 line-height: 1

}

.main .widget .clear {

 clear: both;

}

/* -- sidebar style -- */

  1. footer p {
 margin: 0;
 padding: 12px 8px;
 font-size: 0.9em;

}

.profile-textblock {

 margin-$startSide: 0;
 clear: both;

}

.profile-img {

 float: $startSide;
 margin-top: 0;
 margin-$endSide: 10px;
 margin-bottom: 5px;
 margin-$startSide: 0;
 border: 1px solid #7C78B5;
 padding: 4px;

}

/** Page structure tweaks for layout editor wireframe */

body#layout #header-wrapper {

 margin-top: 0;

} body#layout #main-wrapper {

 padding:0;
}

]]>

 </head>
 <body>
   
     

       
       

 

</body> </html>