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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to make my hover buttons centered?

    On my website www.awakeninghope.net, I need the CSS hover buttons to be centered. In my code, I have float: left; in order to make the buttons span horizontal, but cannot figure out what to do to make it centered. Here is my code:

    Code:
    <style type="text/css">
    <head>
    #menu li{
    float:left;
    }
    </head>
    </style>
    <head>
    <style type="text/css">
    <!--
    .homebut {
    float: left;
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(images/home2.jpg);
    background-repeat: no-repeat;
    display: block;
    width: 85px;
    height: 40px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .homebut a {
    display: block;
    font-size: 11px;
    width: 85px;
    height: 40px;
    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;
    float: left;
    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(images/about2.jpg);
    background-repeat: no-repeat;
    display: block;
    float: left;
    width: 85px;
    height: 40px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .aboutbut a {
    display: block;
    font-size: 11px;
    width: 85px;
    height: 40px;
    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;
    float: left;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    <head>
    <style type="text/css">
    <!--
    .musicbut {
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(images/music2.jpg);
    background-repeat: no-repeat;
    display: block;
    float: left;
    width: 85px;
    height: 40px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .musicbut a {
    display: block;
    font-size: 11px;
    width: 85px;
    height: 40px;
    float: left;
    margin: 0;
    padding: 0;
    color: black; text-decoration: none;
    outline: none;
    }
    .musicbut img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    .musicbut a:hover img{visibility:hidden}
    .musicbut span {
    position:absolute;
    float: left;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    <head>
    <style type="text/css">
    <!--
    .photobut {
    float: left;
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(images/photos2.jpg);
    background-repeat: no-repeat;
    display: block;
    width: 85px;
    height: 40px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .photobut a {
    display: block;
    font-size: 11px;
    width: 85px;
    height: 40px;
    float: left;
    margin: 0;
    padding: 0;
    color: black; text-decoration: none;
    outline: none;
    }
    .photobut img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    .photobut a:hover img{visibility:hidden}
    .photobut span {
    position:absolute;
    float: left;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    <head>
    <style type="text/css">
    <!--
    .bookbut {
    float: left;
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(images/book2.jpg);
    background-repeat: no-repeat;
    display: block;
    width: 85px;
    height: 40px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .bookbut a {
    display: block;
    font-size: 11px;
    width: 85px;
    height: 40px;
    float: left;
    margin: 0;
    padding: 0;
    color: black; text-decoration: none;
    outline: none;
    }
    .bookbut img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    .bookbut a:hover img{visibility:hidden}
    .bookbut span {
    position:absolute;
    float: left;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    <head>
    <style type="text/css">
    <!--
    .contactbut {
    float: left;
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(images/contact2.jpg);
    background-repeat: no-repeat;
    display: block;
    width: 85px;
    height: 40px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .contactbut a {
    display: block;
    font-size: 11px;
    width: 85px;
    height: 40px;
    float: left;
    margin: 0;
    padding: 0;
    color: black; text-decoration: none;
    outline: none;
    }
    .contactbut img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    .contactbut a:hover img{visibility:hidden}
    .contactbut span {
    position:absolute;
    float: left;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    <head>
    <style type="text/css">
    <!--
    .linkbut {
    float: left;
    position:relative;
    font-family: arial, verdana, helvetica, sans-serif;
    background-image: url(images/links2.jpg);
    background-repeat: no-repeat;
    display: block;
    width: 85px;
    height: 40px;
    margin: 0;
    margin-bottom:0px;
    padding: 0;
    }
    .linkbut a {
    display: block;
    font-size: 11px;
    width: 85px;
    height: 40px;
    float: left;
    margin: 0;
    padding: 0;
    color: black; text-decoration: none;
    outline: none;
    }
    .linkbut img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    .linkbut a:hover img{visibility:hidden}
    .linkbut span {
    position:absolute;
    float: left;
    left:5px;
    top:3px;
    margin:0;
    cursor: pointer;
    }
    
    
    -->
    </style> 
    </head>
    
    HTML:
    <div class="homebut"><a href="#"><img src="images/home1.jpg"></a></div>
    <div class="aboutbut"><a href="#"><img src="images/about1.jpg"></a></div>
    <div class="musicbut"><a href="#"><img src="images/music1.jpg"></a></div>
    <div class="photobut"><a href="#"><img src="images/photos1.jpg"></a></div>
    <div class="bookbut"><a href="#"><img src="images/book1.jpg"></a></div>
    <div class="contactbut"><a href="#"><img src="images/contact1.jpg"></a></div>
    <div class="linkbut"><a href="#"><img src="images/links1.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
    Hi there,

    Don't you know why using tables for layout is very bad? I'd recommend you to switch to a CSS based layout instead. Take a look at http://bonrouge.com/2c-hf-fluid%28r%29.php

    A menu is basically a "list" of links. Thus the most semantic set of tags to make a menu is the "unordered list". Since you are using fixed widths on each item, it'd be very easy to centre them. Just set a fixed width (that equals to the sum of all individual widths) and a margin:0 auto; to the container(<ul>) of the list items.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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