Проблемы с компоновкой CSS, позиционированием div, выравниванием и z-index - PullRequest
Новая
       36

Проблемы с компоновкой CSS, позиционированием div, выравниванием и z-index

0 голосов
/ 25 февраля 2011

Я действительно борюсь с этим.Ниже приведено изображение макета, которого я хочу достичь.Он имеет несколько оверлеев и т. Д. Надеемся, что изображение больше объяснит внешний вид, у меня возникли реальные проблемы с двумя столбцами внутри содержимого.Кажется, я не могу собрать их вместе с фоном, идущим снизу, и нижним колонтитулом, показанным ниже.

Надеюсь, это имеет смысл.

Еще одна вещь, которой должны быть два colнемного выше, чем они отображают на изображении, они должны появляться над тегом #mainImage в пределах содержимого, но не ниже.Site design layout

ОБНОВЛЕНИЕ

Я обновил код, надеюсь, он даст вам лучшее понимание того, что мне нужно, и проблем, с которыми я сталкиваюсь. 

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

Ответы [ 4 ]

1 голос
/ 25 февраля 2011

Полагаю, проблема в расположении второго столбца.Удалить margin-left: 250px; padding-left: 30px; из #content .col2.Также добавьте float:left; для #content .col1.

Затем, чтобы очистить числа с плавающей запятой, добавьте overflow:auto в родительском div #content.

Если вы хотите иметь padding-left для второго столбца, то вам нужно отредактировать width соответственно.Например, если вы хотите padding-left:30px;, вы должны отредактировать ширину от #content .col2 до 540px.

Более подробную информацию о вышеупомянутой логике вы можете найти в объяснении блочной модели http://www.w3.org/TR/CSS21/box.html

Демо: http://jsbin.com/uqebi5

1 голос
/ 25 февраля 2011

Боксы рядом должны плавать влево, а затем за ними должен стоять прозрачный элемент.

Вот, пожалуйста, 

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

Код все еще грязный, но ваша проблема была решена.

1 голос
/ 25 февраля 2011

Трудно точно сказать, что вы ищете, тем более что ваш пример кода не является минимальным примером, но содержит вещи, не связанные с проблемой, не содержит текста, использует изображения, которые вы не предоставили, и обычно ничего не отображаетмне нравится ваша диаграмма, так что я на самом деле просто предполагаю, что вы пытаетесь иметь столбцы рядом друг с другом одинаковой высоты, не используя таблицы.

Есть много способов добиться этого, но это просто невозможно сделатьнепосредственно.Столбцы являются плавающими и поэтому не влияют на размер их контейнера, если только после этого вы не поместите очищающий элемент.Вы не получите их высоту одинаково, но вы можете заставить их казаться, что они есть.Одним из способов является использование фонового изображения на контейнере, которое выглядит как разделение столбцов.

Другой - это хак, который по стечению обстоятельств я только что подхватил для другого: http://cssdesk.com/4Yt5j

0 голосов
/ 25 февраля 2011

Я начал для вас, но для дальнейшего использования последуйте совету ZoFreX и изложите его в качестве минимального примера, который вы можете, затем задайте нам вопрос.

Посмотрите мой пример здесь .

...