Forum Moderators: not2easy
<HTML><TITLE>Guava products</TITLE>
<HEAD>
<STYLE TYPE="text/css">
<-- div.float {
float: left;
}
div.float p {
text-align: left;
}
div.float p {
image-align: left;
} -->
</STYLE>
</HEAD>
<BODY bgcolor="#FF00FF" background="blu_bg.gif" text="#FFCC00" vlink="#FFCC00" alink="#FF00FF" leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<div align="center"><img src="guava_logo_2004.gif" width="595" height="253" border="0"><br>
<div class="float">
<img src="test.jpg" width="100" height="100"
alt="image 1" /><br />
<p>caption 1</p>
</div>
<div class="float">
<img src="test.jpg" width="100" height="100"
alt="image 2" /><br />
<p>caption 2</p>
</div>
<div class="float">
<img src="test.jpg" width="100" height="100"
alt="image 3" /><br />
<p>caption 3</p>
</div>
anyway, this puts the text on the left and the images in the center, and instead of having images on each row theres 1 image per row and it just goes straight down the center! this will not do of course. i need them to go across and then down as needed. if you know of something i can read that tells me exactly how to do this then link me and i can read it myself. i just don't even know what to look for. in advanced all help is appreciated
So, I might try the following html code:
<table>
<tr>
<td><img src="image1.gif" alt="image1"><br />
Caption 1</td>
<td><img src="image2.gif" alt="image2"><br />
Caption 1</td>
<td><img src="image3.gif" alt="image3"><br />
Caption 1</td>
</tr>
</table>
Take away the table's borders, adjust padding and cellspacing as you desire, add a class:
.center {
text-align: center;
}
to your stylesheet and a class="center" to the table tag and you should have it.
Note, however, that css junkies like myself will not adore this idea, as it rides the fence between using tables for data and tables for layout. At the very least, don't try to nest that table inside another table.
A purely css way of doing it might be to add a containing div for each "row." Try this:
<html>
<head>
<style>
.container {
width: 200px;
}
.float {
float: left;
}
.float p {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="float">
<img src="test.jpg" width="100" height="100"
alt="image 1" /><br />
<p>caption 1</p>
</div>
<div class="float">
<img src="test.jpg" width="100" height="100"
alt="image 2" /><br />
<p>caption 2</p>
</div>
</div>
<div class="container">
<div class="float">
<img src="test.jpg" width="100" height="100"
alt="image 1" /><br />
<p>caption 1</p>
</div>
<div class="float">
<img src="test.jpg" width="100" height="100"
alt="image 2" /><br />
<p>caption 2</p>
</div>
</div>
</body>
</html>
One more suggestion: get all the styling out of the body tag and into a stylesheet, be it external or between <style> tags in the head.
<html>
<head>
<style type="text/css">
body {
color: #FF00FF;
background-image: url(blu_bg.gif); }
.center {
text-align: center;
}
</style>
</head>
<body>
<div align="center"><img src="guava_logo_2004.gif" width="595" heaight="253" border="0"<br>
<table class="center">
<tr>
<td><img src="test.jpg" alt="image1"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image2"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
Caption 1</td>
</tr>
</table>
ok, the images are how they should be but they go straight across and off the screen instead of wrapping around. how do i get them to wrap?
Better yet, ditch the centering div altogether and just add class="center" to the <img> tag.
Two, your images are running off the page because (a) you did not set a width for your table, and (b) you've put about a dozen cells, each holding a 100px wide image, in a single row.
IF you insist on using the table, you'll want to specify a width (in pixels or percentages), then code in exactly how many images are to go on each row. The browser is going to read your table tags and give you exactly what you ask for (this is one reason so many designers like using tables for layout, they feel more confident that tables will give them exactly what want). You've asked your browser for a single table row that adds up to over 1000 pixels and that's what it's giving you (plus a horizontal scroll bar to see it all).
You'll need to change your code to this:
<table style="text-align: center; width: 600px;"">
<tr>
<td><img src="test.jpg" alt="image1"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image2"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
</tr>
<tr>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
</tr>
<tr>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
<td><img src="test.jpg" alt="image3"><br />
Caption 1</td>
</tr>
</table>
This sets up three rows of three cells, with one image and caption centered in each cell.
Similarly, the <div> option detailed in the last post does the same thing, each <div class="float> creating a new row of images and captions. (Note: the <div> version would probably wrap if it were all one <div> but it wouldn't do it reliably or consistently on different browsers.
I really hate to admit it, but I think even I would use the table on this one...
<tr>
<td><A CLASS="item" HREF="Caption 1"><IMG SRC="test.jpg" border=0></A><br />
Caption 1</td>
i havent tried it yet but i dont htink its going to work. does anyone have suggestions for this particular thing im trying to do. ive read how to do both but not both at once.
I hope that this helps you to solve your problem.
To make the image and the caption a link, change your code to this...
<td><A CLASS="item" HREF="Caption 1"><IMG SRC="test.jpg" border=0><br />
Caption 1</A></td>
...this moves the closing tag to after the caption, including it in the link without having to repeat the <a> tag for the text.
To change the link color on mouseover, you need to set up four pseudoclasses for your link tags in the stylesheet, like this...
a:link {color: #originalcolor;}
a:visited {color: #originalcolor;}
a:hover {color: #newcolor;}
a:active {color: #originalcolor;}
...they MUST be in that order (mneumonic: LoVe/HAte) or it will not work. You will also want to set your <img> tag to...
img {
border:0;
}
...Hope this helps.
createErrorMsg
That is a truly excellent link :)
Thanks!
I have kind of a ton of pretty good links bookmarked, and tabed on my advant browser that I refer to often while learning how to do all of this.
I think that this link is the best out there for showing someone how to do your thumbs in css. Its also very well written even for a beginner in css. Or at least, as a beginner/slightly advanced learner I think it is.;)
I ran across another one that shows you how to use a dl to do the pictures with the captions. If I can find it I'll post it as well, if that is allowable. If so I guess I would just post it as a seperate thread as not to go off subject here?
