thumbnail and text next to each other

konnor5092 · #1 (**permalink**) Jul 1st, 2007, 15:25

I have this looking how I would like, but it doesn't strike me as being the most efficient code. Just wondered whether it could be cleaned up further.

I have a small thumbnail on the left, with text on the right..

Code: Select all

<div id="bio">
    <img src="images/steve.jpg" alt="steve" class="image_float" />
    <p><font color="#ffffff"><b>Steve: </b></font>Bass<br />Bio</p>
</div>   
<div id="bio">
    <img src="images/steve.jpg" alt="steve" class="image_float" />
    <p><font color="#ffffff"><b>Rob: </b></font>Lead Guitar<br />Bio</p>
</div>
<div id="bio">
    <img src="images/steve.jpg" alt="steve" class="image_float" />
    <p><font color="#ffffff"><b>Roger: </b></font>Vocals<br />Bio</p>
</div>
<div id="bio">
    <img src="images/steve.jpg" alt="steve" class="image_float" />
    <p><font color="#ffffff"><b>Trevor: </b></font>Drums<br />Bio</p>
</div>

Code: Select all

#bio {
    clear:both;
}

#bio p {
    padding-top: 5px;
    padding-left: 2px;
}

.image_float {
    margin-top: 2px;
    margin-left: 3px;
    float: left;
}

Many Thanks,

Voodoochilli · #2 (**permalink**) Jul 1st, 2007, 15:54

I would get rid of the font tags and just style the text in the css eg

#bio p {
padding-top: 5px;
padding-left: 2px;
color:#fff;
font-weight:bold;
}

konnor5092 · #3 (**permalink**) Jul 1st, 2007, 16:02

If I want two different colours and one word bold in the same line don't I need it in the HTML?

pa007 · #4 (**permalink**) Jul 1st, 2007, 16:24

That should be a list. You can use a ul. Any presentational code should be in the CSS so get rid of the font elements and change the <b> to <strong>, the same eeffect but it has more meaning. If you want to apply a colour or anything to just a word or few words then use the span element. Like this:

Code: Select all

<p>I am <span class="name">Steve</span> and I like <span class="interest">Music</span>.</p>

Then CSS:

Code: Select all

span.name {
color: red;
}

span.interest {
color: blue;
}

Make sure you give spans a class or id as you will often use a few in a page and you don't want them to conflict.

Pete.

konnor5092 · #5 (**permalink**) Jul 1st, 2007, 16:45

thanks once again.

Use the same style for just one thumbnail and text on the page?

hschmitz · #6 (**permalink**) Jul 1st, 2007, 17:09

I see another problem with your code. Instead of using id="bio" for all the div's you should consider using classes. The reason for this is that id's should be unique across a page, i.e. there should always be only one element with a given id.

pa007 · #7 (**permalink**) Jul 1st, 2007, 17:41

I'd do something like this:

HTML:

Code: Select all

<ul>
<li><img src="img1.jpg" /><h3>Steve: </h3> Bass <span>Bio</span></li>
<li><img src="img2.jpg" /><h3>Rob: </h3> Lead Guitar <span>Bio</span></li>
<li><img src="img3.jpg" /><h3>Roger: </h3> Vocals <span>Bio</span></li>
<li><img src="img4.jpg" /><h3>Trevor: </h3> Drums <span>Bio</span></li>
</ul>

CSS:

Code: Select all

ul {
    list-style: none;
}

ul li {
    clear: left;
    color: orange;
}

ul li img {
    float: left;
    width: 100px;
    height: 100px;  
    border: none;
}

ul li h3 {
    display: inline;
    color: #fff;
}

ul li span {
    display: block;
}

You see how simple the html is. We do most of the work in the css. I've used h3's but that depends, you might use h2's if you haven't already got any. It just lets us know that they are headers of some kind. Unfortunately heading elements or block level elements which means they appear on their own seperate line so we need to turn them into an inline element if we want text to appear next to them. The span with display: block; applied just makes sure that the bio bit apears on a seperate line. We clear: left; the li's to make sure each one is on it's own line. You would obviously change the width and height to the correct size. Add text and margin/padding as you would normally.

