Не получается слои заправить в слой!

WEB_bobby · 15.06.2007, 17:37

Добрый день! Не получаеться завернуть дивы в обертку!
Оберткой служит <div id ="headWrapper"><div> , но почему же не получаеться и нижний слой лепиться к последнему слою первого ряда?! И неда предлагать никакие в три колонки там и т.д! Меня интересует почему не получаеться заправить слои, а не это!!! Не знаете, то лучше молчите!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type ="text/CSS">
body{ background-color:#000000;}

* {
margin: 0;
padding: 0;
border:1px solid white
}

headWrapper{height:200px;}

#headLeft{width:200px; height:200px;margin-left:100px; float:left; background-color:#1e884d}
#headMiddle{width:20%; height:200px; float:left; background-color:#d0884d}
#headRight{width:200px; height:200px; margin-right:100px; float:left; background-color:#1e884d}

#bodyLeft{width:50px; height:400px; margin-left:50px; float:left; background-color:#6785d9}
#bodyMiddle{width:20%; height:400px; float:left; background-color:#67394b}
#bodyRight{width:450px; height:300px; padding:50px; margin-right:50px; float:left; background-color:#6785d9}
</style>
</head>

<body>
<div id ="headWrapper">
<div id ="headLeft">
</div>
<div id ="headMiddle">
</div>
<div id ="headRight">
</div>
</div>

<div id ="bodyLeft"></div> <div id ="bodyMiddle"></div>
<div id ="bodyRight"></div>

</body>
</html>

WEB_bobby добавил [date]1181916570[/date]:
И что ни кто не знает что ли???!!!!

kost · 15.06.2007, 21:11

Вы бы вставили какой-нибудь текст в ваш код. И написали более понятно, чего надо добиться.

Посмотрел -- красивые прямоугльники на черном фоне. Дальше вникать лень.

kost добавил [date]1181927661[/date]:
В стилях

Код:

headWrapper{height:200px;}

замените на

Код:

#headWrapper{height:200px;}

WEB_bobby · 15.06.2007, 22:29

Вот спасибо! Наконец таки вижу человека который разбираеться!
Исправил синтаксисческу ошибку! А добиться я хочу чтоб было так: персиковый слой - резиновый, а по бокам два зеленых!!
Свекольный слой резиновый и по бокам два небесных!

А вот теперь пожалуйста! Еще один вопрос!
Почему если не сделать бордер равный нулю, то в Мазилле и Опере слои нижней строки неправильно выстраиваються!! Еще когда делал свой первый сайт(который еще не доделал - я его неторопясь для собственного удовольствия и оттачивания навыков делаю, а счас комерческий заказ.), то заметил когда тестил, что ставлю бордер равный еденице и все едит к черту на куличики!!! Хорошо что догодался! А то мог бы по неопытности просидеть не один час а то и день ища ошибки где их нет!
Так вот подскажите пожалуйста почему это происходит вот код с исправленной синтаксисческой ошибкой!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type ="text/CSS">
body{ background-color:#000000;}

* {
margin: 0;
padding: 0;
border:1px solid white
}

#headWrapper{height:200px;}

#headLeft{width:200px; height:200px;margin-left:100px; float:left; background-color:#1e884d}
#headMiddle{width:20%; height:200px; float:left; background-color:#d0884d}
#headRight{width:200px; height:200px; margin-right:100px; float:left; background-color:#1e884d}

#bodyLeft{width:50px; height:400px; margin-left:50px; float:left; background-color:#6785d9}
#bodyMiddle{width:20%; height:400px; float:left; background-color:#67394b}
#bodyRight{width:450px; height:300px; padding:50px; margin-right:50px; float:left; background-color:#6785d9}
</style>
</head>

<body>
<div id ="headWrapper">
<div id ="headLeft">
</div>
<div id ="headMiddle">
</div>
<div id ="headRight">
</div>
</div>

<div id ="bodyLeft"></div> <div id ="bodyMiddle"></div>
<div id ="bodyRight"></div>

</body>
</html>

Duban · 16.06.2007, 01:18

Цитата:

А вот теперь пожалуйста! Еще один вопрос! Почему если не сделать бордер равный нулю, то в Мазилле и Опере слои нижней строки неправильно выстраиваються!!

Выравниваются они правильно, просто эти браузеры делают лишь то, что должны, без каких-либо измышлений о глубине знаний програмиста. В данном случае чилдрены Уропера выше высоты доступной для контента на 2рх (изза бордера в 1рх), имеет место оверфлоу. Для того, чтобы все было так как хотелось, нужно размеры корректировать на удвоенною толщину бордера.

WEB_bobby · 16.06.2007, 11:43

Спасибо большое! Я так и предпологал!
Помогите выравнять нижние блоки - почему они разьежаються? - Непойму!!! Должны быть выстроенны как и блоки первой строки!! Еще раз спасибо за помощь!!

И вот еще не пойму один момент!
как сделать чтоб headMiddle и bodyMiddle тянулись на все допустимое пространство?
пробывал убирать ихний width заданный в процентах - так вообще казябазя какаята получилась! А почему? Ведь слой блочный элемент и должен заполнять все свободное пространство!

Я конечно понимаю что есть готовые варианты коды верстки в три колонки! Но мне интересно довести до ума свой пример, а не бежать от ошибок!!!

Duban · 18.06.2007, 01:29

Если размеры правого и/или левого дива абсолютные, то одним из вариантов решения проблемы будет скрипт, который добавит обрабочики событий onLoad и onResize для документа, которые в свою очередь и будут разруливать проблему "растягивания" среднего дива.

Цитата:

Ведь слой блочный элемент и должен заполнять все свободное пространство!

При позиционировании в потоке (float) он ничего такого не должен. Только при обычном (fixed) или относительном (relative) позиционировании это будет правдой.

Цитата:

Помогите выравнять нижние блоки - почему они разьежаються?

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

WEB_bobby · 18.06.2007, 18:17

WEB_bobby добавил [date]1182176323[/date]:
Переделал!!! Но вот теперь новая проблема в IE между слоями отступы, а в Мазилле и Опера отступов нет! Я прочитал, что это трехпиксельный отступ который появляеться толко в IE и надо задавать отрицательные маргины.. Не получаеться применить к примеру - поставил
margin :-3px; Но ничиго не поменялось! Подскажите пожалуйста - может я не так понял - может по другому применяеться все это дело?!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type ="text/CSS">
* {
margin: 0;
padding: 0;
border:0;
}

body{
height:600px;
min-width:1024px
}

#first{
margin: 0 150px 0 150px;
height:200px

}
#top_left{
height:200px;
width:200px;
background-color:#6ac247;
float:left;
margin-right: -3px;
}

