Верстка дивами - проблема

Старый mweb

Модератор: [mweb team]

Верстка дивами - проблема

Сообщение Berezkin Пн апр 14, 2008 14:58

Есть код:

Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Untitled</title>
</head>

<style>
body {padding: 0px; margin: 0px; font: 12px Arial; color: #000000;}

#top {background: #ff0000; clear: both; height: 59px;}
#left {background: #00ff00; float: left; width: 50%; height: 400px;}
#right {background: #0000ff; float: left; width: 50%; height: 400px;}
#bottom {background: #ff0000; clear: both; height: 59px;}
</style>

<body>

<div id="top"></div>

<div id="left"></div>

<div id="right"></div>

<div id="bottom"></div>

</body>
</html>


Результат должен быть следующим:
Сверху шапка. Потом две колонки и снизу подвал.

Проблема в том, что в Мозилле все ок, а Эксплорер (падла) одну из колонок под другую ставит, а не рядом. Проблема решается если у правой колонки ширину поставить не 50%, а, скажем, 49%. Но это не приемлемо.

Научите меня дивами верстать, а то все уже так делают, а я все таблицами да таблицами...
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Muerto Пн апр 14, 2008 15:09

Это "трёхпиксельный баг" в ИЕ. Решений много, например:
Код: Выделить всё
#right {background: #0000ff; float: left; width: 50%; height: 400px; //margin-left:-3px;}
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Berezkin Пн апр 14, 2008 15:56

Спасибо, помогло!
Правда работает даже при значении margin-left: -1px;

Кстати, а что это за два слэша перед маргином?
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Muerto Пн апр 14, 2008 22:19

2Berezkin: Учи хаки! -03- Типа http://cssing.org.ua/2005/11/11/ie-magic/
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Jedi Пн апр 14, 2008 22:41

а если float: right сделать?
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Сообщение ORC Вт апр 15, 2008 0:03

Блин надо будет и мне как нибудь сесть разобратся с этими дивами назойливами... а то может понравится и про таблички забуду.
------------------------------------------------
http://www.pixelbox.ru - все для фотошопа
Аватара пользователя
ORC
Прохожий
 
Сообщения: 82
Зарегистрирован: Пт апр 04, 2003 16:58
Откуда: Волгоград

Сообщение kost Вт апр 15, 2008 15:15

2Muerto: не учи хаки, а используй conditional comments для объявления стилей для IE. :)
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург

Сообщение Muerto Вт апр 15, 2008 21:56

2kost: В данном случае я имел в виду разницу между стандартом, ИЕ6 и ИЕ7.
2All: Кстати, восьмерку ИЕ кто-нить юзает?
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Padonak Вт апр 15, 2008 23:09

меня от 7 блевать тянет
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Сообщение dyadya Ср апр 16, 2008 9:05

В ИЕ8 нормально все работает
Извините, если я Вас отвлекаю...
dyadya
Прохожий
 
Сообщения: 7
Зарегистрирован: Пт апр 04, 2008 13:01
Откуда: Харьков

Сообщение dyadya Ср апр 16, 2008 9:42

Вот еще хорошую рекомендацию нашел от "разъезжания блоков"

html, body, div, p, table, pre, td, tr, th, ul, ol, li, h1, h2,
h3, h4, h5, h6, form, fieldset, img, blockquote, iframe
{
margin: 0;
padding: 0;
border: 0;
}
Извините, если я Вас отвлекаю...
dyadya
Прохожий
 
Сообщения: 7
Зарегистрирован: Пт апр 04, 2008 13:01
Откуда: Харьков

Сообщение Berezkin Ср апр 16, 2008 9:45

Тогда уж:

* {padding: 0px; margin: 0px; border: 0px;}

Или это не одно и то же?
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение dyadya Ср апр 16, 2008 9:47

Забыл сказать! Это ставится перед началом описания стилей.
Извините, если я Вас отвлекаю...
dyadya
Прохожий
 
