CSS3 Transform help needed

**benisjamin** · Apr 20, 2011 05:40

Hey guys and gals,

Im having a little difficulty trying to get my "contact" tab button get the CSS3 transform feature working...

What I want is for the tabbed button once in the :hover state to increase in size and grow into the page from its left margin by say 15px/20px - The only issue is I have an inline image inside the containing element which is #contact, as you will see from ther code below.

Can anybody shed on any light on this matter and say whether or not its actually possible to get it to work - I can create a larger image should I need this, when its in its enlarged ":hover" state so there are actually 2 images for the button.

Also if anybody has any comments on my use of ID`s or Classes, whether or not some are not needed or Im using far too many, that would also be good to know, as Im trying to improve my code bloat...(not that you can tell from this mock up lol )

Look forward to hearing from anybody

Cheers once again

Benisjamin

p.s The image file I created is attached. Obviously if the image should actually be a background image and not inline, then recreate at your own pleasure.

======================HTML code==========================

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=utf-8" />
<title> </title>
<link rel="stylesheet" href="transform.css" type="text/css" media="screen"/>
</head>
<body>

<div id="contact"
<a title="Contact Me" href="#"><img  src="images/c1.png" alt="Contact Me"/></a>
</div><!--contact tab button ends here-->

<div id="headerouter">
<div id="headerinner">
<h3>Header here</h3>
</div><!--headerinner ends-->
</div><!--headerouter ends-->

<div id="navouter">
<div id="navmain">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div><!--navmain ends-->
</div><!--navouter ends-->


<div id="contentouter">
<div id="contentinner">
</div>
</div>

<div id="footerouter">
<div id="footerinner">
<div id="navsub">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--navsub ends-->

</div><!--footerinner ends here-->
</div><!--footerouter ends here-->
</body>
</html>

=========================CSS code=======================

Code:

body, html, div, p, h1, h2, h3, ul ,li {
margin:0;
padding:0;
}

body{
font-size:1em;
font-family:arial;
}

h1,h2,h3{
text-align:center;
}

ul{
list-style:none;
}

#headerouter{
width:100%;
background-color:#8881FF;
border-bottom:1px solid #999;
}

#headerinner{
width:960px;
margin:0 auto;
height:150px;
background-color:#8881FF;
overflow:hidden;
}

#navouter{
width:100%;
background-color:#99A5F0;
border-bottom:1px solid #999;
}

#contentouter{
width:100%;
background-color:#eee;
}

#contentinner{
width:960px;
margin:0 auto;
height:600px;
background-color:#eee;
overflow:hidden;
}

#footerouter{
width:100%;
background-color:#6870A3;
border-top:1px solid #999;
}

#footerinner{
width:960px;
margin:0 auto;
height:300px;
background-color:#6870A3;
}
/*=============Main Navigaition top of page================*/

#navmain {
width:960px;
height:3em;
margin:0 auto;
background-color:#99A5F0;
overflow:hidden;
}

#navmain ul{
margin:0.3em 0 0 4.25em;
}

#navmain  li{
display:inline;
}

#navmain   a{
text-decoration:none;
display:block;
float:left;
-moz-border-radius:0.2em;
-webkit-border-radius:0.2em;
border-radius:0.2em;
padding:0.2em 2.5em;
font-size:1.5em;
font-weight:bold;
font-family:georgia;
color:#6870A3;
}

a:visited{
color:#660066;
}

#navmain a:focus{
outline:1px dotted #000;
}

#navmain a:hover{
background-color:#656DB5;
color:#fff;
}

/*=============Navigaition in the footer================*/

#navsub ul{
margin:1em 0 0 18em;
}

#navsub  li{
display:inline;
}

#footerinner #navsub   a{
float:left;
font-size:1em;
margin-right:1.2em;
font-weight:bold;
font-family:georgia;
color:#fff;
}

#navsub a:visited{  /*CHECK SPECIFICTY OUT*/
color:#660066;
}

#navsub a:focus{
outline:1px dotted #000;
}

#navsub a:hover{
color:#000;
}

/*=============Contact tab button================*/

#contact{
width:42px;
height:auto;
right:0;
top:20%;
position:fixed;
background-color:#000;
}

#contact img{
padding:5px 8px;
border:none;
margin-right:3px;
}

#contact a{
display:block;
}

#contact a:hover{
background-color:red;
}

**Paul O'B** · Apr 21, 2011 01:53

Do you mean something like this:

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=utf-8" />
<title></title>
<link rel="stylesheet" href="transform.css" type="text/css" media="screen"/>
<style>
body, html, div, p, h1, h2, h3, ul, li {
    margin:0;
    padding:0;
}
body {
    font-size:1em;
    font-family:arial;
}
h1, h2, h3 {
    text-align:center;
}
ul {
    list-style:none;
}
#headerouter {
    width:100%;
    background-color:#8881FF;
    border-bottom:1px solid #999;
}
#headerinner {
    width:960px;
    margin:0 auto;
    height:150px;
    background-color:#8881FF;
    overflow:hidden;
}
#navouter {
    width:100%;
    background-color:#99A5F0;
    border-bottom:1px solid #999;
}
#contentouter {
    width:100%;
    background-color:#eee;
}
#contentinner {
    width:960px;
    margin:0 auto;
    height:600px;
    background-color:#eee;
    overflow:hidden;
}
#footerouter {
    width:100%;
    background-color:#6870A3;
    border-top:1px solid #999;
}
#footerinner {
    width:960px;
    margin:0 auto;
    height:300px;
    background-color:#6870A3;
}
/*=============Main Navigaition top of page================*/

#navmain {
    width:960px;
    height:3em;
    margin:0 auto;
    background-color:#99A5F0;
    overflow:hidden;
}
#navmain ul {
    margin:0.3em 0 0 4.25em;
}
#navmain li {
    display:inline;
}
#navmain a {
    text-decoration:none;
    display:block;
    float:left;
    -moz-border-radius:0.2em;
    -webkit-border-radius:0.2em;
    border-radius:0.2em;
    padding:0.2em 2.5em;
    font-size:1.5em;
    font-weight:bold;
    font-family:georgia;
    color:#6870A3;
}
a:visited {
    color:#660066;
}
#navmain a:focus {
    outline:1px dotted #000;
}
#navmain a:hover {
    background-color:#656DB5;
    color:#fff;
}
/*=============Navigaition in the footer================*/

#navsub ul {
    margin:1em 0 0 18em;
}
#navsub li {
    display:inline;
}
#footerinner #navsub a {
    float:left;
    font-size:1em;
    margin-right:1.2em;
    font-weight:bold;
    font-family:georgia;
    color:#fff;
}
#navsub a:visited {  /*CHECK SPECIFICTY OUT*/
    color:#660066;
}
#navsub a:focus {
    outline:1px dotted #000;
}
#navsub a:hover {
    color:#000;
}
/*=============Contact tab button================*/

#contact {
    width:42px;
    height:auto;
    right:0;
    top:20%;
    position:fixed;
    background-color:#000;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#contact:hover {
    width:82px
}
#contact img {
    padding:5px 8px;
    border:none;
    margin-right:3px;
}
#contact a {
    display:block;
}
#contact a:hover {
    background-color:red;
}
#contact a {
    width:22px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#contact:hover a {
    width:42px;
}
</style>
</head>
<body>
<div id="contact"> <a title="Contact Me" href="#"><img src="http://www.sitepoint.com/forums/images/c1.png" alt="Contact Me" width="100%" /></a> </div>
<!--contact tab button ends here-->
<div id="headerouter">
    <div id="headerinner">
        <h3>Header here</h3>
    </div>
    <!--headerinner ends-->
</div>
<!--headerouter ends-->
<div id="navouter">
    <div id="navmain">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Pricing</a></li>
        </ul>
    </div>
    <!--navmain ends-->
</div>
<!--navouter ends-->
<div id="contentouter">
    <div id="contentinner"> </div>
</div>
<div id="footerouter">
    <div id="footerinner">
        <div id="navsub">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <!--navsub ends-->
    </div>
    <!--footerinner ends here-->
</div>
<!--footerouter ends here-->
</body>
</html>

The important parts are to set the image width to 100% and set the anchor to the width of the image. Then on hover increase the anchors width.

Code:

<a title="Contact Me" href="#"><img src="http://www.sitepoint.com/forums/images/c1.png" alt="Contact Me" width="100%" />

Code:

#contact {
    width:42px;
    height:auto;
    right:0;
    top:20%;
    position:fixed;
    background-color:#000;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#contact:hover {
    width:82px
}
#contact img {
    padding:5px 8px;
    border:none;
    margin-right:3px;
}
#contact a {
    display:block;
}
#contact a:hover {
    background-color:red;
}
#contact a {
    width:22px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#contact:hover a {
    width:42px;
}

**benisjamin** · Apr 21, 2011 03:38

Cheers Paul - Will have a look at the code in my browser and get back to you via the thread :-)

User Tag List

Thread: CSS3 Transform help needed

Thread Tools

Display

CSS3 Transform help needed

Bookmarks

Bookmarks

Posting Permissions