homepage Welcome to WebmasterWorld Guest from 54.205.254.108
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

    
Images
css
kaymeis




msg:4035383
 1:58 pm on Dec 2, 2009 (gmt 0)

What's the code for getting images in a straiggt line across the screen?

 

CSS_Kidd




msg:4035405
 2:35 pm on Dec 2, 2009 (gmt 0)

If you are talking about background images, which I am sure you are, here is an example:

body {
background: url(../images/your_image.png) repeat-x;
}

it is the "repeat-x" that makes it repeat horizontally. for a vertical repeat, it would be "repeat-y" (but without the quotes of course.)

kaymeis




msg:4035495
 4:20 pm on Dec 2, 2009 (gmt 0)

I dint make myself clear: I meant 4 photos side by side in a straight row

CSS_Kidd




msg:4035505
 4:33 pm on Dec 2, 2009 (gmt 0)

Well in that case... give them all the same class with a float like so:

CSS-
.image_float {float: left;}
/*add margins and padding if you want*/
/*Along with any other atributes*/

/*I always add a clear float div*/
/*So the fallowing content will set right*/
.clear_float {clear: both;}

HTML-
<img src="../images/your_image1.png" class="image_float" />
<img src="../images/your_image2.png" class="image_float" />
<img src="../images/your_image3.png" class="image_float" />
<div class="clear_float"></div>

Of course you can use a wrapping div to contain it better but this is the basic of what you are looking for.

I really striped that down to the bare bones. So I hope you understand it.

D_Blackwell




msg:4035542
 5:40 pm on Dec 2, 2009 (gmt 0)

<img> is an inline element to start with - which begs the question of why special treatment, such as floats, are needed? I would want to know more about the problems and the needs before selecting a solution.?

CSS_Kidd




msg:4035554
 5:54 pm on Dec 2, 2009 (gmt 0)

I would want to know more about the problems and the needs before selecting a solution.?

Good point D_Blackwell

As far as floating the <img>, I guess I do that out of habit from when IE 5.5 had issues with white space and padding/margins around inline objects.

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