...

View Full Version : How to make my hover buttons centered?



Mouser
10-24-2010, 02:19 AM
On my website www.awakeninghope.net (http://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:




<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>

abduraooft
10-24-2010, 01:43 PM
Hi there,

Don't you know why using tables for layout is very bad (http://www.hotdesign.com/seybold/)? 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 (http://boagworld.com/technology/semantic-code-what-why-how) set of tags to make a menu is the "unordered list (http://htmldog.com/reference/htmltags/ul/)". 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum