Это способ сделать абсолютные / относительные / статические CSS DIVs? - PullRequest
Новая
       4

Это способ сделать абсолютные / относительные / статические CSS DIVs?

0 голосов
/ 07 марта 2009

Я хочу DIV с центрированным заголовком и внутри него следующие абсолютно позиционированные DIV:

  • логотип
  • меню
  • линия
  • название * * 1 010

Но у моего HTML / CSS есть две проблемы:

  • по какой-то причине страница стала шире (см. Нижнюю полосу прокрутки)
  • Если мой заголовок длиннее, я хочу, чтобы он был выровнен по правому краю

Что мне действительно нужно, так это центрированный DIV, внутри которого я хочу расположить DIV абсолютно внутри их центрированного родителя (но не абсолютного, поскольку они не будут центрированы). Это возможно?

Как бы вы выполнили этот макет?

альтернативный текст http://tanguay.info/web/external/centeredLayoutProblem.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">
    #headerArea {
        background-color: yellow;
        margin: 0px auto;
        width: 760px;
        height: 150px;
    }

    #logo {
        position: relative;
        top: 20px;
        left: 20px;
        background-color: orange;
        text-align: center;
        font-size: 32pt;
        width: 150px;
        padding: 10px;
        z-index: 10;
    }

    #menu {
        position: relative;
        top: -52px;
        right: -480px;
        background-color: tomato;
        text-align: center;
        font-size: 14pt;
        width: 240px;
        padding: 10px;
    }

    #title {
        position: relative;
        top: -35px;
        right: -620px;
        font-style: italic;
        font-size: 14pt;
    }

    #line {
        position: relative;
        top: -60px;
        border-bottom: 1px solid blue;
        margin: 0 20px;
    }
</style>

</head>

<body>
    <div id="headerArea">
        <div id="logo">LOGO</div>
        <div id="menu">One&nbsp;&nbsp;Two&nbsp;&nbsp;Three&nbsp;&nbsp;Four&nbsp;&nbsp;Five</div>
        <div id="title">This is the Title a Bit Longer</div>
        <div id="line"></div>
    </div>
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 07 марта 2009

Сделайте вашу позицию #headerArea div: относительной. Затем для всех ваших внутренних элементов div вы можете расположить: absolute относительно # headerArea.

Вроде так: 

<style type="text/css">
    #headerArea {
        position:relative;
        background-color: yellow;
        margin: 0px auto;
        width: 760px;
        height: 150px;
    }

    #logo {
        position: absolute;
        top: 20px;
        left: 20px;
        background-color: orange;
        text-align: center;
        font-size: 32pt;
        width: 150px;
        padding: 10px;
        z-index: 10;
    }

    #menu {
        position: absolute;
        top: 20px;
        left: 480px;
        background-color: tomato;
        text-align: center;
        font-size: 14pt;
        width: 240px;
        padding: 10px;
    }

    #title {
        position: absolute;
        top: 80px;
        left: 20px;
    width: 720px;
    text-align: right;
        font-style: italic;
        font-size: 14pt;
    }

    #line {
        position: absolute;
width: 720px; 
height: 1px;
        top: 70px;
        border-bottom: 1px solid blue;
        margin: 0 20px;
    } 
</style>

Вы должны использовать свойство 'left' вместо 'right', так как 'right' не работает в ie6.

Введенные мной значения 'left' и 'top' могут быть немного не такими, но вы можете настроить их так, чтобы получить то, что вы хотите.

EDIT:

Я исправил значения в пикселях и добавил ширину к вашей строке div и высоту, поскольку IE по умолчанию использует все div для высоты одной текстовой строки.

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

1 голос
/ 07 марта 2009

Использовать позицию: относительно заголовка (как уже было предложено), чтобы он стал слоем, тогда абсолютно позиционированные элементы внутри него будут использовать этот элемент в качестве источника.

Вы можете поместить линию перед логотипом в разметке, тогда вам не нужно использовать z-index, чтобы поместить логотип поверх строки. Все браузеры не обрабатывают z-index одинаково ...

Поместив заголовок справа, он будет расширяться влево по мере необходимости.

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

Я удалил некоторые ненужные стили и добавил заголовок на страницу (как это требуется в надлежащем HTML-документе).

Это будет последовательно отображаться в Firefox 3, IE 7, IE 8, Opera 9 и Chrome 1: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
    <title>Title</title>

<style type="text/css">

body {
    margin: 0;
    padding: 10px;
}

#headerArea {
    position: relative;
    background: yellow;
    margin: 0 auto;
    width: 760px;
    height: 150px;
}

#headerArea div {
    position: absolute;
}

#logo {
    top: 20px;
    left: 20px;
    background: orange;
    text-align: center;
    font-size: 32pt;
    width: 150px;
    padding: 10px;
}

#menu {
    top: 20px;
    right: 20px;
    background: tomato;
    text-align: center;
    font-size: 14pt;
    width: 240px;
    padding: 10px;
}


#line {
    top: 80px;
    left: 20px;
    width: 720px;
    border-top: 1px solid blue;
}

#title {
    top: 90px;
    right: 20px;
    font-style: italic;
    font-size: 14pt;
}

</style>

</head>

<body>
    <div id="headerArea">
        <div id="line"></div>
        <div id="logo">LOGO</div>
        <div id="menu">One Two Three Four Five</div>
        <div id="title">This is the Title a Bit Longer</div>
    </div>
</body>
</html>

(Вам может понадобиться отрегулировать позиционирование, чтобы получить именно то, что вы хотите, но это должно быть довольно легко.)

1 голос
/ 07 марта 2009

Да. Если вы сделаете #headerArea{position:relative;}, у вас может быть позиция: абсолютная для детей, и их позиция будет относительно родителя.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...