與CSS佈局，div定位，對齊和Z指數的問題

我真的很苦惱與這一個。下面是我想要實現的佈局的圖像。它有一些疊加等等。希望圖像能解釋更多關於外觀的信息，我對內容中的兩個cols有真正的麻煩。我似乎無法將它們放在一起，背景將顯示在底部，而頁腳顯示在下方。與CSS佈局，div定位，對齊和Z指數的問題

我希望這是有道理的。

還有一件事，兩列應該比它在圖片上顯示的方式稍高一點，它們應該出現在仍然在內容中的#mainImage div之上，而不是在下面。 Site design layout

UPDATE

我已經更新了代碼，希望給你什麼，我以後是一個更好的理解和我遇到的問題。

<html> 
<head> 
<style type="text/css"> 
body { 
    background-color: #c0cdd7; 
    color: #444444; 
    background-repeat: no-repeat; 
    margin: 0px; 
    padding: 0px; 
    text-align: left; 
    font: normal normal 13px Arial, 'Lucida Grande', Verdana, Sans-Serif; 
} 
.wrapper { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#logo { 
    position: absolute; 
    background-color: white; 
    margin-left: 30px; 
    z-index: 10; 
    background-position: 0px 0px; 
    background-repeat: no-repeat; 
    background-image: url(../images/logo.gif); 
    height: 100px; 
    width: 300px; 
} 

#header { 
    background-color: white; 
    height: 50px; 
    text-align: right; 
    width: 100%; 
} 

#navigation { 
    margin-left: 330px; 
    position: absolute; 
    margin-right: 30px; 
    font-weight: bold; 
    letter-spacing: 1px; 
    word-spacing: 5px; 
    font-size: 11px; 
    color: #6caddf; 
    margin-top: 25px; 
    text-transform: uppercase; 
    text-align: right; 
    padding-bottom: 5px; 
    padding-top: 5px; 
    width: 600px; 
} 

#navigation li { 
    padding-left: 10px; 
    padding-right: 10px; 
    border-right-color: #cccccc; 
    border-right-width: 1px; 
    border-right-style: solid; 
    list-style-type: none; 
    display: inline; 
} 

#navigation li.last { 
    border-right-style: none; 
    list-style-type: none; 
} 

#navigation li.active a { 
    font-weight: bold; 
    color: #6caddf; 
    list-style-type: none; 
} 

#mainImage { 
    background-color: #0b0b0b; 
    position: relative; 
    height: 400px; 
    width: 960px; 
    z-index: 1; 
    margin-top: 0px; 
} 

#content { 
    position: relative; 
    padding: 30px; 
    margin-top: -60px; 
    width: 840px; 
    margin-left: 30px; 
    margin-right: 30px; 
    background-color: white; 
    z-index: 15; 
} 

#content .col1 { 
    text-overflow: ellipsis; 
    z-index: 0; 
    width: 250px; 
} 

#content .col2 { 
    float: right; 
    padding-left: 30px; 
    margin-left: 250px; 
    z-index: 0; 
    width: 570px; 
} 

#footer { 
    border-top-color: #888888; 
    border-top-width: 1px; 
    border-top-style: dotted; 
    color: #888888; 
    padding: 30px; 
    clear: both;  
} 

#copyright { 
    color: #888888; 
    padding: 30px; 
    clear: both; 
    text-align: left; 
    font-size: 9px; 
} 
</style> 
<body> 
<div id="header"> 
    <div class="wrapper"> 
    <div id="logo"></div> 
    </div></div> 
    <div class="wrapper"> 
    <div id="mainImage"> 
    </div> 
    <div id="content"> 
    <div class="col1"><h1>Title</h1><p>Heights on these columns do not matter, just the positioning<br/>Hopefully you can see from this example that the columns aren't aligned, and the white background doesn't flow all the way down.</p></div> 
    <div class="col2"><h1>Title</h1><p>Aliqui sita sint omnimaio corporporem. Nequam, nobis nis endam, omnis porecto experuptatae plitibus aped moditaquo te velia ventemporro commolu ptatum re pa si que cullaborem et molupta tiorit vendam, ulliquu ndeserc idest, optur? Quide cusdandel ipsandunt as ipsum reria corehendae vendipi ciisqui omnia nis re coriatu resciis eaquam fuga. Nam, sit res evendamus diam fuga. Odis quae num quibus consequamus expera alit fugiam, odis et volut ant aut vollaborae conecum rem quam fuga. Quis dolut poribus solorias sincias est velestiberum as quo tem ipsandit quaescienist volore dolum fuga. Ovid magnatque volum faciten imusam elentis auta quisquae parum quatur, optatur? At vitati ulpa velendis none preicit, sita quiatiaes evenihi llorum dis issimpe rchicitior solorepelit ut veliciant. Ur? Quia acime omniendipiet andis</p></div> 
    </div> 
    <div id="footer"> 
    <p>Just you standard footer/copyright info to go here 2011</p> 
    </div> 
    </div> 
    </div> 
