обрезка фона родительского элемента - HTML и CSS

Love_silense · 13.08.2009, 16:10

есть такой фрагмент таблицы стилей:

Код:

#wrapper
{
background:#fefefe url(/images/body.png) repeat-x 50% 0;
}

#wrapper #container
{
margin:0 auto;
padding:0 20px;
max-width: 1270px;
}

#wrapper #container #left_side
{
min-width:200;
display:inline-block;
margin:0;
padding:0;
float:left;
}

и такой фрагмент разметки:

Код:

<div id="wrapper">
<div id="container"> 
 
  <div id="logo-floater"> 
    <h1><a title="" href="/"><img border="none" id="logo" src="<?=SITE_TEMPLATE_PATH?>/images/garland_logo.jpg" /></a></h1>
   </div>
   .......многабукаф............
  <div id="left_side"> 
................................

Обрезается фон враппера по верхней границе left_side. Пробовал ставить свойство backgroung:transparent; в left_side - непомогло.
Пробовал разставить z-index в оба блока - тоже не помогло. Подскажите у кого етсь идеи...

wall66 · 13.08.2009, 16:29

в каком браузере это наблюдается ?

Love_silense · 13.08.2009, 17:20

Firefox 3.5.2 и 3.0 на другом компе. результат один и тот-же

sa_t_an · 13.08.2009, 19:16

Код:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Hello!</title>
  <style>
  #wrapper
{
background:#fefefe url(/images/body.png) repeat-x 50% 0;
}

#wrapper #container
{
margin:0 auto;
padding:0 20px;
max-width: 1270px;
border: #111 1px solid;
position: relative;
}

#wrapper #container #left_side
{
min-width:200;
display:inline-block;
margin:0;
padding:0;
float:left;
border: #111 1px solid;
height: 100px;
}
</style>
</head>

<body>


<div id="wrapper">
<div id="container">

  <div id="logo-floater">
    <h1><a title="" href="/"><img border="none" id="logo" src="images/garland_logo.jpg" /></a></h1>
   </div>

  <div id="left_side"></div>
  <div style="clear: both"></div>
</div>

</div>

</body>
</html>

Если у блока задается стиль float: left нужна очистка плавающего блока вставкой пустого блока <div style="clear: both"></div> либо другими методами (один из zoom: 1) а то контейнер просто схлопывается... Попробуйте убрать эту строчку из вышеприведенного примера, и наглядно в этом убедитесь (FireFox)...

ЗЫ...

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

wall66 · 13.08.2009, 19:37

Цитата:

Сообщение от sa_t_an

Если у блока задается стиль float: left нужна очистка плавающего блока вставкой пустого блока <div style="clear: both"></div> либо другими методами (один из zoom: 1) а то контейнер просто схлопывается... Попробуйте убрать эту строчку из вышеприведенного примера, и наглядно в этом убедитесь (FireFox)...

а, ну да, не заметил
нормальным браузерам в таком случае хватает overflow:hidden у родительского элемента

Love_silense · 14.08.2009, 13:01

Большое спасибо пример очень наглядный, вы помогли мне понять суть проблемы. После чего гугл помог её решить=)

13.08.2009, 16:29	#2
wall66 Участник клуба Регистрация: 04.10.2008 Сообщений: 1,485	в каком браузере это наблюдается ? Notepad2 *свободен...*

13.08.2009, 19:16	#4
sa_t_an Пользователь Регистрация: 27.04.2008 Сообщений: 38	Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello!</title> <style> #wrapper { background:#fefefe url(/images/body.png) repeat-x 50% 0; } #wrapper #container { margin:0 auto; padding:0 20px; max-width: 1270px; border: #111 1px solid; position: relative; } #wrapper #container #left_side { min-width:200; display:inline-block; margin:0; padding:0; float:left; border: #111 1px solid; height: 100px; } </style> </head> <body> <div id="wrapper"> <div id="container"> <div id="logo-floater"> <h1><a title="" href="/"><img border="none" id="logo" src="images/garland_logo.jpg" /></a></h1> </div> <div id="left_side"></div> <div style="clear: both"></div> </div> </div> </body> </html> Если у блока задается стиль float: left нужна очистка плавающего блока вставкой пустого блока <div style="clear: both"></div> либо другими методами (один из zoom: 1) а то контейнер просто схлопывается... Попробуйте убрать эту строчку из вышеприведенного примера, и наглядно в этом убедитесь (FireFox)... ЗЫ... И ещё надо учитывать свойство padding я бы лучше использовал margin а то возможна прокрутка документа в некоторых браузерах, так как они высчитывают общую высоту документа прибавляя padding даже внутренних элементов... Последний раз редактировалось sa_t_an; 13.08.2009 в 19:21.

14.08.2009, 13:01	#6
Love_silense Регистрация: 13.08.2009 Сообщений: 4	Большое спасибо пример очень наглядный, вы помогли мне понять суть проблемы. После чего гугл помог её решить=) Последний раз редактировалось Love_silense; 14.08.2009 в 13:05.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Си -Расположить элементы в порядке возрастания от первого нулевого элемента до отрицательного элемента	Freia	Помощь студентам	17	13.12.2009 15:41
Получить Handle TEdit'a, зная дескриптор родительского окна	Cold_Night	Win Api	2	13.02.2009 16:47
Присваивание объекту родительского класса объекта дочернего	Викдон	Общие вопросы Delphi	0	07.02.2009 15:27
Обрезка на принтере чеков epson	Родион	Общие вопросы Delphi	0	07.10.2008 18:53
Обрезка видео формата Mpeg	Rembo	Софт	9	27.04.2008 22:20

13.08.2009, 16:10	#1
Love_silense Регистрация: 13.08.2009 Сообщений: 4	обрезка фона родительского элемента есть такой фрагмент таблицы стилей: Код: `#wrapper { background:#fefefe url(/images/body.png) repeat-x 50% 0; } #wrapper #container { margin:0 auto; padding:0 20px; max-width: 1270px; } #wrapper #container #left_side { min-width:200; display:inline-block; margin:0; padding:0; float:left; }` и такой фрагмент разметки: Код: `<div id="wrapper"> <div id="container"> <div id="logo-floater"> <h1><a title="" href="/"><img border="none" id="logo" src="<?=SITE_TEMPLATE_PATH?>/images/garland_logo.jpg" /></a></h1> </div> .......многабукаф............ <div id="left_side"> ................................` Обрезается фон враппера по верхней границе left_side. Пробовал ставить свойство backgroung:transparent; в left_side - непомогло. Пробовал разставить z-index в оба блока - тоже не помогло. Подскажите у кого етсь идеи...

13.08.2009, 17:20	#3
Love_silense Регистрация: 13.08.2009 Сообщений: 4	Firefox 3.5.2 и 3.0 на другом компе. результат один и тот-же