Сообщения: 7
Зарегистрирован: Пт апр 04, 2008 13:01
Откуда: Харьков

Сообщение dyadya Ср апр 16, 2008 9:49

Забыл сказать! Это ставится перед началом описания стилей.
Извините, если я Вас отвлекаю...
dyadya
Прохожий
 
Сообщения: 7
Зарегистрирован: Пт апр 04, 2008 13:01
Откуда: Харьков

Сообщение Muerto Ср апр 16, 2008 10:38

2dyadya: От трёхпиксельного бага это не спасёт. -04-
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение dyadya Ср апр 16, 2008 21:49

Или это не одно и то же?

2Berezkin: Это просто хорошая рекомендация избавиться от умолчаний браузеров
Извините, если я Вас отвлекаю...
dyadya
Прохожий
 
Сообщения: 7
Зарегистрирован: Пт апр 04, 2008 13:01
Откуда: Харьков

Сообщение Jedi Чт апр 17, 2008 18:54

Хрена себе. уже ИЕ8 вышел. не знал
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Сообщение Skay Чт апр 17, 2008 23:03

кажись тока бетка
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Пт апр 18, 2008 9:09

http://www.microsoft.com/downloads/deta ... layLang=en
Ставить не рискнул, ибо подставит ещё новые библиотеки для шестерки, а мне с ней работать.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение kost Пт апр 18, 2008 14:42

Ставить не рискнул, ибо подставит ещё новые библиотеки для шестерки, а мне с ней работать.

И в чем проблема? Или про какие библиотеки идет речь?
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург

Сообщение Padonak Пт апр 18, 2008 19:48

про тайные муертовские библиотеки компромата собранного на всех нас -03-
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Сообщение Muerto Пт апр 18, 2008 20:30

2kost: Если установить семёрку параллельно шестерке, то шестёрка изменит своё поведение. Они используют общие библиотеки и семерка их апдейтит при установке. И даже если потом семерку снести, библиотеки останутся
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение kost Пн апр 21, 2008 0:42

То есть, под IE7 разработка не ведется?

У меня стоит IE7 и MultipleIE (6, 5.5, 5.01).
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург

Сообщение Muerto Пн апр 21, 2008 10:01

2kost: Не у меня семерка отдельно, на ноуте стоит для проверки.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Berezkin Чт июл 17, 2008 12:09

Продолжаю изучать верстку дивами. Возникло несколько вопросов (код см. ниже):
1. Почему синий фон заезжает на красный (IE)? Как от этого избавиться?
2. Что за пустое пространство сверху? Откуда оно взялось?

Сама страничка тут: http://greatrash.hut2.ru/

Код:
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<html>
<head>
   <title>Head</title>
   <meta http-equiv="content-type" content="text/html; charset=win-1251">
   <link rel="stylesheet" type="text/css" media="screen" href="default.css">
</head>

<body>

<div id="head">
   <h1>Head</h1>
</div>

<div id="container">
   <div id="left">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem.
      Nullam a eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbi nonummy semper est.
      Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy
      tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor.
      Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus
      varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.
   </div>
   
   <div id="right">
      lhsgadf;gsad;hg
   </div>
</div>

<div id="foot">
   lhsgadg dpsdagasdi;g fd;asg dsds g
</div>

</body>
</html>


Код CSS:
Код: Выделить всё
body {
   background: #1E1E1E;
   color: #FFFFFF;
   font: 12px "Trebuchet MS", Arial, Helvetica;
   margin: 0px;
   padding: 0px;
}

/* Head */
#head {
   height: 100px;
   background: #14A500;
}

#head h1 {
   color: #FFFFFF;
   font: bold 24px "Trebuchet MS", Arial, Helvetica;
   padding: 35px 0px 0px 15px;
}
/* end Head */

/* Container */
#container {
   
}
/* end Container */

