Shoutbox

My father has made a website, and most of it looks really nice. I told him to use stylesheets, and he listened But one problem arises when he wants to do some pictures: The pictures have some text accompanying them (my dictionary says the english word is caption..), and he wants the 2 pictures to be next to each other and have the text underneath them. He used this (yes, I know this code is really bad.. the rest is of the site is better, and has only minimal errors, which will be fixed)

code:

---

<h1>Header</h1>
<p>Firstname Surname

<div align="right">Firstname Surname</div>

<img src="images\firstname.jpg" alt="Hier zou een foto van Firstname Lastname
te zien moeten zijn" height="442" width="324" align="left"
title="Firstname Lastname">

<img src="images\else.jpg" alt="Hier zou men een foto van Firstname Lastname kunnen zien" height="316" width="473" title="Firstname Lastname">

<p>

<img src="images\img2.jpg" alt="Hier zou men een foto van [..]
kunnen zien" height="316" width="473" title="name name">

<div align="right">Firstname Lastname</div>

---

This works fine with IE6 @ 1024x768, but with any other browser, it doesn't look good. This is because my father just used some trial and error. Another problem is that he'd like to keep the lay-out in a stylesheet, and this code doesn't. My father wants it to display like this:

[image1]                                   [image2]
img1txt                                     img2txt
[image3]
img3txt

How can he do this? He'd prefer to do it without tables, and I'd like to keep the lay-out separate (with CSS?). Any help would be appreciated

edit: Made the text better
edit: Made the code better readable

Post Scriptum: Yes, the alt-text is bad. I've told him allready.

There's nothing wrong with using tables. Displaying the images the way you want can be classed as a structural decision, therefore tables are what to use.

Just set border="0" then no one will see that you are using tables.

You can't have a <div> inside a <p> tag (AFAIK anyway) - you could do it the other way around and have the <p> inside the <div> though.

<div style="float: left;">
<img blah><br>
Text blah
</div>

Tried that?
if you want to force a linebreak after one, put clear: right; in the stylesheet,
if you want the text to wrap under the picture, set the width of the div explicitly

code:

---

<img src="bla.jpg" alt="blabla" title="blabla" style="float:left;" />

img[title]:after {
content: attr(title);
display: block;
}

---

Set the width of the img:after to the width of the image.

This only works in Opera, so it's not a good solution. Wrap the text and picture in a floated div, as others have suggested.

honestly i used to bust my ass trying to set pictures straight with Html.. but now I just use front page a lot more simple lol

Easier for the head, Easier for u

quote:

---

Originally posted by raceprouk
There's nothing wrong with using tables. Displaying the images the way you want can be classed as a structural decision, therefore tables are what to use.

---

* user2319 thinks tables are for information, not images

quote:

---

Just set border="0" then no one will see that you are using tables.

---

Haha

quote:

---

You can't have a <div> inside a <p> tag (AFAIK anyway) - you could do it the other way around and have the <p> inside the <div> though.

---

My father doesn't close <p>aragraphs ( HTML4 )

Thanks, TheBlasphemer

quote:

---

This only works in Opera, so it's not a good solution. Wrap the text and picture in a floated div, as others have suggested.

---

Still thanks, but the main public of my father's website != Opera And I don't like browser-specific solutions

@lp15, I really *wouldn't* use Frontpage, or any WYSIWYG.

This is what i know have. I hope it's correct (I'm kind of new to CSS )

code:

---

<!-- Hoofdtekst -->
<h1>Enkele nazaten van Jan Adriaanse Wever</h1>
<div style="float: left;" width="324">
<img src="images/A.jpg" alt="foto A" height="442" width="324" title="A"><br>
A caption)
</div>

<div style="float: left;" width="473">
<img src="images/B.jpg" alt="foto B" height="316" width="473" title="B"><br>
B caption
</div>

<div style="float: left;" width="473">
<img src="images/C.jpg" alt="foto C" width="473" title="C)"><br>
C caption
</div>
</body>
</html>

---

Divs don't have any width attribute, put the width in the css instead.

code:

---

<div style="float:left;width:473px;">
not
<div style="float: left;" width="473">

---

Then you wont need the <br />-tags either.

quote:

---

Originally posted by EGIS
Divs don't have any width attribute, put the width in the css instead.

code:

---

<div style="float:left;width:473px;">
not
<div style="float: left;" width="473">

---

Then you wont need the <br />-tags either.

---

Agreed