...

View Full Version : Help! How to make my hover buttons span horizontal?



Mouser
10-21-2010, 05:08 PM
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:




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

abduraooft
10-21-2010, 05:14 PM
<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>

#menu li{
float:left;
}

Mouser
10-21-2010, 05:19 PM
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!

Donkey
10-21-2010, 05:43 PM
add display inline to your li rules

#menu li{
float:left;
display:inline;
}

phpdeveloper
10-21-2010, 06:59 PM
Add Flot as a left in your homebut,aboutbut and mediabut class.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum