[html+css] 2Pictures and caption - Printable Version
-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: [html+css] 2Pictures and caption (/showthread.php?tid=38406)
[html+css] 2Pictures and caption by user2319 on 02-13-2005 at 06:25 PM
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: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:
<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>
[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.
RE: [html+css] 2Pictures and caption by RaceProUK on 02-13-2005 at 07:19 PM
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.
RE: [html+css] 2Pictures and caption by x2zen on 02-13-2005 at 07:26 PM
Just set border="0" then no one will see that you are using tables.
RE: [html+css] 2Pictures and caption by Chris.1 on 02-13-2005 at 07:27 PM
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.
RE: [html+css] 2Pictures and caption by TheBlasphemer on 02-13-2005 at 07:30 PM
<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 
RE: [html+css] 2Pictures and caption by EGIS on 02-13-2005 at 07:56 PM
code:Set the width of the img:after to the width of the image.
<img src="bla.jpg" alt="blabla" title="blabla" style="float:left;" />
img[title]:after {
content: attr(title);
display: block;
}
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.
RE: [html+css] 2Pictures and caption by albert on 02-13-2005 at 08:19 PM
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 
RE: RE: [html+css] 2Pictures and caption by user2319 on 02-13-2005 at 08:36 PM
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:Haha
Just set border="0" then no one will see that you are using tables.
quote:My father doesn't close <p>aragraphs (
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.
HTML4 )Thanks, TheBlasphemer
quote:Still thanks, but the main public of my father's website != Opera
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.
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>
RE: [html+css] 2Pictures and caption by EGIS on 02-13-2005 at 09:12 PM
Divs don't have any width attribute, put the width in the css instead.
code:Then you wont need the <br />-tags either.
<div style="float:left;width:473px;">
not
<div style="float: left;" width="473">
RE: [html+css] 2Pictures and caption by TheBlasphemer on 02-13-2005 at 09:49 PM
quote:
Originally posted by EGIS
Divs don't have any width attribute, put the width in the css instead.
code:Then you wont need the <br />-tags either.
<div style="float:left;width:473px;">
not
<div style="float: left;" width="473">
Agreed
RE: RE: [html+css] 2Pictures and caption by user2319 on 02-14-2005 at 06:03 PM
quote:
Originally posted by EGIS
Divs don't have any width attribute, put the width in the css instead.
code:Then you wont need the <br />-tags either.
<div style="float:left;width:473px;">
not
<div style="float: left;" width="473">
