Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Проблема с версткой div-ами в Лисе.

Автор: St. Andrew 12.5.2006, 13:47

Здравствуйте! Решил наконец-то освоить верстку с применением хваленых div-ов , но возникло несколько проблем с отображением и позиционированием блоков в браузере Mozilla Firefox. Пример странички находится http://webship.h15.ru/div/news/. Таблица стилей расположена http://webship.h15.ru/div/css/main.css В explorere отображается все как надо, а вот в Лисе - сами видите, какое безобразие. smile

Очень хочется понять, какие очевидные лаги имеются в коде. В особенности меня удивляет середина страницы. По сути - в середине находится большая вертикальная ячейка таблицы, в которую последовательно добавляются блоки div с информацией (сейчас - их на страничке 3) Но в Мозилле получается такая тема -
1) Блоки запросто выходят за пределы таблицы, вместо того, чтобы ее растягивать. Тем не менее, находятся они именно в ячейке таблицы.
2) Сами блоки понимают границы друг друга. Это вроде бы верно.
3) Текст, который расположен внутри блока, блок не растягивает, а благополучно выходит за границы блока. В результате, размеры блоков вообще не изменяются, а тексты накладываются друг на друга...

Страничка пока еще сыровата, имеются невалидности. Но я уверен, что дело упирается именно в само описание div-ов и их применение. Хотя я всего лишь хотел разбить страницу на логические блоки...

Честно говоря, я только начинаю изучать верстку блоками, и хотел бы услышать мнение знающих людей по данному вопросу. Если не трудно - поделитесь, пожалуйста, советами и ссылками по сабжу.

Жду гневных ответов и идей "как сделать лучше" smile

Уверен, что почти у каждого человека найдется свое мнение на этот счет!

Автор: Replicator 12.5.2006, 17:06

1. Зачем помещать таблицу в div?
2. У тебя не указано расположение блоков. Вот они и располагаются где хотят =)

Автор: St. Andrew 12.5.2006, 22:07

Replicator, табличка внутри div, на мой взгляд, не несет в себе ничего особенно страшного. Просто нужно было как-то заголовок новости сделать. smile

Если есть идея как сделать качественнее - с радостью послушаю! Честное слово!
А если речь идет просто о большой таблице в самом главном блоке (которая делает главную разметку), то я это сделал т.к. никак не получалось разместить блоки один рядом с другим по горизонтали (тогда я еще про float не прочитал smile

Сейчас бы я, наверное, сделал бы все без таблицы. Но разве так делать нельзя и из-за этого все так ползет?

А вот по поводу расположения блоков...я не совсем понимаю. По логике они должны раполагаться друг под другом, что и видно в IE. Можно поконкретнее - что нужно указать при расположении? Речь идет о координатах?

И все-таки я никак не пойму, почему в Мозилле текст не растягивает блок... smile

Автор: Replicator 13.5.2006, 17:30

Firefox очень корректно отображает код, так что если в нем что-то не так, то это ошибка разработчика почти на 100%.

Думаю, нужно сделать

Код


position: relative; //или absolute;

и указать точные координаты каждого блока.

Автор: Greendrake 13.5.2006, 22:36

И что народ ведётся на эту верстку дивами? Нафига она? Очередное бесполезно-моднюче-понтовое веяние.

Верстайте так как удобнее и парьтесь на пустом месте.

Автор: dstorm81 13.5.2006, 23:12

на самом деле все просто зависит от прямоты рук и места откуда они растут...

Автор: St. Andrew 15.5.2006, 13:21

Replicator, твои слова по поводу корректности кода в Мозилле вызывают уважение к этому броузеру. smile

В общем, попробую координаты прописать! Может тогда и таблица не нужна будет! smile

dstorm81, идея хороша. Поддерживаю.

Автор: jsse 15.5.2006, 13:59

Недавно у меня была похожая задача.
Решение ее очень простое без использования таблиц.
С таблицами такая страница была бы потяжелее, а поисковики любят информацию на странице, а не ее код. smile

Код


#wrap {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;
}
#header {
    background: gray;
}
#left {
    float: left;
    width: 150px;
    background: green;
}
#right {
    float: right;
    width: 150px;
    background: yellow;
}
#center { 
    float: left;
    width: 56%;
}
#footer {
    background: brown;
    clear: both;
}

Код


<center>
<div id="wrap">
    <div id="header">
        HEADER
    </div>
    <div id="content">
        <div id="left">
            LEFT
        </div>
        
        <div id="center">
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT    
        </div>
        
        <div id="right">
            RIGHT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</center>

Автор: R.M. 15.5.2006, 14:53

jsse, вот что значит неуметь высказать свою мысль. Ты говорил что тебе нужно обтекание. в твоём коде обтекания нет

Автор: jsse 15.5.2006, 15:22

Цитата(Куксикус @ 15.5.2006, 14:53)

Гг.. Ты перепутал топик. Обтекание нужно здесь - http://forum.vingrad.ru/index.php?showtopic=94149

Автор: R.M. 15.5.2006, 16:17

jsse, ч не перепутал, просто по словам

Цитата(jsse @ 15.5.2006, 14:59

)

подумал что ты об этом. Сори.

Автор: St. Andrew 20.5.2006, 15:36

Продолжаем разговор smile

