Как сверстать нахлёстом

[dimacat]

Хтелось бы спросить Вашего мнения, дорогие форумчане. Как, по Вашему, лучше всего реализовать такой вот нахлёст картинки с надписью "Новые коллекции" на хэдер, как показано на рисунке ? Макет резиновый.

[psywalker]

Поднять её отрицательным марджином вверх. Либо сделать её абсолютом и также поднять вверх из центра.

[Great Rash]

Лучше использовать position: relative; и отрицательное значение top. Маргины глючат частенько в ИЕ и в Опере.

[swetlana]

а при position: relative; в IE6—7 картинка может оставаться на месте при изменении размеров окна браузера.

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

[dimacat]

Да, вылетело из головы про position: relative; Спасибо большое ! Ещё вопрос, каким образом лучше сделать, чтобы внутри дива всё располагалось посередине ? <center></center> подойдёт или это дурной тон ?

[psywalker]

Да, вылетело из головы про position: relative; Спасибо большое ! Ещё вопрос, каким образом лучше сделать, чтобы внутри дива всё располагалось посередине ? <center></center> подойдёт или это дурной тон ?

<center></center> остался в прошлом, возьми сделай контейнер, пропиши ему ширину и выровни по середине margin: 0 auto;

[dimacat]

точно, спасибо большое.

[swetlana]

какой контейнер? зачем?

text-align: center уже отменили?

[psywalker]

какой контейнер? зачем?

text-align: center уже отменили?

Да, но тогда будут выравниваться только инлайн элементы.

[dimacat]

какой контейнер? зачем?

text-align: center уже отменили?

Спасибо, ответ уже подсказали.

Тему можно закрыть.

[psywalker]

Спасибо, ответ уже подсказали.

Тему можно закрыть.

Да тему пока оставим. Ты иди, а мы ещё пообщаемся

[dimacat]

Да тему пока оставим. Ты иди, а мы ещё пообщаемся

Не, пока не пойду - ещё вопрос.

Вернёмся к самому первому вопросу в этом топике. В общем, сделал как ты и посоветовал position: relative; и отрицательным топом сделал. Однако, эта картинка залазит на на хэдэр, а под хэдэр и её не видно. Эту картинку я делал в основном слое, который идёт после хэдэра. Где рыть ?

[sigma77]

Где рыть ?

z-index поставь повыше

[dimacat]

В общем, убрал у блока content overflow:hidden; и стало всё в порядке. Однако, блин, мне overflow:hidden; нужен бы... :-/

[sigma77]

dimacat

Ну или овервло:хидден или блок... а для чего у тебя там он стоит?

[dimacat]

dimacat

Ну или овервло:хидден или блок... а для чего у тебя там он стоит?

А что за "блок" ?

Вообще, я использую в блоке контент плавающие элементы и чтобы не возникли проблемы отображения элементов, которые следуют в HTML структуре за этим контейнером, собсна поэтоу я и использую overflow: hidden; Я же верно всё понимаю, что его всё-таки нужно использовать ?

[sigma77]

dimacat,

За блоком content у тебя только футер? Тогда почему бы ему просто не прописать clear:both в стилях?

А что за "блок" ?

Блок, который ты хочешь поднять.

[dimacat]

dimacat,

За блоком content у тебя только футер? Тогда почему бы ему просто не прописать clear:both в стилях?

Для футера ? Если да, то для него пробовал прописать, но результата ноль.

[sigma77]

Для футера. Результата ноль не может быть, либо не так что-то делаешь. По хорошему - страницу бы увидеть, или на крайний случай код основных блоков со стилями.

[dimacat]

<div id="header">
</div>

<div id="content">
   <div class="l_col">
   </div>

   <div class="c_col">
   </div>

   <div class="r_col">
   </div>
</div>

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

Вот такая структура документа. Как я понимаю, чтобы clear: both; заработал, нужно чтобы колонки, находящиеся в блоке content, шли не обрамлённые в этот блок content. Единственное решение, которое я вижу - это добавить в html <br clear="all" />. Однако, это противоречит самой цели CSS отделения стилей от структуры страницы. Или не заморачиваться в данном случае этим ?

Edited August 14, 2010 by dimacat

[sigma77]

Как я понимаю, чтобы clear: both; заработал, нужно чтобы колонки, находящиеся в блоке content, шли не обрамлённые в этот блок content.

Нет, не нужно. clear: both должен работать в любом случае. В принципе

.l_col {width: 200px; float: left;}
.c_col {margin-left: 200px;}
#footer {clear: both;}

или

.l_col {width: 200px; float: left;}
.c_col {overflow: hidden;}
#footer {clear: both;}

или

.l_col {width: 20%; float: left;}
.c_col {width: 80%; float: left(right)}
#footer {clear: both;}

в любом случае должно работать

Единственное решение, которое я вижу - это добавить в html <br clear="all" />. Однако, это противоречит самой цели CSS отделения стилей от структуры страницы. Или не заморачиваться в данном случае этим ?

Решений может быть много, а заморачиваться или нет решать только тебе.

п.с. И не понятно по коду, какой блок должен залазить на header...

Edited August 14, 2010 by sigma77

[dimacat]

С предыдущей проблемой разобрался. Появилась другая. Ещё одну тему создавать не хочется, посему опишу её здесь же. На сайте есть блок Google Ads, который я вставил туда с помощью тега <object></object>.

<object data="url.html" width=500 height=90 scrolling="no"></object>

Во всех браузерах всё хорошо, но в ФайрФоксе справа есть скролл, хотя я указал, чтобы его не было видно. В чём дело ?

[Lincky]

Лучше использовать position: relative; и отрицательное значение top. Маргины глючат частенько в ИЕ и в Опере.

А как же оставшееся место снизу, после применения отрицательного "топ". Тут опять только маргин снизу отрицательный.

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