Using CSS to Make Several Inline Images (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message


Xplorer4x4 -> Using CSS to Make Several Inline Images (5/22/2007 2:31:33)

I am trying to create bassicly the same effect as you see here:
http://www.wwe.com/superstars/raw/

The images in rows with the background light grey background.
I tried using the CCS sheet http://www.wwe.com/styles/v3/global.css?2 in my lay out but it does not align the images in such fashion.

Any help would be very appreciated.

Thanks in advance!

The link to my site is:
http://ccwwrestling.5gbfree.com/roster.php




Tailslide -> RE: Using CSS to Make Several Inline Images (5/22/2007 2:51:51)

Several things -

Firstly, if you're going to be using CSS then you need a complete DOCTYPE otherwise browsers are thrown into Quirks mode and behave unpredictably. Try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Next you're using tables to lay out the page so I'm not sure how well the solution will work in amongst all those table cells!!

Anyway - tables aside I'd structure it like this:

HTML:

<div class="wrestlers">
   <img src="whatever.jpg" alt="wrestler's name goes here" height="90" width="90" >
   <h3>Wrestler's Name here</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse cursus malesuada ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

<div class="wrestlers">
   <img src="whatever.jpg" alt="wrestler's name goes here"  height="90" width="90" >
   <h3>Wrestler's Name here</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse cursus malesuada ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
 
<div class="wrestlers">
   <img src="whatever.jpg" alt="wrestler's name goes here"  height="90" width="90" >
    <h3>Wrestler's Name here</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse cursus malesuada ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>


CSS:

div.wrestlers {background-color:#e2e2e2;width:600px;margin-bottom:10px;}
div.wrestlers img {float:left; margin:5px;}
div.wrestlers h3 {font-size:90%;margin:5px 0 8px 110px;}
div.wrestlers p {margin: 2px 10px 8px 110px;}


Things to note:

The paragraph and headings are given a margin comensurate with the width of the photo plus a little bit more to make it look neat. If the photo is too small then the paragraph will end up under it and won't look so neat.

You can obviously add styling information such as colours and fonts into the rules above to change the look - you don't need to add anything into the tags themselves.

You can re-use classes as I have done in this example, as many times as you like on a page - however you can only use ids once.

Here's a working example:

http://www.littleblueplane.com/test/wrestlers.html

And this version: http://www.littleblueplane.com/test/wrestlers1.html takes into account the fact that you might want more than a single photo in the section - slightly different CSS in there, look at the source to see what I've done.




Xplorer4x4 -> RE: Using CSS to Make Several Inline Images (5/22/2007 3:14:39)

My page did not turn out as well as yours :s
http://ccwwrestling.5gbfree.com/roster.php

Where did i go wrong?

Also how can i make a CSS Definition that will change the font color because as you see it does not look to good on my site. I can modify the color myself but I know little to nothing about CSS.

Thanks but one pics per wrestler will do!

EDIT: Ok well I have got things working and all but it would be nice to be able to do it inside the table if at all possible.




Tailslide -> RE: Using CSS to Make Several Inline Images (5/22/2007 7:27:34)

You change the rules like this:

div.wrestlers {color:#000000; font-family: Arial, Verdana, sans-serif; background-color:#e2e2e2;width:600px;margin-bottom:10px;}
div.wrestlers img {float:left; margin:5px;}
div.wrestlers h3 {font-size:90%;margin:5px 0 8px 110px;}
div.wrestlers p {margin: 2px 10px 8px 110px;}


I've added the font colour #000000 (black) to the div so that all text within the div will be black unless overruled later on. I've added a font declaration too - Arial in this case with Verdana as a backup - you can change it to how you want it. If you want the heading to be a different colour then add color:whatever to the h3 rule in the same way.




Xplorer4x4 -> RE: Using CSS to Make Several Inline Images (6/2/2007 13:17:24)

Could you possible repost the page wrestlers2.html so i can see the CSS on how to do the multiple image thing?

Sorry for the belated response but I have not had internet access. Thank you for all your help!




Tailslide -> RE: Using CSS to Make Several Inline Images (6/2/2007 14:00:10)

Here you go: http://www.littleblueplane.com/test/wrestlers1.html




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125