Welcome to WebmasterWorld Guest from 54.167.185.18

Forum Moderators: not2easy

Message Too Old, No Replies

Images

css

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

5+ Year Member



What's the code for getting images in a straiggt line across the screen?
2:35 pm on Dec 2, 2009 (gmt 0)

5+ Year Member



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

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

5+ Year Member



I dint make myself clear: I meant 4 photos side by side in a straight row
4:33 pm on Dec 2, 2009 (gmt 0)

5+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



<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.?
5:54 pm on Dec 2, 2009 (gmt 0)

5+ Year Member



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.