Actions

Difference between revisions of "Creating clickable background images using CSS"

From Joomla! Documentation

m (How to do it)
m (Reverted edits by Dblosvision (Talk) to last version by JGZimmerle)
Line 35: Line 35:
  
  
<?xml version="1.0" encoding="UTF-8" ?>
+
== How to do it ==
<!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>
+
    <b:include data='blog' name='all-head-content'/>
+
    <title><data:blog.pageTitle/></title>
+
    <b:skin><![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
+
First: You can't just copy the #header-content div, position it over the logo, make the content invisible and enclose it in an anchor-tag. That would be broken HTML, because you can't place block-level elements like div inside anchor tags.
  ====================
+
  
  <Variable name="textcolor" description="Text Color"
+
You can however enclose a stretched, one-pixel, transparent GIF image in anchor tags (as per example one) if you have to support old browsers. Otherwise you can simply turn the anchor itself into an inline-block using CSS 2.1 (as per example two).
            type="color" default="#474B4E" value="#000000">
+
  
  <Variable name="pagetitlecolor" description="Blog Title Color"
+
Example 1 (pre CSS 2.1) HTML:
            type="color" default="#7B8186" value="#000000">
+
<pre>
 +
<div id="site">
 +
    <div id="full-width-header">
 +
        <a href="/"><img src="transparent.gif" id="home-link" alt="Nav: Home" /></a>
 +
        <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>
 +
</pre>
  
  <Variable name="titlecolor" description="Post Title Color"
+
Example 1 (pre CSS 2.1) CSS:
            type="color" default="#7C78B5" value="#000000">
+
<pre>
 
+
#full-width-header {
  <Variable name="footercolor" description="Post Footer Color"
+
    position: relative; /* necassary to
            type="color" default="#B4BABE" value="#000000">
+
        absolute-position the child-element
 
+
        #home-link relative to the header */
  <Variable name="sidebarcolor" description="Sidebar Title Color"
+
    background: url(header-logo.jpg);
            type="color" default="#7B8186" value="#666666">
+
    width: 800px;
 
+
    height: 172px;
  <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;
+
 
}
 
}
 
+
#home-link {
a {
+
    position: absolute;
  color: $linkcolor;
+
    width: 200px;   /* width of the logo */
  font-weight: bold;
+
    height: 172px;   /* height of the logo */
   text-decoration: none;
+
    top: 0; left: 0; /* top-left corner of logo */
 +
    border: 0;
 +
    float: left;
 
}
 
}
a:visited {
+
#header-content {
  color: $visitedlinkcolor;
+
    position: relative;
}
+
    float: right;
a:hover {
+
    width: 400px;
  text-decoration: underline;
+
    height: 172px;
  color: #6C65D5;
+
    vertical-align: bottom;
}
+
    text-align: right;
h1 {
+
  margin: 0;
+
  color: $pagetitlecolor;
+
  font-size: 1.5em;
+
  text-transform: lowercase;
+
}
+
h1 a, h1 a:link, h1 a:visited {
+
  color: $pagetitlecolor;
+
 
}
 
}
 +
</pre>
  
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 -- */
+
Example 2 (CSS 2.1) HTML:
#outer-wrapper {
+
<pre>
  width: 700px;
+
<div id="site">
  margin: 0 auto;
+
    <div id="full-width-header">
  text-align: $startSide;
+
        <a href="/" id="home-link">Home</a>
  font: $bodyfont;
+
        <div id="header-content">We love using Joomla!</div>
  background: #fff url(http://www.blogblog.com/snapshot_tequila/bg-body_$startSide.gif) $startSide top repeat-y;
+
    </div>
}
+
    <div id="body-content">OSM saves the world!</div>
 +
    <div id="footer-content">(c) the really cool web-designer</div>
 +
</div>
 +
</pre>
  
#header-wrapper {
+
Example 2 (CSS 2.1) CSS:
  background: #D8DADC url(http://www.blogblog.com/snapshot_tequila/bg-headerdiv_$startSide.gif) $startSide top repeat-y;
+
<pre>
  position: relative;
+
#full-width-header {
  _height: 0;
+
    position: relative; /* necassary to
 +
        absolute-position the child-element
 +
        #home-link relative to the header */
 +
    background: url(header-logo.jpg);
 +
    width: 800px;
 +
    height: 172px;
 
}
 
}
 
+
#home-link {
.descriptionwrapper {
+
    position: absolute;
  background: #fff url(http://www.blogblog.com/snapshot_tequila/bg-sidebar2.gif) 1px 0 no-repeat;
+
    display: inline-block;
  width: 264px;
+
    width: 200px;   /* width of the logo */
  padding-top: 0;
+
    height: 172px/* height of the logo */
  padding-$endSide: 0;
+
    top: 0; left: 0; /* top-left corner of logo */
  padding-bottom: 0;
+
    border: 0;
   padding-$startSide: 8px;
+
    float: left;
  margin-top: 1px;
+
    visibility: hidden;
  margin-$endSide: 0;
+
  margin-bottom: 2px;
+
  margin-$startSide: 0;
+
  position: absolute;
+
  bottom: 0px;
+
  $endSide: 0px;
+
 
}
 
}
 
