PDA

Click to See Complete Forum and Search --> : resizing images again!

dennic
03-05-2003, 05:08 AM
hi

i submitted this question before but was unable to find the correct answer can someone please help me??

when my page is viewed on a screen that is minised, the images can go over the top of the text. i need it so the images never overlap anything.

web address

www.capricornstone.com.au

here is the code

<html>

<head>
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<title>Capricorn Stone - Sandstone</title>

<style type="text/css">
<!--
img {border:0px}
-->
</style>

<style>

#sandstone {position: absolute; left:318px; top:23px}
#capbuff1 {position: absolute; left:40px; top:188px}
#capbuff2 {position: absolute; right:50px; top:188px}
#capbuff3 {position: absolute; left:310px; top:188px}
#capbufftext {position: absolute; right:260px; top:368px}
#photoA {position: absolute; left:30px; top:450px}
#photoB {position: absolute; right:40px; top:450px}
#heritageRose {position: absolute; left:320px; top:450px}
#heritagetext {position: absolute; left:240px; top:630px}
#yellow1 {position: absolute; right:50px; top:712px}
#yellow2 {position: absolute; left:50px; top:712px}
#yellowtext {position: absolute; right:240px; top:765px}
#photoF {position: absolute; right:50px; top:924px}
#photoH {position: absolute; left:50px; top:924px}
#browntext {position: absolute; right:260px; top:977px}
#photoG {position: absolute; right:200px; top:1120px}
#photoGtext {position: absolute; left:140px; top:1210px}
#footer {position: absolute; left:151px; top:1400px}

</style>

</head>

<body>

<br>
<br>
<br>
<br>

<center>
Below are examples of our quarry, colours and finished product.
</center>

<div id="sandstone">
<h2>Sandstone</h2>
</div>

<!--Capricorn Buff-->

<div id="capbufftext">

<!--Table 2-->

<table>

<tr>
<td>Colour:
<td><b>Capricorn Buff</b>
</tr>

<tr>
<td>Material Type:
<td><select id="materials">
<option>Blocks</option>
<option>Billets</option>
<option>Slabs</option>
<option>Paving</option>
<option>Ashlar Walling</option>
<option>Pool Surrounds</option>
<option>Housing Construction</option>
<option>Hydrasplit</option>
<option>Rockfaced Finish</option>
<option>Diamond Sawn Finish</option>
<option>Gang Sawn Finish</option>
<option>Bullnosed Finish</option>
<option>Pier Caps</option>
<option>Fireplaces / Hearths</option>
<option>Decorative and Moulded Work</option>
<option>Sawn to Size Modules</option>
<option>Crazy Paving</option>
<option>Ballast Walls</option>
<option>Others</option>
</tr>

</table>

</div>

<!--End of table-->

<div id="capbuff1">
<img src="images/photo1.gif" width=210 height=140 >
</div>

<div id="capbuff2">
<img src="images/photo2.gif" width=233 height=140 >
</div>

<div id="capbuff3">
<img src="images/photo3.gif" width=145 height=120 >
</div>

<!--Heritage Rose-->

<!--Table -->

<div id="heritagetext">

<table>

<tr>
<td>Colour:
<td><b>Heritage Rose</b>
</tr>

<tr>
<td>Material Type:
<td><select id="materials">
<option>Blocks</option>
<option>Billets</option>
<option>Slabs</option>
<option>Paving</option>
<option>Ashlar Walling</option>
<option>Pool Surrounds</option>
<option>Housing Construction</option>
<option>Hydrasplit</option>
<option>Rockfaced Finish</option>
<option>Diamond Sawn Finish</option>
<option>Gang Sawn Finish</option>
<option>Bullnosed Finish</option>
<option>Pier Caps</option>
<option>Fireplaces / Hearths</option>
<option>Decorative and Moulded Work</option>
<option>Sawn to Size Modules</option>
<option>Crazy Paving</option>
<option>Ballast Walls</option>
<option>Others</option>
</tr>

