2 replies [Last post]
Rhek
Offline
newbie
Last seen: 15 years 41 weeks ago
Timezone: GMT+8
Joined: 2003-10-02
Posts: 4
Points: 0

Hello,

CSS Newbie here and I have an image background / hyperlink question. I am working on a page where we would like to have 3 images placed horizontally, side by side, with no spacing in between each image. My markup currently looks like this and the images are aligned correctly…

<div id="randomproducts">
<a href="default.html"><img src="img/product1.gif" alt="product 1" /></a><a href="default.html"><img rrc="img/product2.gif" alt="product 2" /></a><a href="default.html"><img src="img/product3.gif" alt="product 3" /></a>
</div>

We are considering declaring three ID’s, one for each image, and then in our stylesheet making the image the background for each ID.

The markup would be…
<div id="randomproducts">
<a id="product1" href="product1.html" title="product1">
<span class="hide">product1</span>
</a>
<a id="product2" href="product2.html" title="product2">
<span class="hide">product2</span>
</a>
<a id="product3" href="product3.html" title="product3">
<span class="hide">product3</span>
</a>
</div>

The stylesheet would be…

#product1 {
display: block;
padding: 0;
border: 0;
margin: 0;
width: 200px;
height: 200px;
background: url("../img/product1.gif") no-repeat;
}

#product2 {
display: block;
padding: 0;
border: 0;
margin: 0;
width: 200px;
height: 200px;
background: url("../img/product2.gif") no-repeat;
}

#product3 {
display: block;
padding: 0;
border: 0;
margin: 0;
width: 200px;
height: 200px;
background: url("../img/product3.gif") no-repeat;
}

The three images will be displayed at the bottom of the page after a news article of varying length. We want the 3 images to be displayed horizontally, side by side. Using the styling displayed above each image is stacking vertically one below the other. I believe this is caused by the line “display: block; “. If I change the line to “display: inline;” or remove the line, the image disappears. As I understand (and could quite possibly be wrong!) I need the “display: block;” so that the background image can be used as a hyperlink.

Any suggestions would be appreciated.

Thank You,
Richard

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Background Images are stacking vertically, not horizontally

Hi Rhek,
Block elements that aren't positioned, like divs or in your case inline elements set to display block, start on their own horizontal line.
To get round this you could float each product left.

#product1 {  
float:left;  
display: block;  
padding: 0;  
border: 0;  
margin: 0;  
width: 200px;  
height: 200px;  
background: url("../img/product1.gif") no-repeat;  
} 

Hope that helps

freak
Offline
newbie
Last seen: 15 years 41 weeks ago
Timezone: GMT-8
Joined: 2003-10-04
Posts: 7
Points: 0

Background Images are stacking vertically, not horizontally

Another way is to simply have them display inline.

#whatever {
  display: inline;
  }

// freak