+
#header-content {
.description {
+
    position: relative;
  border: 1px solid #BFFC45;
+
    float: right;
  background: #CCFD6A url(http://www.blogblog.com/snapshot_tequila/bg-profile.gif);
+
    width: 400px;
  padding-top: 10px;
+
    height: 172px;
  padding-$endSide: 0;
+
    vertical-align: bottom;
  padding-bottom: 10px;
+
    text-align: right;
  padding-$startSide: 7px;
+
  margin-top: 4px;
+
  margin-$endSide: 0;
+
  margin-bottom: 0;
+
  margin-$startSide: -6px;
+
  color: #839D07;
+
  font-weight: bold;
+
 
}
 
}
 
+
</pre>
#header-inner {
+
  background: transparent url(http://www.blogblog.com/snapshot_tequila/header-02_$startSide.gif) bottom $startSide no-repeat;
+
  _height: 0; 
+
}
+
 
+
#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 */
+
#main {}
+
 
+
#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 */
+
}
+
#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 -- */
+
#header h1 {
+
  padding-top: 12px;
+
  padding-$endSide: 0;
+
  padding-bottom: 92px;
+
  padding-$startSide: 4px;
+
  width: 557px;
+
  line-height: 1;
+
}
+
 
+
/* -- content area style -- */
+
#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;
+
}
+
 
+
#blog-pager-newer-link {
+
  float: $startSide;
+
}
+
+
#blog-pager-older-link {
+
  float: $endSide;
+
}
+
+
#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 -- */
+
#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;
+
}
+
]]></b:skin>
+
  </head>
+
 
+
  <body>
+
  <div id='outer-wrapper'><div id='wrap2'>
+
 
+
    <!-- skip links for text browsers -->
+
    <span id='skiplinks' style='display:none;'>
+
      <a href='#main'>skip to main </a> |
+
      <a href='#sidebar'>skip to sidebar</a>
+
    </span>
+
 
+
    <div id='header-wrapper'>
+
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
+
<b:widget id='Header1' locked='true' title='DESIGN BRANDS AND LOGOS (Header)' type='Header'/>
+
</b:section>
+
    </div>
+
+
    <div id='content-wrapper'>
+
 
+
      <div id='crosscol-wrapper' style='text-align:center'>
+
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
+
      </div>
+
 
+
      <div id='main-wrapper'>
+
        <b:section class='main' id='main' showaddelement='no'>
+
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
+
</b:section>
+
      </div>
+
 
+
      <div id='sidebar-wrapper'>
+
        <b:section class='sidebar' id='sidebar' preferred='yes'>
+
<b:widget id='LinkList1' locked='false' title='LINK' type='LinkList'/>
+
<b:widget id='Image3' locked='false' title='' type='Image'/>
+
<b:widget id='Image2' locked='false' title='' type='Image'/>
+
</b:section>
+
      </div>
+
 
+
      <!-- spacer for skins that want sidebar and main to be the same height-->
+
      <div class='clear'>&#160;</div>
+
 
+
    </div> <!-- end content-wrapper -->
+
 
+
    <div id='footer-wrapper'>
+
      <b:section class='footer' id='footer'>
+
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
+
<b:widget id='Image1' locked='false' title='' type='Image'/>
+
</b:section>
+
    </div>
+
 
+
  </div></div> <!-- end outer-wrapper -->
+
</body>
+
</html>
+

Revision as of 18:34, 1 June 2009

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.


How to do it

First: You can't just copy the #header-content div, position it over the logo, make the content invisible and enclose it in an anchor-tag. That would be broken HTML, because you can't place block-level elements like div inside anchor tags.

You can however enclose a stretched, one-pixel, transparent GIF image in anchor tags (as per example one) if you have to support old browsers. Otherwise you can simply turn the anchor itself into an inline-block using CSS 2.1 (as per example two).

Example 1 (pre CSS 2.1) HTML:

<div id="site">
    <div id="full-width-header">
        <a href="/"><img src="transparent.gif" id="home-link" alt="Nav: Home" /></a>
        <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>

Example 1 (pre CSS 2.1) CSS:

#full-width-header {
    position: relative; /* necassary to
        absolute-position the child-element
        #home-link relative to the header */
    background: url(header-logo.jpg);
    width: 800px;
    height: 172px;
}
#home-link {
    position: absolute;
    width: 200px;    /* width of the logo */
    height: 172px;   /* height of the logo */
    top: 0; left: 0; /* top-left corner of logo */
    border: 0;
    float: left;
}
#header-content {
    position: relative;
    float: right;
    width: 400px;
    height: 172px;
    vertical-align: bottom;
    text-align: right;
}


Example 2 (CSS 2.1) HTML:

<div id="site">
    <div id="full-width-header">
        <a href="/" id="home-link">Home</a>
        <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>

Example 2 (CSS 2.1) CSS:

#full-width-header {
    position: relative; /* necassary to
        absolute-position the child-element
        #home-link relative to the header */
    background: url(header-logo.jpg);
    width: 800px;
    height: 172px;
}
#home-link {
    position: absolute;
    display: inline-block;
    width: 200px;    /* width of the logo */
    height: 172px;   /* height of the logo */
    top: 0; left: 0; /* top-left corner of logo */
    border: 0;
    float: left;
    visibility: hidden;
}
#header-content {
    position: relative;
    float: right;
    width: 400px;
    height: 172px;
    vertical-align: bottom;
    text-align: right;
}