jacourPremium
join:2001-12-11
Matthews, NC Reviews:
 ·RoadRunner Cable
·SureWest Cable
 ·AT&T Southwest
| Help on a simple HTML questionI am trying to do something very simple (I think). I have a page that displays like I want it to that looks sort of like this:
<body>
A whole bunch of text . . . blah, blah, blah
<div class="imagewrapper">
<div class="outer">
<div class="inner">
A series of clickable images go here formatted like this:
<div style="width:250px; font-size:80%;
text-align:center; float:left">
<a href="Name_of_my_page.html">
<img src="Name_of_my_image.jpg"
width="200" height="200" />
</div>
</div>
</div>
</div>
</body>
The image wrappers don't do much except define the areas in which to center the images, which all works the way I want it to (I get a series of 250px images with captions centered across the page which is what I want).
My last task is to insert a copyright notice a few lines below the images. The problem I am having is that whatever I try appears BEHIND the images, just slightly down from the big chunk of text. What I want is to display the text, then the image, then a gap, and then a centered copyright notice.
I tried inserting variants of this:
<div style="width:100%;font-size:x-small; position:absolute; text-align:center;">
Copyright 2012 XXXXXXX
</div>
after the closing div tag on the ImageWrapper but before the closing body tag. However, I get the text displayed in the same space at the images (i.e. the images overlay the copyright notice). What do I need to do in order to make the div for the copyright notice positioned BELOW the images? The problem seems to be the images floating over the text.
I have tried inserting top-margins and padding and a few other approaches. The only thing I have gotten to work is a bunch of BR tags to force the text below the images, but that is going to cause me problems in the long run as I might recycle the basic image wrapping code elsewhere on my site so I want to get this right. |
|
|
|
 cdruGo ColtsPremium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:5 | Your image wrapping div is floated. Clear the float and the text will appear below the floated div. |
|
| reply to jacour
clear:both in the copyright div style |
|
 usa2kBlessedPremium,MVM
join:2003-01-26
Canton, MI
kudos:3 | reply to jacour
FWIW also I don't see your closing "a" tag after the image content.
Perhaps its just a fragment here? |
|
jacourPremium
join:2001-12-11
Matthews, NC Reviews:
·RoadRunner Cable
·SureWest Cable
·AT&T Southwest
| reply to jacour
Thanks, I got it fixed by adding a style="display:inline-block" to the first ImageWrapper DIV. Is that what you mean by clearing the float? Is there a better way to do it? The images are floated so that they line up nicely across the inner-wrapper DIV, which they do.
As for the closing A tag, that was a cut and paste error. I had a text link below the pic so that that user can click the image or the text, and I didn't paste that part by accident.
Thanks . |
|
Reviews:
·AT&T Southwest
·Charter
| reply to jacour
This is more in line with what you want. You don't need, and probably shouldn't be using, all those divs but I don't know what else you are planning on doing.
<!doctype html>
<html>
<head>
<style>
img {
height:200px;
width:200px;
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<p>A whole bunch of text . . . blah, blah, blah</p>
<a href="Name_of_my_page.html">
<img src="your-image.jpg">
</a>
<p>Copyright 2012 XXXXXXX</p>
</body>
</html>
|
|
cdruGo ColtsPremium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:5 Reviews:
 ·Frontier FiOS
| reply to jacour
said by jacour:Thanks, I got it fixed by adding a style="display:inline-block" to the first ImageWrapper DIV. Is that what you mean by clearing the float?
Floating an element takes the element out of the normal flow of the page. If you assign a style of "clear:[both|left|right]" it will force the flow of the page to move down until the bottom of the floated element. |
|
jacourPremium
join:2001-12-11
Matthews, NC Reviews:
·RoadRunner Cable
·SureWest Cable
·AT&T Southwest
| said by cdru:Floating an element takes the element out of the normal flow of the page. If you assign a style of "clear:[both|left|right]" it will force the flow of the page to move down until the bottom of the floated element.
Thanks, that is a useful explanation. |
|
