How would you place images Side by Side

HTML Help Forum

FAQ

Search

Memberlist

Register

Profile

Log in to check your private messages

Register - Not registered yet? Got something to say? Join HTML Code Tutorial!

How would you place images Side by Side

HTML Help Forum -> Images & Graphics

View previous topic :: View next topic

Author

Message

NOMANH

Joined: 21 Jul 2009
Posts: 5

Posted: Sun Aug 23, 2009 7:11 pm How would you place images Side by Side

Reply with quote

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: 4289
Location: MS

Posted: Mon Aug 24, 2009 2:44 am

Reply with quote

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>

Display posts from previous:

	HTML Help Forum -> Images & Graphics	All times are GMT - 8 Hours
Page 1 of 1

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group

HTML Help topic RSS feed

DARFUR

Get a Stop the Genocide poster at SaveDarfur.org.
Also see Eyes on Darfur.

HOSTING / DESIGN

$1.99 Domain Registration
Cheap Web Hosting
Website Templates

MAKE MONEY

Sell Domain Names
Sell Website Templates

| | | | |