homepage Welcome to WebmasterWorld Guest from 54.234.74.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Multiple images on a single line
seeARMS




msg:4311594
 10:20 pm on May 12, 2011 (gmt 0)

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




msg:4311775
 11:43 am on May 13, 2011 (gmt 0)

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




msg:4311798
 12:58 pm on May 13, 2011 (gmt 0)

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




msg:4311810
 1:20 pm on May 13, 2011 (gmt 0)

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




msg:4311820
 1:35 pm on May 13, 2011 (gmt 0)

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




msg:4312513
 9:10 pm on May 14, 2011 (gmt 0)

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




msg:4313042
 12:41 pm on May 16, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved