dog
06-12-2006, 04:12 PM
Hello,
I have a div that contains an image ("foto") and button to close it ("Fechar").
This div is meant to sit in the centre of the page and hold the button in position over the image and provide a nice simple border around the whole thing.
The problem is, now that it's online the width isn't being restricted, and so the border goes almost to the edge fo the window and the button sits way off of the image.
The HTML looks like this:
<body>
<div id="foto1" style="display: none">
<img src="images/modo-fotos/vizu02.jpg" width="398" height="550">
<div class="closeButton">
<a href="#" onClick="togglegal(foto1, container);">Fechar</a>
</div>
</div>
</body>
...and the CSS like this:
body {
text-align: center;
}
#foto1,#foto2,#foto3,#foto4,#foto5,#foto6,#foto7,#foto8,#foto9,#foto10,#foto11,#foto12 {
margin: 30px auto;
position: relative;
border: #695226 solid 1px;
border-width: 1px 1px 2px 1px;
padding: 0;
}
div#foto1 {
width: 398px;
}
Any ideas?
I have a div that contains an image ("foto") and button to close it ("Fechar").
This div is meant to sit in the centre of the page and hold the button in position over the image and provide a nice simple border around the whole thing.
The problem is, now that it's online the width isn't being restricted, and so the border goes almost to the edge fo the window and the button sits way off of the image.
The HTML looks like this:
<body>
<div id="foto1" style="display: none">
<img src="images/modo-fotos/vizu02.jpg" width="398" height="550">
<div class="closeButton">
<a href="#" onClick="togglegal(foto1, container);">Fechar</a>
</div>
</div>
</body>
...and the CSS like this:
body {
text-align: center;
}
#foto1,#foto2,#foto3,#foto4,#foto5,#foto6,#foto7,#foto8,#foto9,#foto10,#foto11,#foto12 {
margin: 30px auto;
position: relative;
border: #695226 solid 1px;
border-width: 1px 1px 2px 1px;
padding: 0;
}
div#foto1 {
width: 398px;
}
Any ideas?