Ap Div定位

嗨，我已經足夠新的網頁設計，並已與2 ap div的網站定位圖像在我的標題。這一切看起來可愛的我的筆記本電腦，但是當我檢查出來一個24英寸的顯示器上的定位是所有的地方，我的繼承人CSSAp Div定位

請點我在正確的方向

感謝所有

<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

{margin：0 auto; 位置：相對; 寬度：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; 
}

來源

2011-04-23 martin

你能鏈接到頁面嗎？或提供截圖？此外，更好的解釋什麼是預期與發生什麼是錯誤的。 – 2011-04-23 14:17:17

抱歉它還沒有在線，我不能發佈圖像，直到超過10的代表，但基本上我設計我的網站在筆記本電腦上的2個圖像在Ap Div每個對齊我的網站名稱的左側和右側，當我嘗試它在24英寸監視器上這些圖像不對齊，我把它們放在哪裏 – martin 2011-04-23 14:34:34

http://img705.imageshack.us/i/apdiv.png/ – martin 2011-04-23 14:49:02

看起來你正在所以需要設置一些「定位上下文」等的元件，這些2周的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 
}

來源

2011-04-23 14:31:16

的html嘗試，並且它只是將我的圖像移動到更多的繼承人屏幕截圖的鳥在F的魚和魚的男人是在文本的末尾http://img705.imageshack.us/i/apdiv.png/ – martin 2011-04-23 14:47:20

首先你不需要這麼多的div標籤。您可以直接在圖像上工作。正如我可以看到你想要實現的是在標題的最左邊和最右邊獲得一個圖像。你不需要位置：絕對的。一個簡單的浮動：留在第一個圖像和浮動：右邊第二個會讓你在那裏。另外，爲圖像設置一個寬度，最好是左/右填充，以便它們不會進入屏幕的邊緣。

類似：

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

僅僅調整了長度，以根據自己的喜好/需求。希望它有幫助。

來源

2011-04-23 15:16:47 Maverick

感謝您的幫助 – martin 2011-04-23 15:39:42

你解決了這個問題嗎？ – Maverick 2011-04-23 16:05:26

回答

相關問題