I want to do it the hard way! [Archive]

Click to See Complete Forum and Search --> : I want to do it the hard way!

Herbatic

Apr 16th, 2004, 07:43 PM

I'm hoping someone can help me with this, I know how to do what i want with a lot of ugly tables, but i want to do it more elegantly with div elements.

OK so what i'm trying to do:
It's a list of staff portraits, with a headshot on the left, and (left-aligned) next to it their name, and on the line below (but still next to the portrait) their position. Then below the picture, a horizontal rule (HR).

The problem is, if i left align the photo, then i can't get the rule (and the next staff portrait) to go below, they just go next to it.
And if I don't left-align it, I can't get multiple lines of text next to it!

Any ideas?

visualAd

Apr 17th, 2004, 12:33 AM

Can you post the HTML?

Herbatic

Apr 17th, 2004, 02:20 AM

I don't have complete html, but here's some pseudo-html to give an idea:

this is the almost-working, ugly tables method:

<table>
<tr><td>
<img ...> 
<b>Bob Smith</b><br>
Senior Architect<br>
<hr>
</td></tr>
<tr><td>
<img ...>
<b>Ted Jones</b><br>
Accountant<br>
<hr>
</td></tr>
... more people ...
</table>

the only thing wrong with this code (apart from using tables) is that the description under the persons name ends up under the photo not to the right like it should be.

if i ditch the table, then i have this problem: if the image is left aligned, i can't find any way to tell the next persons picture and info to start on the next line after the bottom of the image. if its not left aligned i can only write one line after it, not several.

does that make sense now? it seems like I am trying to do something very simple, but i just can't find how to make it work...

visualAd

Apr 17th, 2004, 03:12 AM

If you are using a tables:

<html>
<head>
<style type="text/css">
.mugshot {
width: 200px;
height: 200px;
border-width: 5px;
border: solid blue;
}
</style>
<body>
<table>
<tr>
<td>
<p><b>Dave Carter</b></p>
<img src="carterd.jpg" class="mugshot" />
</td>
<td>
<p>Manager</p>
</td>
</tr>
<td>
<p><b>Lesley Jeeves</b></p>
<img src="jeevesl.jpg" class="mugshot" />
</td>
<td>
<p>Sales Assistant</p>
</td>
</tr>
</table>
</body>
</html>

Tables are probably better in this case. There is nothing wrong with using them and they don't look messy.

If you really want an example using div's then let me know and I'll post something later.

Herbatic

Apr 17th, 2004, 03:29 AM

yeah you are right visualAd, that will work nicely.

I've been reading some articles recently about how tables for layout is an abuse of html, and we should all be using divs instead. i guess someone should make divs work better before we can ditch tables hey.

thanks for the code I'll use it, but if you can figure out a way to do it with div's that would be cool too

visualAd

Apr 17th, 2004, 05:33 AM

Originally posted by Herbatic
yeah you are right visualAd, that will work nicely.

I've been reading some articles recently about how tables for layout is an abuse of html, and we should all be using divs instead. i guess someone should make divs work better before we can ditch tables hey.

thanks for the code I'll use it, but if you can figure out a way to do it with div's that would be cool too
I'm niether for or against tables or divs. The way I see it - they are both widely supported by the vast majority of web browsers and which you choose depends on your requirements.

In my opinion, your problem is easiest to solve using tables, becuase in all honesty it is a table of employees which contains pictures and descriptions.

I've done a similar page using XHTML and style sheets. Here the stylesheet is controlling the layout of the page elements rather than the table:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Employees</title>
<style type="text/css">
.employee {
display: block;
height: 250px;
border-bottom: 3px solid black;
margin-bottom: 10px;
}

.leftside {
display: block;
float: left;
padding: 5px;
}

.mugshot {
display: block;
width: 200px;
height: 200px;
border-width: 5px;
border: solid blue;
}

.name {
position: relative;
font-weight: bold;
}

.description {
position: relative;
top: 25px;
}
</style>
</head>
<body>
<div class="employee">
<div class="leftside">
<div class="name">Dave Carter</div>
<img class="mugshot" src="carterd.jpg" alt="David Carter"/>
</div>

<div class="description">Manager</div>
</div>

<div class="employee">
<div class="leftside">
<div class="name">Lesley Jeeves</div>
<img class="mugshot" src="jeevesl.jpg" alt="Lesley Jeeves" />
</div>
<div class="description">Sales Assistant</div>
</div>
</body>
</html>

The advantages of using divs become clear when you look at the HTML. You can clearly see each employee has its own DIV and there is no formatting cluttering the HTML code.

Herbatic

Apr 17th, 2004, 06:30 AM

thanks!!
i've seen examples of using divs before, but when its an example for something that you're trying to do, it is so much more helpful
:D
someone give visualAd an award!