#top_middle{
margin:0 200px;
background-color:#edc230;
height:200px;
}

#top_right{
height:200px;
width:200px;
background-color:#6ac247;
float:right;
margin-left: -3px;
}

#second{
margin: 0 100px 0 100px;
height:400px;
}
#bottom_left{
height:400px;
width:50px;
background-color:#4b7151;
float:left
}
#bottom_right{
height:300px;
width:350px;
padding:50px;
background-color:#6a67cc;
float:right
}
#bottom_middle{
background-color:#ff989e;
height:400px
}
</style>

</head>

<body>
<div id="first">
<div id="top_right">3</div>
<div id="top_left">1</div>
<div id="top_middle">2</div>
</div>
<div id="second">
<div id="bottom_right">3</div>
<div id="bottom_left">1</div>
<div id="bottom_middle">2</div>
</div>
</body>
</html>

kost · 18.06.2007, 23:19

WEB_bobby, выложите куда-нибудь сверстанный пример, будет проще смотерть и давать какие-то советы.

Duban · 18.06.2007, 23:25

Известнейший баг ИЕ версий меньше 7. Если память не изменяет, то при наличии флоатов ИЕ добавляет к НЕфлоатам отступы в 3рх. Думаю, что в данном случае всем middle нужно правое и левое поле поставить в -3рх.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Слой и фрейм!	gelous	HTML, CSS, JavaScript	0	18.02.2007 13:45
Слой определенного размера и в определенном месте	InvaliD	HTML, CSS, JavaScript	1	17.08.2006 17:46
Не могу растрировать слой	Lebedev	Растровая графика	17	12.01.2006 06:05
Слои	Chupa	Зал дебютантов	6	18.01.2004 18:41
<Div> position: Или - Слой! Знай свое место!	Catch	HTML, CSS, JavaScript	2	17.05.2003 14:43