Hope that's works for you.

Pete.

techunar · #8 (**permalink**) Jul 1st, 2007, 18:00

Nice and good solution Pete..
We just sometimes make things harder for ourself, I read somewhere there are 2000+ ways to write html/css

pa007 · #9 (**permalink**) Jul 1st, 2007, 18:05

It wouldn't suprise me. It's great because that means you can do so much with it but it's a pain because finding the right solution can be tricky sometimes. It's fun though, I like the problem solving-side of coding the best.

Pete.

konnor5092 · #10 (**permalink**) Jul 1st, 2007, 18:50

Cheers mate. I'm edging closer to that Donate button!

How would you layout my second screen shot above with just the one thumbnail and the text around it and below?

techunar · #11 (**permalink**) Jul 1st, 2007, 19:48

Yah thats good that there are several ways to do one thing, this helps alot when we develop something that is dynamic & cross-browser..

Quote:

Originally Posted by pa007

It wouldn't suprise me. It's great because that means you can do so much with it but it's a pain because finding the right solution can be tricky sometimes. It's fun though, I like the problem solving-side of coding the best.

Pete.

pa007 · #12 (**permalink**) Jul 1st, 2007, 21:04

How many of these would you have on each page? Would it be one band member per page or would all of the bio's be on a single page?

Pete.

konnor5092 · #13 (**permalink**) Jul 1st, 2007, 21:39

One small image in the top left per page, the rest text wrapped around the image and below.

Just float the image left?

pa007 · #14 (**permalink**) Jul 1st, 2007, 21:42

This works and I think it is pretty good. Someone will have to help me here. Does an image element have to be wrapped with anything other than a div or is it ok just sitting there? In this example it is within a div but nothing else, is that ok?

HTML:

Code: Select all

<div id="bio_main">
<img src="img1.jpg" alt="" /><h2>Steve: <span>Bass</span></h2> 
<p>BIO</p>
<p class="clear">Lorem ipsum dolor sit amet, consectetuer             adipiscing elit. Donec mattis, nulla ut auctor convallis, est urna tempor purus, eu congue dui augue vitae risus. Nunc faucibus placerat pede. Sed eu.</p>
</div>

CSS:

Code: Select all

div#bio_main img {
    float: left;
    width: 100px;
    height: 100px;    
}

div#bio_main h2 span {
    font-weight: normal;
    color: orange;
}

div#bio_main p.clear {
    clear: left;
}

Again play with the margin etc. to get the look you want. This should work fine, just waiting for feedback on the placement of the img tag issue.

If there is more than one band member on each page a list might be more appropriate. That will be more difficult to implement so give me a shout if that's the case.

Pete.

Lchad · #15 (**permalink**) Jul 1st, 2007, 23:03

I typically will have a div class as my container.

Inside the div class I will float an image left.
I will also add a margin-right and a margin-bottom so that my text does not touch the image.
Then I add <p>'s and put my text in.
The text will wrap around without touching the image.

konnor5092 · #16 (**permalink**) Jul 2nd, 2007, 11:51

Looks grand. Thanks for your help chaps.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to make a thumbnail using javascript?	FXDesigns	JavaScript Forum	7	Jan 21st, 2008 01:58
Help with Thumbnail popup windows	cjrollo	Flash & Multimedia Forum	6	Dec 7th, 2007 13:59
HELP - IE7 Thumbnail Images on a tab	ActionPart	Web Page Design	2	Jul 15th, 2007 13:00
Scrolling thumbnail	Dan Oliver	Flash & Multimedia Forum	1	Jun 6th, 2007 16:22
How does one make thumbnail images?	Picard	Website Planning	3	Dec 29th, 2006 13:34

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
thumbnail and text next to each other