</table>

<!--End of table-->

</div>

<div id="photoA">
<img src="images/photoA.gif" width=230 height=143 >
</div>

<div id="heritageRose">
<img src="images/heritage11a.gif" width=150 height=122 >
</div>

<div id="photoB">
<img src="images/photoB.gif" width=220 height=143 >
</div>

<!--Yellow Banded-->

<div id="yellowtext">

<!--Table-->

<table>

<tr>
<td>Colour:
<td><b>Yellow Banded</b>
</tr>

<tr>
<td>Material Type:
<td><select id="materials">
<option>Blocks</option>
<option>Billets</option>
<option>Slabs</option>
<option>Paving</option>
<option>Ashlar Walling</option>
<option>Pool Surrounds</option>
<option>Housing Construction</option>
<option>Hydrasplit</option>
<option>Rockfaced Finish</option>
<option>Diamond Sawn Finish</option>
<option>Gang Sawn Finish</option>
<option>Bullnosed Finish</option>
<option>Pier Caps</option>
<option>Fireplaces / Hearths</option>
<option>Decorative and Moulded Work</option>
<option>Sawn to Size Modules</option>
<option>Crazy Paving</option>
<option>Ballast Walls</option>
<option>Others</option>
</tr>


</table>

<!--End of table-->

</div>

<div id="yellow1">
<img src="images/yellow18a.gif" width=141 height=163 >
</div>

<div id="yellow2">
<img src="images/brown15a.gif" width=141 height=163 >
</div>


<!--Brown Banded-->

<div id="browntext">

<!--Table-->

<table>

<tr>
<td>Colour:
<td><b>Brown Banded</b>
</tr>

<tr>
<td>Material Type:
<td><select id="materials">
<option>Blocks</option>
<option>Billets</option>
<option>Slabs</option>
<option>Paving</option>
<option>Ashlar Walling</option>
<option>Pool Surrounds</option>
<option>Housing Construction</option>
<option>Hydrasplit</option>
<option>Rockfaced Finish</option>
<option>Diamond Sawn Finish</option>
<option>Gang Sawn Finish</option>
<option>Bullnosed Finish</option>
<option>Pier Caps</option>
<option>Fireplaces / Hearths</option>
<option>Decorative and Moulded Work</option>
<option>Sawn to Size Modules</option>
<option>Crazy Paving</option>
<option>Ballast Walls</option>
<option>Others</option>
</tr>


</table>

<!--End of table-->

</div>

<div id="photoF">
<img src="images/photoF.gif" width=141 height=163 >
</div>

<div id="photoH">
<img src="images/photoH.gif" width=141 height=163 >
</div>

<!--Sunset-->

<div id="photoGtext">

<!--Table 6-->

<table>

<tr>
<td><b>Test Reports Available</b>

</tr>

</table>

<!--End of table 6-->

</div>

<div id="PhotoG">
<img src="images/photoG.gif">
</div>

<!--Footer-->

<div id="footer">

<CENTER>
<font size="-1">
Copyright ® Capricorn Sandstone. All Rights Reserved. This site was designed by <A HREF="http://www.dennic.com.au">Dennic.</a>
<br>
<br>
[<a href="main.html"> Home</a>
|<A HREF="sandstone.html"> Sandstone</a>
|<A HREF="quotes.html">Quotes</a>
|<A HREF="testimonials.html"> Testimonials</a>
|<A HREF="contact.html"> Contact Us </A>
]
</div>


</body>

</html>
Klyve1
03-06-2003, 06:28 AM
It doesn't do that for me?
boojum
03-06-2003, 06:13 PM
set your images to a negative z-index
dennic
03-08-2003, 05:05 PM
can you please give me an example with some code of how i set my images to a z-index
khalidali63
03-08-2003, 05:20 PM
in all the images put a style attribute.

style="z-index:1;" and so on..

Cheers

Khalid