|
| |
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
 |
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.
< Message edited by Tailslide -- 5/22/2007 3:01:00 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
|
|
|
|
Xplorer4x4
Posts: 18
Joined: 5/22/2007
Status: offline
|
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.
< Message edited by Xplorer4x4 -- 5/22/2007 5:50:36 >
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Xplorer4x4
Posts: 18
Joined: 5/22/2007
Status: offline
|
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!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