15.06.2007, 17:37	#1
WEB_bobby	Добрый день! Не получаеться завернуть дивы в обертку! Оберткой служит <div id ="headWrapper"><div> , но почему же не получаеться и нижний слой лепиться к последнему слою первого ряда?! И неда предлагать никакие в три колонки там и т.д! Меня интересует почему не получаеться заправить слои, а не это!!! Не знаете, то лучше молчите!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled</title> <style type ="text/CSS"> body{ background-color:#000000;} * { margin: 0; padding: 0; border:1px solid white } headWrapper{height:200px;} #headLeft{width:200px; height:200px;margin-left:100px; float:left; background-color:#1e884d} #headMiddle{width:20%; height:200px; float:left; background-color:#d0884d} #headRight{width:200px; height:200px; margin-right:100px; float:left; background-color:#1e884d} #bodyLeft{width:50px; height:400px; margin-left:50px; float:left; background-color:#6785d9} #bodyMiddle{width:20%; height:400px; float:left; background-color:#67394b} #bodyRight{width:450px; height:300px; padding:50px; margin-right:50px; float:left; background-color:#6785d9} </style> </head> <body> <div id ="headWrapper"> <div id ="headLeft"> </div> <div id ="headMiddle"> </div> <div id ="headRight"> </div> </div> <div id ="bodyLeft"></div> <div id ="bodyMiddle"></div> <div id ="bodyRight"></div> </body> </html> WEB_bobby добавил [date]1181916570[/date]: И что ни кто не знает что ли???!!!!

15.06.2007, 21:11	#2
kost	Вы бы вставили какой-нибудь текст в ваш код. И написали более понятно, чего надо добиться. Посмотрел -- красивые прямоугльники на черном фоне. Дальше вникать лень. kost добавил [date]1181927661[/date]: В стилях Код: headWrapper{height:200px;} замените на Код: #headWrapper{height:200px;}

15.06.2007, 22:29	#3
WEB_bobby	Вот спасибо! Наконец таки вижу человека который разбираеться! Исправил синтаксисческу ошибку! А добиться я хочу чтоб было так: персиковый слой - резиновый, а по бокам два зеленых!! Свекольный слой резиновый и по бокам два небесных! А вот теперь пожалуйста! Еще один вопрос! Почему если не сделать бордер равный нулю, то в Мазилле и Опере слои нижней строки неправильно выстраиваються!! Еще когда делал свой первый сайт(который еще не доделал - я его неторопясь для собственного удовольствия и оттачивания навыков делаю, а счас комерческий заказ.), то заметил когда тестил, что ставлю бордер равный еденице и все едит к черту на куличики!!! Хорошо что догодался! А то мог бы по неопытности просидеть не один час а то и день ища ошибки где их нет! Так вот подскажите пожалуйста почему это происходит вот код с исправленной синтаксисческой ошибкой! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled</title> <style type ="text/CSS"> body{ background-color:#000000;} * { margin: 0; padding: 0; border:1px solid white } #headWrapper{height:200px;} #headLeft{width:200px; height:200px;margin-left:100px; float:left; background-color:#1e884d} #headMiddle{width:20%; height:200px; float:left; background-color:#d0884d} #headRight{width:200px; height:200px; margin-right:100px; float:left; background-color:#1e884d} #bodyLeft{width:50px; height:400px; margin-left:50px; float:left; background-color:#6785d9} #bodyMiddle{width:20%; height:400px; float:left; background-color:#67394b} #bodyRight{width:450px; height:300px; padding:50px; margin-right:50px; float:left; background-color:#6785d9} </style> </head> <body> <div id ="headWrapper"> <div id ="headLeft"> </div> <div id ="headMiddle"> </div> <div id ="headRight"> </div> </div> <div id ="bodyLeft"></div> <div id ="bodyMiddle"></div> <div id ="bodyRight"></div> </body> </html>

16.06.2007, 11:43	#5
WEB_bobby	Спасибо большое! Я так и предпологал! Помогите выравнять нижние блоки - почему они разьежаються? - Непойму!!! Должны быть выстроенны как и блоки первой строки!! Еще раз спасибо за помощь!! И вот еще не пойму один момент! как сделать чтоб headMiddle и bodyMiddle тянулись на все допустимое пространство? пробывал убирать ихний width заданный в процентах - так вообще казябазя какаята получилась! А почему? Ведь слой блочный элемент и должен заполнять все свободное пространство! Я конечно понимаю что есть готовые варианты коды верстки в три колонки! Но мне интересно довести до ума свой пример, а не бежать от ошибок!!!

18.06.2007, 18:17	#7
WEB_bobby	WEB_bobby добавил [date]1182176323[/date]: Переделал!!! Но вот теперь новая проблема в IE между слоями отступы, а в Мазилле и Опера отступов нет! Я прочитал, что это трехпиксельный отступ который появляеться толко в IE и надо задавать отрицательные маргины.. Не получаеться применить к примеру - поставил margin :-3px; Но ничиго не поменялось! Подскажите пожалуйста - может я не так понял - может по другому применяеться все это дело?! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled</title> <style type ="text/CSS"> * { margin: 0; padding: 0; border:0; } body{ height:600px; min-width:1024px } #first{ margin: 0 150px 0 150px; height:200px } #top_left{ height:200px; width:200px; background-color:#6ac247; float:left; margin-right: -3px; } #top_middle{ margin:0 200px; background-color:#edc230; height:200px; } #top_right{ height:200px; width:200px; background-color:#6ac247; float:right; margin-left: -3px; } #second{ margin: 0 100px 0 100px; height:400px; } #bottom_left{ height:400px; width:50px; background-color:#4b7151; float:left } #bottom_right{ height:300px; width:350px; padding:50px; background-color:#6a67cc; float:right } #bottom_middle{ background-color:#ff989e; height:400px } </style> </head> <body> <div id="first"> <div id="top_right">3</div> <div id="top_left">1</div> <div id="top_middle">2</div> </div> <div id="second"> <div id="bottom_right">3</div> <div id="bottom_left">1</div> <div id="bottom_middle">2</div> </div> </body> </html>

18.06.2007, 23:19	#8
kost	WEB_bobby, выложите куда-нибудь сверстанный пример, будет проще смотерть и давать какие-то советы.

18.06.2007, 23:25	#9
Duban	Известнейший баг ИЕ версий меньше 7. Если память не изменяет, то при наличии флоатов ИЕ добавляет к НЕфлоатам отступы в 3рх. Думаю, что в данном случае всем middle нужно правое и левое поле поставить в -3рх.