HTML Help

NOMANH · Joined: 21 Jul 2009 Posts: 5

Hi basically my problem is that my images are appearing vertically after each other, I want my images to appear side by side with about 5 pixels of space between each of them.

This is my CSS: Code: a.imageLink {
display:block;
background:url(fitness.jpg)no-repeat;
width:81px;
height:272px;
text-decoration:none;
}
a.imageLink:hover {
background-position:bottom;
}
a.imageLink span {
visibility:hidden;
}

a.imageBink {
display:block;
background:url(education.jpg) no-repeat;
width:81px;
height:272px;
text-decoration:none;
}
a.imageBink:hover {
background-position:bottom;
}
a.imageBink span {
visibility:hidden;
}

a.imageCink {
display:block;
background:url(recipes.jpg) top no-repeat;
width:81px;
height:272px;
text-decoration:none;
}
a.imageCink:hover {
background-position:bottom;
}
a.imageCink span {
visibility:hidden;
}

a.imageDink {
display:block;
background:url(binaryone.jpg) top no-repeat;
width:81px;
height:272px;
text-decoration:none;
}
a.imageDink:hover {
background-position:bottom;
}
a.imageDink span {
visibility:hidden;
}

a.imageEink {
display:block;
background:url(entertainment.jpg) top no-repeat;
width:81px;
height:272px;
text-decoration:none;
}
a.imageEink:hover {
background-position:bottom;
}
a.imageEink span {
visibility:hidden;
}

And this is my HTML in the Body Section: Code: <a href="#" class="imageLink"><span>Fitness</span>
<a href="#" class="imageBink"><span>Education</span>
<a href="#" class="imageCink"><span>Kitchen</span>
<a href="#" class="imageDink"><span>Fixes</span>
<a href="#" class="imageEink"><span>Entertainment</span></a>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3598 Location: Biloxi, MS

Don't see the image tags in the body section. Nor do I see closing tags for your links. Don't know if your images are used as links either.

Code: <div style="width: XX%; height: YYYpx; margin: 0 auto;">
<img src="image_1.gif" style="width: 128px; height: 131px;" alt="" /><img src="image_2.gif" style="margin-left: 5px; width: 128px; height: 131px;" alt="" /><img src="image_3.gif" style="margin-left: 5px; width: 128px; height: 131px;" alt="" /><img src="image_4.gif" style="margin-left: 5px; width: 128px; height: 131px;" alt="" /><img src="image_5.gif" style="margin-left: 5px; width: 128px; height: 131px;" alt="" /></div>

Set div container wide enough for all images including the space between them. May have to tweak extra for IE.

With CSS (all images same size):

Code: div#image_wrap [
width: XX%;
height: YYYpx;
margin: 0 auto; /* optional for centering */
}

div#image_wrap img {
width: 128px;
height: 131px;
}

div#image_wrap img.spaced {
margin-left: 5px;
}

HTML:

Code: <div id="image_wrap"">
<img src="image_1.gif" alt="" /><img class="spaced" src="image_2.gif" alt="" /><img class="spaced" src="image_3.gif" alt="" /><img class="spaced" src="image_4.gif" alt="" /><img class="spaced" src="image_5.gif" alt="" /></div>