Forum Moderators: not2easy
I'd also like to be able to do the following two rowed table, the one with the Image and caption in CSS:
<table cellpadding="0" cellspacing="0" class="ImageTable" align="left">
<div id ="Image">
<tr>
<td><IMG SRC="image.jpg" border="0"></td>
<tr>
<td class="Caption">Image Caption: Caption</td>
</tr>
</div>
</table>
Is this possible? I'd also like to have it so that the "Image Caption" text does not expand the background.
[edited by: SuzyUK at 8:31 am (utc) on Feb. 25, 2006]
[edit reason] ooops sorry no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
<html>
<style>
.Heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 20px;
color: #FF0000;
margin: 3px 100px 3px 3px;
border-bottom-color: #000000;
}#Image {
float:left;
overflow:hidden;
}
table.ImageTable {
vertical-align: top;
background-color: #00ff00;
padding: 1px; margin: 3px 3px 3px 10px;
}
#Main {
overflow:hidden;
overflow-x: auto;
overflow-y: auto;
padding-top: 0px;
border: 1px solid #000000;
}
.Txt {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align:justify;
line-height: 16px;
color: #000000;
margin: 3px 10px 3px 10px;
}
A.Txt:link, A.Txt:visited {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
text-decoration: none;
}
A.Txt:hover {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
text-decoration: underline;
}
.Caption {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
</style>
<body>
<div id="Main">
<p class="Heading">This is a title!</p>
<table cellpadding="0" cellspacing="0" class="ImageTable" align="left">
<div id ="Image">
<tr>
<td><IMG SRC="image.jpg" border="0"></td>
<tr>
<td class="Caption">Image Caption: Caption</td>
</tr>
</div>
</table>
<p class="Txt">
Exttay otay ogay intoway eildfay illway otnay akemay anyway ensesay. Illfay exttay erehay. Isthay isway erewhay ethay illfay entencessay illway ogay, extnay otay ethay imageway onway ethay
eftlay otnay overway owingflay.<br /><br />
</p>
</div>
<br>
<div id="Main">
<p class="Heading">This is a title!</p>
<table cellpadding="0" cellspacing="0" class="ImageTable" align="left" width="100">
<div id ="Image">
<tr>
<td><IMG SRC="image.jpg" border="0"></td>
<tr>
<td class="Caption">Image Caption: Caption text does not overflow cell</td>
</tr>
</div>
</table>
<p class="Txt">
Exttay otay ogay intoway eildfay illway otnay akemay anyway ensesay. Illfay exttay erehay. Isthay isway erewhay ethay illfay entencessay illway ogay, extnay otay ethay imageway onway ethay
eftlay otnay overway owingflay.<br /><br />
</p>
</div>
</body>
</html>
first off trying to get the caption to display beside the image is easy it's just an HTML problem don't know whether it's a typo or you're unfamiliar with coding tables?
if the former remove the
<tr><td class="Caption"...>I'd also like to be able to do the following two rowed table, the one with the Image and caption in CSS:
The table does not need to have two rows, it needs to have 1 row and two columns, also are you aware that align="left" on a table makes it act like it is floated left?
to do the same in CSS you could use internal floats, something like
<div class="image-caption">
<img src..>
<div class="caption">your caption here</div>
</div>
.image-caption {float: left; width: 100%;}
.image-caption img {float: left; width: 100px;}
.caption {}
Suzy
I have changed the code:
<div id="Main">
<p class="Heading">This is a title!</p>
<table cellpadding="0" cellspacing="0" class="ImageTable" align="left" width="100">
<div id ="Image">
<tr>
<td><IMG SRC="image.jpg" border="0"></td><tr>
<td class="Caption">Image Caption: Caption text does not overflow cell</td>
</tr>
</div>
</table>
<p class="Txt">
Exttay otay ogay intoway eildfay illway otnay akemay anyway ensesay. Illfay exttay erehay. Isthay isway erewhay ethay illfay entencessay illway ogay, extnay otay ethay imageway onway ethay
eftlay otnay overway owingflay.<br /><br />
</p>
</div>
<div id="Main">
<p class="Heading">This is a title!</p>
<div id ="Image">
<table cellpadding="0" cellspacing="0" class="ImageTable" align="left" width="100">
<tr>
<td><IMG SRC="image.jpg" border="0"></td>
<tr>
<td class="Caption">Image Caption: Caption text does not overflow cell</td>
</tr>
</table>
</div>
<p class="Txt">
Exttay otay ogay intoway eildfay illway otnay akemay anyway ensesay. Illfay exttay erehay. Isthay isway erewhay ethay illfay entencessay illway ogay, extnay otay ethay imageway onway ethay
eftlay otnay overway owingflay.<br /><br />
</p>
</div>
The text lines up to the top in IE next to the image div, but it over flows the border of the Main div and into the next Main after that?
I tried the CSS image caption as well but the Caption appeared alongside the image, not underneath it.
but anyway are you looking to do someting like this? (I've added borders and cell numbers to try and make this easier)
<table cellpadding="0" cellspacing="0" border="1" class="ImageTable" align="left" width="100%">
<tr>
<td style="text-align: center;"><IMG SRC="image.jpg" border="0"><br />
Image Caption: CELL 1</td>
<td class="Txt">
CELL 2 <br>
Exttay otay ogay intoway eildfay illway otnay akemay anyway ensesay. Illfay exttay erehay. Isthay isway erewhay ethay illfay entencessay illway ogay, extnay otay ethay imageway onway ethay
eftlay otnay overway owingflay.</td>
</tr>
</table>
i.e. do you want the caption underneath the image in CELL 1 and the Text alongside both in CELL2?
<div class="imageandtext" style="background: #eee;"><div class="imageandcaption" style="float: left; margin: 0 10px 10px 0">
<IMG SRC="image.jpg" border="0" width="60" height="100">
<br>caption here
</div><p>Exttay otay ogay intoway eildfay illway otnay akemay anyway ensesay. Illfay exttay erehay. Isthay isway erewhay ethay illfay entencessay illway ogay, extnay otay ethay imageway onway ethay
eftlay otnay overway owingflay.</p>
<p>Exttay otay ogay intoway eildfay illway otnay akemay anyway ensesay.</p><br style="clear: both">
</div>
the "imageandcaption" div is floated to the left, you can margin around it as necessary and the <p>aragraphs of text will automatically do what you want.
The clear: both <br> is just a safety thing in case the image is longer than the text, a div like "imageandtext" (colored grey) will not stretch vertically to contain a floated element unless you give it some sort of special instruction to do so and this is the quickest one I could think of just now!
anyway see how you get on!
Good Luck
Suzy
:/
