Foxter.ru

Foxter.ru (https://www.foxter.ru/index.php)
-   Web-программирование (https://www.foxter.ru/forumdisplay.php?f=66)
-   -   DIV - разметка блочного типа (https://www.foxter.ru/showthread.php?t=3095)

s1mon 20.10.2006 06:44
DIV - разметка блочного типа
 
До недавнего времени часто можно было увидеть что весь сайт построен с помощью таблицы. Теперь все чаще стали использовать, так называемую, размету блочного типа:

Цитата:
Блочные элементы можно вкладывать друг в друга, но нельзя пересекать друг с другом. Строковые элементы можно как вкладывать, так и пересекать(согласно DTD и практике старых версий браузеров), но последнее делать не рекомендуется.

Совершенно естественно, что по набору атрибутов управления отображением (атрибуты описания стиля) строковые и блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента.

Обобщениями блочного и строкового элементов с точки зрения стилей выступают элементы DIV и SPAN соответственно.
Кто чем пользуется?

Я строю главный макет страницы из таблицы, а в стлобцах уже ипользую DIV. Для новостных лент и аналогичных - UL+LI. Удобно.

stihial 20.10.2006 16:19
Цитата:
Сообщение от s1mon
Я строю главный макет страницы из таблицы, а в стлобцах уже ипользую DIV. Для новостных лент и аналогичных - UL+LI. Удобно.
Я делаю точно также. Основной каркас страницы делаю на табличной вёрстке и при этом делю его на три самостоятельных таблицы: хедер + основной текст + футер, причём все их делаю отдельными include из MySQL. Все остальные вложения в таблицы уже делаю при помощи ДИВной вёрстки.

Хотя сейчас стараюсь вообще по мере возможности избегать таблиц, так как у них есть одна неприятная особенность: при загрузке страницы должно подгрузиться всё содержимое таблицы, тогда как при ДИВной вёрстке страница грузится блочно.

Ну и конечно с использованием ДИВной вёрстки сильно сокращается и становится более прозрачным код страницы за счёт более широкого использования CSS.

J.Carot 20.10.2006 18:49
Див без таблиц-кривое отображение в различных бродилках.Так-что без таблиц его никак.

Barkoff 20.10.2006 19:25
Цитата:
Сообщение от HTDX
Див без таблиц-кривое отображение в различных бродилках.Так-что без таблиц его никак.
http://www.csszengarden.com/ - зайди, посмотри. Философия css - чистый и простой код, таблицы - забытое прошлое. Там много примеров такого дизайна, просто поброди и убедишься в этом )

J.Carot 20.10.2006 19:32
х.з. Но если честно я пока САМ не вижу особой разницы в работе, кроме того, что страница по другому принципу грузится, возможно где-то и код меньше а в другом месте больше, так вот пока я в это не вдаюсь...мне не лень написать немного лишнего кода.Думаю беднее на пару КБ скачаного трафика никто не станет?

Barkoff 20.10.2006 19:46
Цитата:
Сообщение от HTDX
х.з. Но если честно я пока САМ не вижу особой разницы в работе, кроме того, что страница по другому принципу грузится, возможно где-то и код меньше а в другом месте больше, так вот пока я в это не вдаюсь...мне не лень написать немного лишнего кода.
А дело ещё и в экономии времени написания кода - блочная структура гораздо проще описывается (хотя и здесь есть тонкости и хитрости). В любом случае, блочная вёрстка - это вёрстка будущего :)

s1mon 20.10.2006 20:54
Мне не нравится, что разные браузеры как-то по-разному распознают блоки. Нужно наверное посерьезнее углубиться в сабж.

Formazon 05.12.2006 09:41
Блочная верстка думаю актуальна в нынешнюю эпоху блогов и сервисов веб 2.0 где главное скорость и удобство подачи контента. При верстке в ней столкнулся с серьезными проблемами отображения в разных браузерах.

При идеальном отображении в IE мой любимы FireFox полностью изпохабил сайт. Но в конце концов все проблемы я решил, кроме одной, как отцентрировать <div> фиксированный ширины в обоих браузерах.

Raily 21.01.2007 21:04
Я часто использую блоки, с их помощью можно делать сайты более сложные, чем при помощи таблиц.

s1mon 22.01.2007 08:07
Raily Да, сейчас это крайне удобно, особенно использование всяких z-index'ов! :)

Antony 24.01.2007 12:24
Formazon
А не пробовал так:
margin:0 auto;

s1mon что-то я про эти индексы не догнал.. как их использовать?

s1mon 24.01.2007 12:53
Цитата:
Сообщение от Antony
что-то я про эти индексы не догнал.. как их использовать?
Да легко... Допустим есть у тебя шапка сайта... красивая такая, но вот незадача - нужно туда срочно объявление влепить... А как сделать? Переверстывать шапку, ради баннера - глупое занятие, особенно если объявление в виде сложной таблицы... Так вот ты должен просто сделать зависимый DIV к этой шапке, а в DIV уже врисовать табличку с объявлением - обязательное условие - глубина слоя должна быть выше основной страницы - а это Z-index > 0. Понимаешь? :)

s1mon 25.01.2007 13:28
Есть проблема... Как заставить текст центрироваться по вертикали?
div {
width:120px;
height:120px;
border:1px solid;
border-color:#858585;
background-color:#edecec;
text-align: center;
padding:10px;
margin:10px;
font-family:Verdana;
font-size:10px;
float: left;
}
<div>DIV Element</div>

Antony 02.02.2007 10:13
s1mon Если Table, то vertical-align:middle;
А с DIV-ом не получается..

Насчет z-indexов:
Я просто делал страницу, а скажем "объявление" выравнивал абсолютно (абсолютное позиционирование)... и оно встает куда захочешь и поверх всего...
Зачем тогда указывать z-index??

s1mon 02.02.2007 10:22
Antony Бывает просто когда есть выпадающие меню, допустим вверху (горизонтальное меню), и где-нибудь в левом контентном блоке... Так вот допустим нужно чтобы верхнее перекрывало боковое, ну и так далее (я понимаю что это бред, но в данный момент я именно над этим бредом и парюсь - заказчик вредный очень)... Ну и, опять же, в этом же заказе, нужно было поверх флэша вставить DIV с новостями! :o Короче... {* Не хватает зла, даже для комментариев *}

Antony 03.02.2007 15:35
2 s1mon
div {
vertical-align: middle;
display: table-cell;
}
Так не пробовал? Выравнивает... Только какие-то понты с нормальным расположением блока... не встает туда, куда надо и косяки с маргинами-паддингами...

================================

У меня есть еще 2 вопроса связанных с ненавистным IE:

1-й вопрос:

HTML-файл: 3 блока...
<body>
<div class=LeftFoot>Left</div>
<div class=RightFoot>Right</div>
<div class=CenterFoot>Center</div>
</body>

CSS-файл:
div.LeftFoot
{
height: 92px;
background:#999;
width:150px;
float:left;
}
div.RightFoot
{
height: 92px;
background:#999;
width:150px;
float:right;
}
div.CenterFoot
{
height:92px;
margin:0 150px 0 150px;
background:#bbb;
}

в FireFox все нормально.. IE рисует между блоками не нужные белые полоски (типа маргина... у меня 3 пиксела шириной...). ОТКУДА ОНИ?! не понимаю... надо от них избавиться...

Выход - убрать из div.CenterFoot строчку height:92px;. тогда полоски исчезают, но меняется высота среднего блока.

Что к чему? Как быть?

2-й вопрос:

min-width... Как известно, в IE этот параметр не работает.. Как тогда можно задать минимальную ширину страницы? У меня резиновый сайт. И без указания этого параметра он просто сжимается до предела при уменьшении размеров окна. А хотелось бы хоть как-то ограничить это уменьшение...

s1mon 20.02.2007 13:52
Antony Попробуй с разными DOCTYPE'ами... может помочь.

Ishtar 29.03.2007 09:38
А что делать, если, напрмер, есть DIV-блок. Надо сделать solid-ную рамку вокруг него: со всех четырех сторон, кроме правого нижнего угла. А в правом нижнем углу - "скошенный уголок" (скажем под 45 градусов).

Как такое сделать? Если этот уголок реализовывать фоном, то он ведь расположится там где надо, но квадратная рамка этим рисунком не перекроется, а будет "очерчивать"...

Как быть?

Vadya corp. 29.03.2007 10:01
Ishtar делаешь растр нижнего бордюра с уголком, а потом в диве говоришь, что border-bottom: url();, ежели не пройдет, то просто внизу блока <img src=>, а для блока делаешь border:1px solid black;border-bottom:none;

Vadya corp. 29.03.2007 10:03
И посмотри код на fishki.net - там точно также сделано

_nazgul_ 03.04.2007 21:17
Цитата:
Сообщение от s1mon (Сообщение 28678)
Кто чем пользуется?
уже пол-года верстаю исключительно на div'ах. код становится более понятным и легкоредактируемым для тех кто будет править его после меня. :)

kupidon 04.05.2007 20:44
Вёрстка таблицами отмирает как класс.
Уже есть и движки, заточеные конкретно именно под удобную блочную вёрстку.
Хоть гляньте на Лебедева - сплошныя div-ы, да резина...

Antony 27.06.2007 12:13
Народ, подскажите плз кто знает:

КАК в IE можно ограничить уменьшение ширины резинового сайта? Что б он не сжимался до минимума, а была какая-то критическая ширина, меньше которой он уже не станет???

Barkoff 27.06.2007 12:40
Antony, только через всевозможные костыли. Вот несколько ссылок по теме -
http://cssing.org.ua/2005/09/02/min-width-for-ie/
http://daniel.hahler.de/2006/05/13/s..._internet_expl
http://www.cssplay.co.uk/boxes/minwidth.html

max-width, но тоже полезно -
http://www.svendtofte.com/code/max_width_in_ie/

Antony 17.08.2007 10:31
Задался вот вопросом:

Каким образом можно сделать так, что бы при сохранении страницы в броузере (через "Файл" > "Сохранить страницу...") страница сохранялась в нормальном виде (т.е. со всей графикой...)

А то при сохранении сохраняются все картинки, а бэкграунды - не сохраняются... А потом, соотетственно, при открытии локально на компе внешний вид портится... июо много бэкграундов...(((

Я имею ввиду может это можно както урегулировать средствами CSS? или HTML? не знаю даже... JS? )

Barkoff 17.08.2007 20:29
Antony, методами CSS/HTML/JS имхо никак. Только сторонними прогами, либо плагинами типа файрфоксовского расширения ScrapBook, которое сохраняет станичку в точности как она выглядит.

Grenky 28.08.2007 03:18
чтоб ветка не дохла тут сама по себе, задам вопрос по 3х колоночной верстке. Только не надо кидать ссылки на различные уроки. Я хочу узнать как вы решаете эту задачу.
PHP код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
#main{
width:200px;
float:left;
}
#left{
float:left;
width:100px;
background-color:#FF0000;}
#center{
width:100px;
margin-left:100px;
background-color:#00FF00;}
#right{
width:100px;
margin-left:200px;
background-color:#0000FF;}
</style>
</head>

<body>
<div id="main">
<div id="left">1</div>
<div id="center">2</div>
</div>
<div id="right">3</div>
</body>
</html> 
Это код простейшей верстки в три колонки. Всё логично. Но наш любимый IE все обс... так вот и интересно - как вы с этим справляетесь?
Желательно примеры не для резиновых сайтов.

Vadya corp. 28.08.2007 12:05
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
#main{
width:200px;
}
#left{
position:absolute;
width:100px;
background-color:#FF0000;}
#center{
position:absolute;
left:100px;
width:100px;
background-color:#00FF00;}
#right{
position:absolute;
width:100px;
left:200px;
background-color:#0000FF;}
</style>
</head>

<body>
<div id="main">
<div id="left">1</div>
<div id="center">2</div>
</div>
<div id="right">3</div>
</body>
</html>
нерезина


Часовой пояс GMT +3, время: 00:10.

Powered by vBulletin
Copyright ©2000-2024, Jelsoft Enterprises Ltd.