No replies
seeARMS
seeARMS's picture
Offline
newbie
Last seen: 8 years 22 weeks ago
Timezone: GMT-4
Joined: 2011-05-12
Posts: 1
Points: 2

I'm trying to put multiple images on a single line. The images in question were created using an online tutorial:http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/

The tutorial author uses a paragraph tag,

, as a wrapper to a link. My HTML looks like this:

<p class="buttonhome"><a href="index.php">Home</a>

My CSS looks like this:

.buttonhome {
position: relative;
display:block;
top: -71px;
right: -200px;
width:250px;
height:50px;
text-indent:-9999px;
}
.buttonhome a {
display:block;
width:100%;
height:100%;
background:url('../images/home_nav_button.png') no-repeat top left;
outline:none;
}
.buttonhome a:hover {
background-position:0 -50px;
} 

I also have three other buttons with identical HTML and CSS, other than the name + values for 'top' and 'right'.

Yes, I have tried float:left, display: inline, etc etc, but I'm unable to get it to work.

The above works fine, as the images are on a single line, but it is not a good way to do it, as by default the images are on separate lines and I just moved them up using "top" and "right". Ideally, the images would just be on a single line from the start. With the way I have it, there's a big space where the images were (before being moved).

Any help is appreciated, thanks.