VPF::Съезжает правй блок - Форум программистов

langolier

Дата 20.9.2008, 12:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 29.7.2008

Репутация: нет
Всего: нет

Нужна помощь... В опере отображаеться нормально в ИЕ блок 3 сьезжает вниз...
Как исправить??
Расположение на картинке снизу:

user posted image

Вот часть кода:

Код


#left {
    background: url(images/left.jpg) no-repeat; 
    background-color: #e4e8ff;
    width: 57px; 
    height: 654px;
    float: left;
}
#main {
    width: 870px; 
    height: 372px;
    background-color: #e4e8ff;
    float: left;
    
}
#right {
    background: url(images/right.jpg) no-repeat; 
    background-color: #e4e8ff;
    width: 57px; 
    height: 654px;
    float: right;
}

mr.Anderson

Дата 20.9.2008, 13:07 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

langolier, просто делай так:

Код


#right {
    background: url(images/right.jpg) no-repeat; 
    background-color: #e4e8ff;
    width: 57px; 
    height: 654px;
    float: left;
}

Добавлено через 1 минуту и 4 секунды
Объясняю логику вещей. У тебя есть два слоя, расположенных друг за другом. Третий будет как бы пристыковываться ко второму, поэтому проще указать float: left и получить желаемый результат.

--------------------

langolier

Дата 20.9.2008, 13:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 29.7.2008

Репутация: нет
Всего: нет

я так сделал и вся страница на перекосяк... как в опере, так и в ИЕ..
Вот весь код:

Код


* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}
body { 
    background: #fff; 
    color: #696969;
    font-family: Verdana, Arial;
}
p {
    font-size: 13px;
    font-style: normal;
}
img {
    border: 0px;
}
a.big {
    color: #508bdd;
    font-size: 16px;
}
a.big:hover {
    color: #508bdd;
    font-size: 16px;
    text-decoration : none;
}
a.small {
    color: #508bdd;
    font-size: 10px;
}
a.small:hover {
    color: #508bdd;
    font-size: 10px;
    text-decoration : none;
}
#container { 
    width: 984px;
    height: 912px;
    margin: 0 auto; 
}
#header { 
    background: url(images/header.jpg) no-repeat; 
    background-color: #e4e8ff;
    width: 984px; 
    height: 258px; 
}
#left {
    background: url(images/left.jpg) no-repeat; 
    background-color: #e4e8ff;
    width: 57px; 
    height: 654px;
    float: left;
}
#main {
    width: 870px;
    height: 372px;
    background-color: #e4e8ff;
    float: left;
    
}
#right {
    background: url(images/right.jpg) no-repeat; 
    background-color: #e4e8ff;
    width: 57px; 
    height: 654px;
    float: right;
}
#contacts {
    /*background: url(images/contacts.jpg) no-repeat;*/
    background-color: #e4e8ff;
    width: 253px; 
    height: 282px;
    float: left;
}
#bottom {
    background: url(images/bottom.jpg) no-repeat;
    background-color: #e4e8ff;
    width: 617px; 
    height: 282px;
    float: right;
}
#copy{
    margin: 140px 40px 50px;
    text-align: right;
}
#text {
    margin: 0px 25px 0px 15px;
}
.text1 {
    font-size: 12px;
    color: #45b875;
    font-weight: bold;
}
.text2 {
    font-size: 10px;
    color: #868686;
}

mr.Anderson

Дата 20.9.2008, 13:37 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

langolier, значит, ищи баг в своем коде. У меня вот такой вариант:

Код


<html>

 <head>
  <style type='text/css'>
   #left {
       background: url(images/left.jpg) no-repeat; 
       background-color: #e4e8ff;
       width: 57px; 
       height: 654px;
       float: left;
   }
   #main {
       width: 870px; 
       height: 372px;
       background-color: #e4e8ff;
       float: left;      
   }
   #right {
       background: url(images/right.jpg) no-repeat; 
       background-color: #e4e8ff;
       width: 57px; 
       height: 654px;
       float: left;
   }
  </style>
 </head>

 <div id='left'>1</div>
 <div id='main'>2</div>
 <div id='right'>3</div>
</html>

Отрабатывает идеально и в мозилле, и в эксплорере.

Добавлено через 51 секунду
ЗЫ Идеально в смысле так, как у тебя на первом рисунке в первом посте.

--------------------

K1ng

Дата 20.9.2008, 17:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 7.8.2008
Где: Украина -> Хар ьков

Репутация: нет
Всего: нет

А почему не выровнять так:

#div1 {
float: left;
width: 57px;
}
#div3 {
float: right;
width: 57px;
}
#div2 {
width: 870px;
margin: 0 57px;
}
#global_div { width: 984px; }

<div id="global_div">
<div id="div1">Левый</div> <div id="div2">Средний</div> <div id="div3">Правый</div>
</div>

У меня все отлично на всех браузерах...

Добавлено через 35 секунд
При условии что нет никаких дополнительных рамок и padding'ов

mr.Anderson

Дата 20.9.2008, 17:52 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

K1ng, ага, эт как вариант.

--------------------

K1ng

Дата 20.9.2008, 17:56 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 7.8.2008
Где: Украина -> Хар ьков

Репутация: нет
Всего: нет

Это к тому же и легче, и надежнее, но IE6 создает 3-х пиксельные зазоры между, по горизонту выравненными, дивами если задать высоту (height)...

mr.Anderson

Дата 20.9.2008, 18:37 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

K1ng, какая ж тут значит надежность... smile

Мой вариант в эксплорере отрабатывает прекрасно. 6-я версия.

--------------------

K1ng

Дата 20.9.2008, 19:04 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 7.8.2008
Где: Украина -> Хар ьков

Репутация: нет
Всего: нет

Только что попробовал твой вариант, без всяких ширин и высот...
Если задать трем элементам выравнивание по левой стороне то они будут строиться друг под другом, а не по горизонтали, разве нет?

mr.Anderson

Дата 21.9.2008, 10:59 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

K1ng, в том-то и дело, что у меня мой вариант создает нормально три слоя друг за другом по горизонтали.

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »