SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 Transform help needed

    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;
    }
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul - Will have a look at the code in my browser and get back to you via the thread :-)


Bookmarks

Posting Permissions

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