Новости сайтов

[• Ghostl_doG]

Работа для учебы

Должно быть так
http://s44.radikal.ru/i105/1003/be/9da562dce0bb.jpg

А у меня
http://s50.radikal.ru/i129/1003/24/47b7b7065ed9.jpg

ссs
развернуть

Исходный код

.body {
border:1px solid #000000;
position:relative;
width:1025px;
height:100%;
margin:auto;
}
.header
{
position:relative;
width:1026px;
height:200px;
border-bottom:1px solid black;
}
.top-menu
{
position:relative;
border-bottom:1px solid black;
background-color:#DDDDDD;
width:1025px;
height:40px;
}
.index
{
 position:absolute;
 top:5px;
 left: 15px;
 width:106px;
}
.foto
{
 position:absolute;
 top: 5px;
 left: 130px;
 width:70px;
}
.contacts
{
 position:absolute;
 top: 5px;
 left: 210px;
 width:132px;
}
.main_menu
{
position:relative;
width:1025px;
height:100%;      //скорее всего тут ошибка
background-color:#FFFFFF;
}
.l_main_menu
{
 position:absolute;
 width:200px;
 height:100%;
 top:0px;
 left:0px;
 background-color:#DDDDDD;
 border-right:1px solid #000000;
}
 .banner1
 {
  border:1px solid #000000;
  position:absolute;
  width:150px;
  height:150px;
  left:25px;
  top:20px;
 }
 .banner2
 {
  border:1px solid #000000;
  position:absolute;
  width:150px;
  height:150px;
  left:25px;
  top:190px;
 }
.r_main_menu
{
 position:absolute;
 width:auto;
 height:100%;
 top:0;
 left:201px;
}
.footer
{
border-top:1px solid #000000;
background-color:#DDDDDD;
position:relative;
width:1025px;
height:20px;

}

html

Исходный код

<div class=body>
  <div class=header></div>
  <div class=top-menu>
       <div class=index></div>
       <div class=foto></div>
       <div class=contacts></div>
  </div>
  <div class=main_menu></div>
       <div class=l_main_menu></div>
       <div class=r_main_menu></div>
  <div class=footer></div>
</div>

хочется узнать, что я делаю не так

Сообщение отредактировал Ghostl_doG - Mar 23 2010, 15:45

[• foo-bar]

html

Исходный код

<div class=body>
  <div class=header></div>
  <div class=top-menu></div>
       <div class=index></div>
       <div class=foto></div>
       <div class=contacts></div>
  <div class=main_menu></div>
       <div class=l_main_menu></div>
       <div class=r_main_menu></div>
  <div class=footer></div>
</div>

A HTML у вас не таким разве должен быть

Исходный код

<div class=body>
  <div class=header></div>
  <div class=top-menu>
       <div class=index></div>
       <div class=foto></div>
       <div class=contacts></div>
  </div>
  <div class=main_menu>
       <div class=l_main_menu></div>
       <div class=r_main_menu></div>
  </div>
  <div class=footer></div>
</div>

Сообщение отредактировал foo-bar - Mar 23 2010, 15:39

[• Ghostl_doG]

A HTML у вас не таким разве должен быть

Исходный код

<div class=body>
  <div class=header></div>
  <div class=top-menu>
       <div class=index></div>
       <div class=foto></div>
       <div class=contacts></div>
  </div>
  <div class=main_menu>
       <div class=l_main_menu></div>
       <div class=r_main_menu></div>
  </div>
  <div class=footer></div>
</div>

так и есть, спутал когда писал =)

[• foo-bar]

Исходный код

.main_menu
{
position:relative;
width:1025px;
height:100%;      //скорее всего тут ошибка
background-color:#FFFFFF;
}

В CSS для комментариев используются /* и */. Думаю если уберете, комментарий c //, то Статья 1, Статья 2 и т.д будут на белом фоне.

[• Ghostl_doG]

Исходный код

.main_menu
{
position:relative;
width:1025px;
height:100%;      //скорее всего тут ошибка
background-color:#FFFFFF;
}

В CSS для комментариев используются /* и */. Думаю если уберете, комментарий c //, то Статья 1, Статья 2 и т.д будут на белом фоне.

