Forum Moderators: not2easy
Specifically this one:
[gamexplain.com...]
Here's the CSS I'm using for it all of the pictures and descriptions on that page:
[gamexplain.com...]
Is there a way I can have each individual item be self-contained so that I can simply list them without absolute positioning? Only thing is that I need the description box below the game image to continue to have an overflow:auto command so the boxes all remain the same length.
I think if someone were able to help me with the formatting, it may give me a better understanding of how it works. Of course, I don't know how much that's asking for, but I'll appreciate any help I can get.
The only problem is that, to my knowledge, I won't be able to have the text box (below the image) remain at a fixed height, so that way if the text is enlarged, a scroll bar will appear as opposed to extending the entire box's length. That's the main reason why I'm using CSS for it.
Am I right? I really don't know.
If you have also specified the width of the container div, you won't need to specify when an individual box has to move down and start a new row, because, float:left; will do that automatically.
By specifying margins you will be able to create the desired amount of space around each individual box as well - and the distance between one row and the row beneath.
Problem is that the "captions" below the "images" will vary in length, thus it would make my page look odd with a bunch of boxes of varying length. I got around this by having my current webpage's layout (the absolute:position one) use an "overflow" command on the "captions" area specifically so only that area scrolled, leaving the image stationary. But with float, it scrolls the entire box, which is not what I wanted.
Maybe I can't do what I want in a method other from what I've already done?
Anyways, thanks so much for the help, though I might be back with more questions later ;)
Edit: Yup, I have a problem. The border isn't appearing around my object in firefox. Any ideas why? Also in Firefox, the <br class="clearboth"> command isn't pushing the next line down far enough. Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
<!--
.game
{
float: left;
width: 151px;
height: 113px;
border: 1px solid #000;
}
.caption
{
float: left;
width: 151px;
height: 120px;
overflow: auto;
}
</style>
</head>
<body>
<div class="game"><IMG SRC="/images-videos/starfoxassault/level1.jpg">
<div class="caption">Fortuna: Special Flag Locations</B><p class="videotext">Find all 5 special flag locations in Fortuna with this video. If you find them all in every level, "Demon Sniper" is unlocked for VS Mode!</p></DIV>
</body>
</html>
[gamexplain.com...]
with no scrollbar I mean.
