не получается background

Clayton · April 1, 2009

Всем привет!

Пытаюсь сверстать макет, чисто на дивах. Имеется див со следующими параметрами:

.bgimg4 {

width:912px;

height:auto;

background-image:url(bgimg2.gif);

background-repeat:repeat-y;

border:0px;

}

Проблема в том что, как только в этот блок, я помещаю дивы, с заданными параметрами float:left; или right - фоновый рисунок вместе с дивом просто сворачивается наверх о_О, Примерно так как я на картинке изобразил:

Вот. Это моя первая верстка, по этому очень прошу не бить сильно, если что не так.

Searcher · April 2, 2009

Пора это где-то в справочниках прописать, ежедневно народ приходит на этот форум с таким вопросом...

float:left и right выводит элемент из обычного потока и родитель его не видит. Чтобы увидел, задайте родителю overflow:hidden;

Clayton · April 2, 2009

Читал про этот параметр, только вот не додумался что в этом случае он нужен. Огромное спасибо!

Edited April 2, 2009 by Clayton

Searcher · April 2, 2009

Я тоже в свое время сам не додумался, мне подсказали :huh:

Мне приходилось втыкать после флоатов еще дополнительный див с clear:both; line-height:1 и т.п.

Edited April 2, 2009 by Searcher

Clayton · April 2, 2009

Мне приходилось втыкать после флоатов еще дополнительный див с clear:both; line-height:1 и т.п.

Интересно. А как это выглядело? К примеру вот такой код (без параметра overflow:hidden):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>

<body>
<div style="width:900px; height:auto; background-image:url(bgimg2.gif); margin:auto;">
  <h1>Заголовок!</h1>
  <div style="float:right; width:100px; height:100px;">asdf</div>
  <div style="float:right; width:100px; height:100px;">sdfsdf</div>
</div>
</body>
</html>

Searcher · April 3, 2009

примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>

<body>
<div style="width:900px; background:url(bgimg2.gif) #eee; margin:auto;">
  <h1>Заголовок!</h1>
  <div style="float:right; width:100px; height:100px; background:#efe;">asdf</div>
  <div style="float:right; width:100px; height:100px; background:#fee;">sdfsdf</div>
  <div style="clear:both; font-size:1px; height:0;"></div>
</div>
</body>
</html>

но IE оставляет небольшой отступ внизу, ну не хочет он высоту дива в 0 ставить даже если он пустой, если это критично, тогда в последнем диве я добавлял еще overflow:hidden;, тогда везде одинаково было.

Clayton · April 3, 2009

Тоже ведь может пригодиться..) Спасибо)

Searcher · April 3, 2009

пожалуйста :huh:

Sign In

не получается background

Question

Clayton

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Clayton

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Clayton

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Clayton

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information