</body> 
</head> 
</html>

來源

2011-02-25 jimbo

你有一個活生生的例子，我們可以看到什麼？ :) http://jsfiddle.net/Kyle_Sevenoaks/Ehs8Y/ – Kyle 2011-02-25 13:18:32

目前的標記有什麼問題？ – Sotiris 2011-02-25 13:21:02

下次請爲您的問題考慮一個更好的標題。想象一下，如果每個有CSS佈局問題的人都會使用該標題.. :) – Sander 2011-02-25 13:25:47

並排的div應浮動左邊，然後把他們一個明確的元素。

在這裏你去：

<style> 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } 

body { 
    background-color: #c0cdd7; 
    color: #444444; 
    background-repeat: no-repeat; 
    margin: 0px; 
    padding: 0px; 
    text-align: left; 
    font: normal normal 13px Arial, 'Lucida Grande', Verdana, Sans-Serif; 
} 

div { 
    border: 1px solid red; 
    margin:-1px; 
} 

.wrapper { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#logo { 
    position: absolute; 
    background-color: white; 
    margin-left: 30px; 
    z-index: 10; 
    background-position: 0px 0px; 
    background-repeat: no-repeat; 
    background-image: url(../images/logo.gif); 
    height: 100px; 
    width: 300px; 
} 

#header { 
    background-color: white; 
    height: 50px; 
    text-align: right; 
    width: 100%; 
} 

#navigation { 
    margin-left: 330px; 
    position: absolute; 
    margin-right: 30px; 
    font-weight: bold; 
    letter-spacing: 1px; 
    word-spacing: 5px; 
    font-size: 11px; 
    color: #6caddf; 
    margin-top: 25px; 
    text-transform: uppercase; 
    text-align: right; 
    padding-bottom: 5px; 
    padding-top: 5px; 
    width: 600px; 
} 

#navigation li { 
    padding-left: 10px; 
    padding-right: 10px; 
    border-right-color: #cccccc; 
    border-right-width: 1px; 
    border-right-style: solid; 
    list-style-type: none; 
    display: inline; 
} 

#navigation li.last { 
    border-right-style: none; 
    list-style-type: none; 
} 

#navigation li.active a { 
    font-weight: bold; 
    color: #6caddf; 
    list-style-type: none; 
} 

#mainImage { 
    position: relative; 
    height: 400px; 
    width: 960px; 
    z-index: 1; 
    margin-top: 0px; 
    background-color:red; 
} 

#content { 
    position: relative; 
    padding: 30px; 
    margin-top: -60px; 
    width: 840px; 
    margin-left: 30px; 
    margin-right: 30px; 
    background-color: white; 
    z-index: 15; 
} 

#content .col1 { 
    text-overflow: ellipsis; 
    z-index: 0; 
    width: 250px; 
    background-color:red; 
    float:left; 
    border:0; 
    height:300px; 
} 

#content .col2 { 
    z-index: 0; 
    width: 570px; 
    background-color:green; 
    float:left; 
    margin-left:20px; 
    border:0; 
    height:300px; 
} 

#footer { 
    border-top-color: #888888; 
    border-top-width: 1px; 
    border-top-style: dotted; 
    color: #888888; 
    padding: 30px; 
    clear: both;  
} 

#copyright { 
    color: #888888; 
    padding: 30px; 
    clear: both; 
    text-align: left; 
    font-size: 9px; 
} 

.clr {clear:both;} 
</style> 

<div id="header"> 
    <div class="wrapper"> 
     <div id="logo"></div> 

     <ul id="navigation"> 
      <li><a href="#">Item</a></li> 
      <li><a href="#">Item</a></li> 
      <li><a href="#">Item</a></li> 
      <li><a href="#">Item</a></li> 
     </ul> 
    </div> 
</div> 

<div class="wrapper"> 

    <div id="mainImage"></div> 

    <div id="content"> 
     <div class="col1">&nbsp;</div> 
     <div class="col2">&nbsp;</div> 

     <div class="clr"></div> 
    </div> 

    <div id="footer"></div> 

    <div id="copyright"></div> 
</div>

代碼仍然是混亂，但你的問題已經解決。

來源

2011-02-25 13:35:22 demux