Ap Div Positioning

嗨，我是一个新的网页设计，并做了一个网站与2 apdiv定位图像在我的头。这一切在我的笔记本电脑上看起来都很可爱，但是当我在24英寸的显示器上查看时，位置到处都是，这是我的CSS

请给我指一下正确的方向

谢谢所有的

<body>

<div id="header"><h1 class="logo">&nbsp;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

{保证金:0汽车;位置:相对;宽度:900像素}

#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;
}

看起来你是相对于视口定位的，所以你需要设置一些"定位上下文"，比如一个元素，这两个div可以被定位:

<div id="container">
 <div id="apDiv1"></div>
 <div id="apDiv2"></div>
</div>
#container {
margin:0 auto; /* centered on the page */
position:relative; /* this will set the positioning context for your apDivs */
width:900px
}

首先，您不需要那么多div标记。你可以直接在图像上工作。正如我所看到的，你想要实现的是让一个图像在最左边，另一个在最右边的标题。这里不需要position:absolute。在第一张图片上使用一个简单的float:left，在第二张图片上使用float:right就可以了。另外，为图像的容器设置一个宽度，最好是一些左/右填充，这样它们就不会走到屏幕的边缘。

类似:HTML

<div id="header">
   <h1 class="logo">&nbsp;FISH NORTH WEST</h1>
    <img src="images/kingfisher38.png" height="208" id="apDiv1" />
    <img src="images/monaghan_bream.png" id="apDiv2" />
</div>

CSS

#header {
width:900px;
margin-left:auto;
margin-right:auto;
}
h1.logo {
text-align:center;
clear:both;
}
#apDiv1 {
float:left;
}
#apDiv2 {
float:right;
}

根据你的喜好/需要调整长度。

相关内容

最新更新

热门标签：