Welcome to WebmasterWorld Guest from 54.160.221.82

Forum Moderators: not2easy

Message Too Old, No Replies

Images

css

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

Junior Member

10+ Year Member

joined:Jan 26, 2006
posts:198
votes: 0


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

Full Member

5+ Year Member

joined:Mar 3, 2009
posts: 227
votes: 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.)

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

Junior Member

10+ Year Member

joined:Jan 26, 2006
posts:198
votes: 0


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)

Full Member

5+ Year Member

joined:Mar 3, 2009
posts: 227
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 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.?
5:54 pm on Dec 2, 2009 (gmt 0)

Full Member

5+ Year Member

joined:Mar 3, 2009
posts: 227
votes: 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members