комментария у меня в сss у меня нет, я их тут добавил

[• foo-bar]

Так я не понял проблема решена или нет?

[• Ghostl_doG]

проблема не решена, про то что ты говорил это только ошибки во время написание темы

[• foo-bar]

Таки пришлось мне создать тестовый файл

Место ошибки ты указал правильно: для div.main_menu ты указал высоту 100%, которые будут считаться относительно родителя div.body. Высота div.body тоже 100%, которые будут считаться относительно родителя body. А высота для body нигде не указана. Таким образом, браузер не может подсчитать высоту для div.main_menu.

Исправить можно, например, так:

Исходный код

html, body {height: 100%;}

В этом случае высота для body будет считаться относительно родителя html, а для html высота будет равна высоте видимой части страницы. Но думаю, такой фикс тебя не устроит т.к. страница по высоте слишком много занимать будет - тут уж сам решай как лучше пофиксить.

PS: кстати в quirks режиме страница отображается как ты и хочешь

Сообщение отредактировал foo-bar - Mar 23 2010, 19:48

[• Ghostl_doG]

спасибо, что постарался помочь. но все равно меня результат не устроил.
а надо как я понял примерно следующие:
height:100%-[размер хедера]-[размер верхнего меня]-[размер нижнего меню];

но как это делается я не знаю

[• foo-bar]

а надо как я понял примерно следующие:
height:100%-[размер хедера]-[размер верхнего меня]-[размер нижнего меню];

Честно говоря не понял что ты этим хотел сказать... Объясни что ты хочешь получить в результате.

[• Ghostl_doG]

я хотел что бы он для нахождения высоты div.main_menu вычитывал:
div.main_menu=100%(div.body)-200px(div.header)-40px(div.top_menu)-20px(div.footer)

т.е. что нахождения нужно высоты он производил математическое действие, а это в css невозможно.
и получилось бы
100%(div.body)=200px(div.header)+40px(div.top_menu)+div.main_menu+20px(div.footer)

а сейчас она делает (если делать html, body {height: 100%;}) :

result=100%(div.body)+ (100%(div.body)-div.main_menu)

[• foo-bar]

Проще говоря вам надо прижать .footer к низу страницы?

[• Ghostl_doG]

Проще говоря вам надо прижать .footer к низу страницы?

нет =). я могу сделать как вы сказали, но тогда остается много пустого пространства


Сообщение отредактировал Ghostl_doG - Mar 24 2010, 00:01

[• foo-bar]

Кажется я понял что вы хотите

Вы хотите чтобы высота div.main_menu была по высоте его контента?

развернуть

Исходный код

 .body {
  border:1px solid #000000;
  position:relative;
  width:1025px;
  margin:auto;
 }
 .header
 {
  position:relative;
  width:1026px;
  height:200px;
  border-bottom:1px solid black;
 }
 .top-menu
 {
  position:relative;
  border-bottom:1px solid black;
  background-color:#DDDDDD;
  width:1025px;
  height:40px;
 }
 .index
 {
  position:absolute;
  top:5px;
  left: 15px;
  width:106px;
 }
 .foto
 {
  position:absolute;
  top: 5px;
  left: 130px;
  width:70px;
 }
 .contacts
 {
  position:absolute;
  top: 5px;
  left: 210px;
  width:132px;
 }
 .main_menu
 {
  position:relative;
  width:825px;
  background-color:#FFFFFF;
  border-left: 200px solid #ddd;
 }
 .l_main_menu
 {
  position:absolute;
  width:200px;
  top:0px;
  left:-200px;
  background-color:#DDDDDD;
 }
 .banner1
 {
  border:1px solid #000000;
  position:absolute;
  width:150px;
  height:150px;
  left:25px;
  top:20px;
 }
 .banner2
 {
  border:1px solid #000000;
  position:absolute;
  width:150px;
  height:150px;
  left:25px;
  top:190px;
 }
 .r_main_menu
 {
  border-left: 1px solid #000;
  width:auto;
 }
 .footer
 {
  border-top:1px solid #000000;
  background-color:#DDDDDD;
  position:relative;
  width:1025px;
  height:20px;
 }

[• Ghostl_doG]

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