/* Left */
#left {
   float: left;
   background: #ff0000;
   width: 80%;
}
/* end Left */

/* Right */
#right {
   float: left;
   width: 20%;
   margin-left: -1px;
   background: #00ff00;
}
/* end Right */

/* Foot */
#foot {
   background: #0000ff;
   clear: both;
}
/* end Foot */
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Muerto Чт июл 17, 2008 12:23

Berezkin писал(а):Продолжаю изучать верстку дивами. Возникло несколько вопросов (код см. ниже):
1. Почему синий фон заезжает на красный (IE)? Как от этого избавиться?

После закрытия <div id="container"> поставь <br clear="all" /> или див со стилями
Код: Выделить всё
font-size:0;
line-height:0;
height:0;
clear: both;

Berezkin писал(а):2. Что за пустое пространство сверху? Откуда оно взялось?

Код: Выделить всё
#head h1 {
padding-top: 35px;
}
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Berezkin Чт июл 17, 2008 13:34

Спасибо, с дивом помогло. А вот пустое пространство не пропало, может это у хостера ботва какая?
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Muerto Чт июл 17, 2008 13:38

2Berezkin: Так ты padding-top: 35px; так и не убрал.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Berezkin Чт июл 17, 2008 13:44

аааа, убрать надо, а я подумал, что наоборот только top оставить...
еще вопрос, как сделать чтобы блок слева был резиновый, а справа - фиксированный?

upd
нифига не помогает убирание паддинга
Резиновую левую часть сделал! Просто добавил маргин = -200 пикселей (ширина блока справа), а потом поместил внутрь левого блока еще один блок, которому поставил margin: 15px 15px 15px 215px;. Вообще насколько это правильно? И нормально ли будет отображаться в др. браузерах?
Последний раз редактировалось Berezkin Чт июл 17, 2008 14:05, всего редактировалось 1 раз.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Muerto Чт июл 17, 2008 14:01

Убери второе открытие HTML и скрипты - должно заработать.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Berezkin Чт июл 17, 2008 14:10

Ой, второго html не увидел, убрал, все равно не помогает. Скрипты не мои - это хостер свой баннер, видимо, добавляет.
Хм, возникают смутные сомнения, что баннер не добавляется из-за отсутствия таблиц... Чувствую скоро меня лишат хостинга из-за этого.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Muerto Чт июл 17, 2008 14:12

Berezkin писал(а):еще вопрос, как сделать чтобы блок слева был резиновый, а справа - фиксированный?

Вариантов много. Простейший:
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Head</title>
   <meta http-equiv="content-type" content="text/html; charset=win-1251">
</head>
<body>
<div id="head">
   <h1>Head</h1>
</div>
<div id="container">
   <div id="right" style="float:right; width:200px;">
      lhsgadf;gsad;hg
   </div>
   <div id="left" style="margin-right:200px;">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem.
      Nullam a eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbi nonummy semper est.
      Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy
      tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor.
      Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus
      varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.
   </div>
</div>
<br clear="all" />
<div id="foot">
   lhsgadg dpsdagasdi;g fd;asg dsds g
</div>
</body>
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Верстка дивами - проблема

Сообщение IceBerg Вт дек 16, 2008 15:54

Великая вещь - поиск по форуму, хаспада! -01-
Вот, я снова у вас...
IceBerg
Аватара пользователя
IceBerg
Дарю хорошее настроение
 
Сообщения: 377
Зарегистрирован: Вт фев 20, 2001 1:01
Откуда: Moscow

Re: Верстка дивами - проблема

Сообщение Alkeeper Ср дек 17, 2008 18:36

kost писал(а):У меня стоит IE7 и MultipleIE (6, 5.5, 5.01).


Разница (только ие6 vs. ие7 + multipleIE 6, 5...) проявляется, но не всегда.
Опять же IEDevToolbar из-под 6-ки не работает.
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb


Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 31

cron