Порядок центрирования и правильного элемента (div)

Question

Прошу прощения за недостающее знание дизайна, но меня смущает немного позиционирования div. У меня есть заголовок div. Внутри этого заголовка я хочу два divs, один для логотипа, а ниже - другой для некоторого контента. Я обозначил их логотип и карту соответственно. Однако, когда я пытаюсь поместить их в html, называя их в правильном порядке, карта div просто лежит поверх логотипа div, а не под ним. Я попытался использовать почти все варианты «clear: xxx» как в css, так и inline внутри html, но они не имеют никакого эффекта. Может кто-нибудь объяснить, почему это не работает? Публикация соответствующих css и html ниже.

#header { 
    height:440px; 
    width: 100%; 
    margin-top: 0px; 
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7 
    } 
#header .logo { 
    position:absolute; 
    top: 3px; 
    left: 50%; 
    margin-left: -198px; 
} 
#header .card { 
    position: absolute; 
    left: 50%; 
    margin-left: -500px; 
    height: 367px; 
    width: 999px; 
    background:url(/assets/hback.png) 0 0 no-repeat; 
    clear: left; 
} 

И HTML:

<div id="header"> 
<div class="logo"><%= link_to image_tag("srlogo.png",alt:"Logo"), 'index.html' %></div> 
<div class="card">Some text here</div> 
</div> 

Любая помощь очень ценится.

Редактировать: Да, я явно идиот, пытаясь использовать «ясный» без плавающих элементов. Я понимаю это сейчас. Итак, как мне получить одно подразделение ниже, а не поверх другого?

Answer 1

Избавьтесь от вашего абсолютного позиционирования. Это мусор.

http://jsfiddle.net/2BpfF/1/

Если вы хотите .logo DIV быть в центре страницы, и вы знаете, что ширина вы можете сделать это:

#wrapper { 
    width: 999px; 
    margin: 0 auto; 
} 
#header { 
    height:416px; 
    margin-top: 0px; 
    } 
#header .logo { 
    margin: 0 auto; 
    width: 333px; 
} 
#header .card { 
    background-image: url(http://lorempixel.com/999/367/); 
    background-repeat: no-repeat; 
    height: 367px; 
} 

HTML

<div id="wrapper"> 
    <div id="header"> 
      <div class="logo"><img src="http://lorempixel.com/333/49/" /></div> 
      <div class="card">Some text here</div> 
    </div> 
</div> 

margin: 0 auto; добавляет 0px на верх и низ DIV при вычислении левого и правого символов т для вас, так что он будет сосредоточен. Это будет работать только с известной шириной.

Кажется, вы хотите сосредоточить все. Поэтому я бы начал с wrapper DIV и в центре этого. Я сделал это с #wrapper.

Помните, что исходный порядок имеет значение и что по умолчанию ваш .logo DIV будет отображаться перед вашим .card DIV без каких-либо CSS.

Вы также можете удалить width: 100%; из своего #header DIV, так как все DIV по умолчанию являются элементами уровня блока. Элементы уровня блока всегда занимают всю ширину их содержащего элемента, если не указано иное.

Что касается непрозрачности фонового изображения, я думаю, что наилучшим решением было бы сделать это для вашего файла изображения, а не с помощью CSS, поскольку я не думаю, что непрозрачность очень универсальна.Что я имею в виду, это если вы установили opacity: 0.5; в DIV, тогда все в этом div на 50% непрозрачно. Я не гуру на непрозрачности, поэтому вам придется углубиться в это немного глубже. Но я бы просто установил непрозрачность в редакторе изображений на 50% и вывел файл PNG, чтобы были доступны альфа-каналы (непрозрачность). JPG файлы не имеют альфа-каналов для прозрачности.

Answer 2

1. У вас нет плавучих элементов, поэтому clear не имеет абсолютно никакого эффекта.
2. Absolute positioning removes the element from the document flow, поэтому плавающие и очищающие эффекты не будут влиять на такие позиционированные элементы, поскольку плавающая регулирует элемент в потоке содержимого.

Answer 3

Избегать установки absolute. То же самое можно достичь, используя что-то like this:

#header { 
    height:440px; 
    width: 100%; 
    margin-top: 0px; 
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7 
} 
#header .logo { 
    padding: 5px; 
    text-align:center; 
} 
#header .card { 
    margin-left: auto; 
    height: 367px; 
    width: 999px; 
    background:url(/assets/hback.png) 0 0 no-repeat; 
    clear: both; 
    padding: 5px; 
}