В общем, решил я переделать верстку заново, более грамотным образом. И теперь пишу блоки сразу на два броузера - лису и IE. Появился вопросик. В общем, хочу сделать шапку сайта - блок -> 3 рисунка, которые расположены справа, слева и в центре этого блока. Для их позиционирования использую таблицу (по другому не выходит). Код странички :

Код


<!-- Шапка -->

<div id="head_block">
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="130" align="center" valign="middle"><img src="../images/php_ban.gif"   height="67" width="130"></td>
<td width="*" align="center" valign="middle"><img src="../images/php_blog.jpg"  height="77" width="294"></td>
<td width="130" align="center" valign="middle"><img src="../images/php_ban.gif"  height="67" width="130"></td>
</tr>
</table>
</div>

И описание блока с css:

Код


#head_block {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        border-style: solid;
        border-color: red;
        border-width: 1px;
        padding-left: 10px ;
        padding-right: 10px ;
        padding-top: 0px;
        padding-bottom: 0px;
}

Я хочу, чтобы табличка с рисунками было позиционирована на всю ширину странички (без полос прокрутки). И пишу для этого - ширина блока - 100%, а ширина таблицы - 100% (естественно, рассчитывая на 100% от ширины блока). Но, как только ставлю padding , то IE и MF демонстрируют чудеса изобретательности. В IE размер блока остается 100%, а таблица слева и справа сжимается на 10 пикселей. Это - гуд. Но в MF сам блок расползается на 10 px влево и вправо, а таблица не изменяется, появляются полосы прокрутки.
Как от этого избавиться, и сделать так, чтобы в обоих броузерах все выглядело одинаково и именно на 100% в ширину?

Кстати, если из описания блока выкинуть ширину вообще, то картина становится диаметрально противоположной! В IE теперь блок растягивается, а в MF - все почему-то хорошо...

Может кто-нибудь объяснить, почему так происходит? И было бы просто классно, если бы кто-нибудь подкинул ссылку на книжку, в которой подробно излагаются вопросы позиционирования в css на примере разных броузеров!!!

Заранее спасибо за помощь! smile

Автор: bel_nikita 25.5.2006, 20:33

Точно такие же траблы с padding.
Пробывал, как описано http://forum.vingrad.ru/index.php?act=module&module=vingradfaq, но фига smile

Автор: jsse 25.5.2006, 21:43

Довольно распространенная трабла...
Как известно IE отошел от стантартов w3c, и margin воспринимает по-другому.

Существуют хаки для решения этой проблемы.

вот пример

Код


body, html {
      padding: 0;
      margin: 0;
}

#head_block {
        position: relative;
        width: 100%;
        margin: 0 0 0 -20px; /* top right bottom left */ 
        padding: 0 0 0 20px; /* top right bottom left */
}

#wrapper {
        position: relative;
        padding: 0 10px; /* top-bottom right-left */
}

Код


<!-- Шапка -->
<div id="head_block">
<div id="wrapper">
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="130" align="center" valign="middle" style="border-left: 1px green;"><img src="../images/php_ban.gif"   height="67" width="130"></td>
<td width="*" align="center" valign="middle"><img src="../images/php_blog.jpg"  height="77" width="294"></td>
<td width="130" align="center" valign="middle"><img src="../images/php_ban.gif"  height="67" width="130"></td>
</tr>
</table>
</div>
</div>

P.S. Учитесь верстать без таблиц! Таблицы используйте только для отображения табличных данных.

Автор: St. Andrew 26.5.2006, 14:21

jsse, спасибо за идею. В принципе, я тут уж сам начал подумывать о том, чтобы один блок в другой вкладывать. Обнаружил еще замечательную закономерность - если пытаться таблицу вбивать в блок, а ширину задавать в процентах, то в одном броузере проценты отсчитываются относительно того блока, к котором таблица находится непосредственно, а в другом - относительно того блока, в котором находится блок, содержащий таблицу! smile

Вот это стандарты!

А вообще проблему с шапкой я решил так:

Код


#head_block {
        position: relative;
        top: 0px;
        left: 0px;
        width: auto;
        border-style: solid;
        border-color: red;
        border-width: 1px;
        padding: 0px;
        margin: 0px;
}

Код


<div id="head_block">
<table width=100% cellpadding="0" cellspacing="0" border="0" >
<tr>
<td width="15%" align="center" valign="middle"><img src="../images/php_ban.gif"   height="67" width="130"></td>
<td width="70%" align="center" valign="middle"><img src="../images/php_blog.jpg"  height="77" width="294"></td>
<td width="15%" align="center" valign="middle"><img src="../images/php_ban.gif"  height="67" width="130"></td>
</tr>
</table>
</div>

Правда, padding решил тогда не использовать. smile

Кстати, может кто-нибудь объяснить, что означает значение auto и как оно высчитывается? Вроде работает...иногда smile

Еще из приколов IE стоит отметить, что он в упор не понимает параметр min-width. Ну а когда после верстки сайта я решил в тег body добавить margin'ы , то все эти отступы в IE благополучно уехали за пределы экрана. А Лиса в этом отношении реально рулит! Теперь я подгоняю под IE.

Давайте напишем письмо президенту, чтобы он стандарты ввел единые на css! Вот жизнь-то будет! smile