Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Не получается слои заправить в слой! в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Добрый день! Не получаеться завернуть дивы в обертку! Оберткой служит <div id ="headWrapper"><div> , но почему же не получаеться и нижний слой лепиться ...


Закрытая тема
 
Опции темы
Старый 15.06.2007, 17:37   #1
Добрый день! Не получаеться завернуть дивы в обертку!
Оберткой служит <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, 17:37
Ссылки
Старый 15.06.2007, 21:11   #2
Вы бы вставили какой-нибудь текст в ваш код. И написали более понятно, чего надо добиться.

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

kost добавил [date]1181927661[/date]:
В стилях
Код:
headWrapper{height:200px;}
замените на

Код:
#headWrapper{height:200px;}
 
Старый 15.06.2007, 22:29   #3
Вот спасибо! Наконец таки вижу человека который разбираеться!
Исправил синтаксисческу ошибку! А добиться я хочу чтоб было так: персиковый слой - резиновый, а по бокам два зеленых!!
Свекольный слой резиновый и по бокам два небесных!

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

<!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, 01:18   #4
Цитата:
А вот теперь пожалуйста! Еще один вопрос! Почему если не сделать бордер равный нулю, то в Мазилле и Опере слои нижней строки неправильно выстраиваються!!
Выравниваются они правильно, просто эти браузеры делают лишь то, что должны, без каких-либо измышлений о глубине знаний програмиста. В данном случае чилдрены Уропера выше высоты доступной для контента на 2рх (изза бордера в 1рх), имеет место оверфлоу. Для того, чтобы все было так как хотелось, нужно размеры корректировать на удвоенною толщину бордера.
 
Старый 16.06.2007, 11:43   #5
Спасибо большое! Я так и предпологал!
Помогите выравнять нижние блоки - почему они разьежаються? - Непойму!!! Должны быть выстроенны как и блоки первой строки!! Еще раз спасибо за помощь!!

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

Я конечно понимаю что есть готовые варианты коды верстки в три колонки! Но мне интересно довести до ума свой пример, а не бежать от ошибок!!!
 
Старый 18.06.2007, 01:29   #6
Если размеры правого и/или левого дива абсолютные, то одним из вариантов решения проблемы будет скрипт, который добавит обрабочики событий onLoad и onResize для документа, которые в свою очередь и будут разруливать проблему "растягивания" среднего дива.
Цитата:
Ведь слой блочный элемент и должен заполнять все свободное пространство!
При позиционировании в потоке (float) он ничего такого не должен. Только при обычном (fixed) или относительном (relative) позиционировании это будет правдой.
Цитата:
Помогите выравнять нижние блоки - почему они разьежаються?
Вопрос не понятен. Могу лишь сказать, что при ресайзе там вообще страшное будет (в смысле, не только с нижними дивами).
 
Старый 18.06.2007, 18:17   #7


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


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слой и фрейм! 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


Текущее время: 18:32. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум