Hey there! I'm fairly new to web design and recently created a site with 2 ap divs to position images in my header. Everything looked great on my laptop, but when I viewed it on a 24-inch monitor, the positioning was completely off. Here's the CSS code I used:
I would really appreciate any guidance you can offer me in fixing this issue.
Thanks in advance!
<body>
<div id="header"><h1 class="logo"> FISH NORTH WEST</h1></div> <!-- end of header -->
<div id="headtest">
<div id="apDiv1"><img src="images/kingfisher38.png" height="208" /></div>
<div id="apDiv2"> <img src="images/monaghan_bream.png" /> </div>
</div> <!-- End of testdiv>*/-->
<div id="bodyhome">
<ul>
<li id="active"><a href="Index.html">Home</a></li>
<li><a href="Lakes.html">Where to Fish</a></li>
<li><a href="specimenfish.html">Specimen Fish</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="Prebait.html">Pre Bait</a></li>
<li><a href="memberscode.html">Members Area</a></li>
<li><a href="Testimonials.html">Testimonials</a></li>
<li><a href="reservations.html">Reservations</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
#headtest
{ margin:0 auto; position:relative; width:900px }
#apDiv1
{
position:absolute;
width:308px;
height:174px;
z-index:1;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 30px;
left: 179px;
top: -14px;
}
#apDiv2
{
position:absolute;
z-index:1;
left: 727px;
top: -190px;
width: 385px;
height: 220px;
}