Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help! How to make my hover buttons span horizontal?

    I am trying to make my image buttons (with CSS hover effect) align horizontally instead of vertically. I'm new to CSS so, I'm not exactly sure how to resolve this. I hope someone knows the answer! Here is my code:

    Code:
    <head>
    <style type="text/css">
    <!--
    .homebut {
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(home2.jpg);
    background-repeat: no-repeat;
    display: block;
    width: 58px;
    height: 30px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .homebut a {
    display:block;
    font-size: 11px;
    width: 58px;
    height: 30px;
    float: left;
    margin: 0;
    padding: 0;
    color: black; text-decoration: none;
    outline: none;
    }
    .homebut img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    .homebut a:hover img{visibility:hidden}
    .homebut span {
    position:absolute;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    <head>
    <style type="text/css">
    <!--
    .aboutbut {
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(about2.jpg);
    background-repeat: no-repeat;
    display: block;
    width: 58px;
    height: 30px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .aboutbut a {
    display:block;
    font-size: 11px;
    width: 58px;
    height: 30px;
    float: left;
    margin: 0;
    padding: 0;
    color: black; text-decoration: none;
    outline: none;
    }
    .aboutbut img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    .aboutbut a:hover img{visibility:hidden}
    .aboutbut span {
    position:absolute;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    <head>
    <style type="text/css">
    <!--
    .mediabut {
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(media2.jpg);
    background-repeat: no-repeat;
    display: block;
    width: 58px;
    height: 30px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .mediabut a {
    display:block;
    font-size: 11px;
    width: 58px;
    height: 30px;
    float: left;
    margin: 0;
    padding: 0;
    color: black; text-decoration: none;
    outline: none;
    }
    .mediabut img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    .mediabut a:hover img{visibility:hidden}
    .aboutbut span {
    position:absolute;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    <div class="homebut"><a href="#"><img src="home1.jpg"></a></div>
    <div class="aboutbut"><a href="#"><img src="about1.jpg"></a></div>
    <div class="mediabut"><a href="#"><img src="media1.jpg"></a></div>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <ul id="menu">
    <li><a href="#"><img src="home1.jpg"></a></li>
    <li><a href="#"><img src="about1.jpg"></li>
    <li><a href="#"><img src="media1.jpg"></a></li>
    </ul>
    Code:
    #menu li{
    float:left;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey!

    Thanks for your reply! I tried this, but the way my code is set up, it doesn't work properly. I need someone to actually put it into the context of my code... here is an example of what's happening. My website: www.awakeninghope.net

    I need it to not stack vertically, but yet for them to be next to each other horizontally.

    Thanks!

  • #4
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    add display inline to your li rules
    Code:
    #menu li{
    float:left;
    display:inline;
    }
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Posts
    149
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Add flot:left

    Add Flot as a left in your homebut,aboutbut and mediabut class.

    like below :
    .homebut, .aboutbut , .mediabut{ float:left;}


  •  

    Posting Permissions

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