Multiple images on a single line

[seeARMS]

I'm trying to put multiple images on a single line. The images in question were created using an online tutorial (which I'm not allowed to link to). The tutorial creates an image which changes colour when hovered over.

The tutorial author uses a paragraph tag, <p>, 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 matching HTML and CSS, other than the name + values for 'top' and 'right'.

Yes, I have tried float:left, display: relative, 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.

[alt131]

Hi seeARMS, and welcome to WebmasterWorld :)
[edit]Ooops!
I just realised this doesn't answer your last question - I'll answer that in a second post, but this one shows float should work[/edit]

Assuming your html looks something like this:
<p class="buttonhome"><a href="index.php">Home</a> </p>
<p class="buttonhome"><a href="index.php">Home</a> </p>
<p class="buttonhome"><a href="index.php">Home</a> </p>

And the provided css with float added to .buttonhome (and some properties removed for the test):
.buttonhome {
/*position: relative; not required for the test */
display:block;
/*top: -71px; not required for the test */
/*right: -200px; not required for the test */
width:250px;
height:50px;
text-indent:-9999px;
float:left;
}

Produces 3 <p>'s floating on the same "line".
So I wonder if there is something else in the code affecting this. Have you checked for simple code errors (like all the elements being closed), and validated the html and css as well? Could the <p>'s be inheriting a property from a parent element that is stopping the floats?

[alt131]

Right, seeArms, your question about having the images on the same line can be done many ways. However, I'm not sure I understand the importance of having the images on the same line to begin with - can you explain why that is important?

The ideal is to mark up your html in using elements that have meaning. The tutorial author has used <p>'s - but the provided code doesn't look like three paragraphs. It looks like a menu, which is a list of links, so it is common to use an unordered list instead. Something like:

<ul>
<li><a href="index.php">Home</a> </li>
<li><a href="two.php">Menu two </a> </li>
<li><a href="three.php">Menu three</a> </li>
</ul>

The css depends on the browser versions you are supporting. If more recent browsers than ie6, you can avoid classing the <li's> and use attribute selectors instead. Something like:

ul {
/*get rid of the markers*/
list-style-type:none;
}

li {
width:250px;
height:50px;
text-indent:-9999px;
/*make the li float on one line*/
float:left;
}

a {
display:block;
width:100%;
height:100%;
/* Set the background for the first menu item */
background-image: url(../images/home_nav_button.png);
background-repeat: no-repeat;
background-position: top left;
outline:none;
}

/* Use attribute selectors to set the different image and background-position on the other menu items*/
a[href="two.php"] {
background-image:url(...);
background-position: ...;
}

a[href="three.php"] {
background-image:url(...);
background-position: ...;
}

/* Change the image position on :hover */
a:hover {background-position:0 -50px; }

a[href="two.php"]:hover {background-position: ... ; }

a[href="three.php"]:hover { background-position: ... ; }

Does that help achieve what you want?

[seeARMS]

Thanks for your response, I'll try that later today and see if it works.

To answer your question, I'm putting multiple images on the same line for a sort of navigation menu - below my header, I'm having HOME, ABOUT, and FORUM images which change color when hovered over.

[alt131]

... putting multiple images on the same line for a sort of navigation menu ...

Thanks for that - and you were right to be suspicious - <p>'s aren't best for this. HTML5 has <nav>, which might be appropriate, but until implemented widely, a list is probably closest.

[seeARMS]

Worked out perfectly. Thanks a lot.
To prevent the formatting from messing up at smaller resolutions, a simple change from percentage to pixels is required, right?

[alt131]

Hi Seearms, "it depends" - I'm not sure I understand the outcome you want. The % in the styles is making the <a>'s the full height/width of .buttonhome, so changing from % to px won't change the overall layout.