Форум Сайтостроение Веб-строительство

Правильно ли я верстаю дивами?

12
[Удален]
1205

Помогите пожалуйста осмыслить принцип верстки дивами.

Если у сайта, например такая структура: каждый прямоугольник это div с каким то содержимым.

Сначала я рисую красный div:

<div style="width; heigh"></div>

Затем рисую зеленые

<div style="width; heigh; float:left"></div>

<div style="width; heigh; clear:both"></div>

Затем рисую синие

<div style="width; heigh; float:left"></div>

<div style="width; heigh; float:left"></div>

<div style="width; heigh; float:left"></div>

Затем рисую коричневые

<div style="width; heigh; float:left"></div>

<div style="width; heigh; clear:both"></div>

В итоге получается

<div style="width; heigh">

<div style="width; heigh; float:left">

<div style="width; heigh; float:left"></div>

<div style="width; heigh; float:left">

<div style="width; heigh; float:left"></div>

<div style="width; heigh; clear:both"></div>

</div>

<div style="width; heigh; float:left"></div>

</div>

<div style="width; heigh; clear:both"></div>

</div>

Так можно? Или это вообще бред?

Inet-Ark
На сайте с 19.05.2010
Offline
43
Inet-Ark
#1

Правильно в данном случае - понятие растяжимое. Если все корректно отображается - значит все правильно.

MMO-игры и все, что с ними связано (http://gama.su/). Мой сайт с партнерскими программами — мало, но все надежные (http://best-pp.ru/).
[Удален]
#2
Inet-Ark:
Правильно в данном случае - понятие растяжимое.

имеет ли право на жизнь данный вариант?

Просто меня как то смущает простота. Мне кажется для более конкретного определения - ну типа чтобы уж наверняка, нужно добавлять к свойствам блока что-то еще. не?

а то что не используется position - это без разницы?

Упал доход Редирект на oovaufty.com и Сайт с Cloudflare или
BPhoenix
На сайте с 12.01.2009
Offline
66
BPhoenix
#3

А каким образом у вас синие блоки в рядочек пойдут, если у них у всех флоат лефт?

пардон, протупил )

Inet-Ark
На сайте с 19.05.2010
Offline
43
Inet-Ark
#4
ХочуВсеЗнать:
имеет ли право на жизнь данный вариант?
Просто меня как то смущает простота. Мне кажется для более конкретного определения - ну типа чтобы уж наверняка, нужно добавлять к свойствам блока что-то еще. не?

а то что не используется position - это без разницы?

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

viКing
На сайте с 20.03.2008
Offline
124
viКing
#5

Зачем для первого зеленого float:left ?

<div style="width; heigh; float:left"></div>

это абсолютно лишнее

высота - height, not heigh

[Удален]
#6
BPhoenix:
А каким образом у вас синие блоки в рядочек пойдут, если у них у всех флоат лефт?

Ну а как они пойдут еще? У первого синего блока, обтекание справа, поэтому второй блок располагается справа от него, у второго тоже обтекание справа, поэтому третий тоже располагается правее.

Inet-Ark:
Проверьте, корректно ли отображается данный код в различных браузерах. Если все нормально - вам повезло.

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

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

Inet-Ark:

Только css советую во внешний файл поместить.

Да эт все понятно - это я для наглядности так представил.

ХочуВсеЗнать добавил 08.06.2010 в 17:15

viКing:
Зачем для первого зеленого float:left ?
<div style="width; heigh; float:left"></div>

это абсолютно лишнее

логика может и глупая - уж и не помню, почему я к такому выводу пришел, но я это написал, потому что мне кажется что только задав обтекание блоку, можно затем разместить второй блок ниже относительно первого с помощью clear:both. не?

viКing
На сайте с 20.03.2008
Offline
124
viКing
#7 


<!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=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div style="width:800px; height:800px; background-color:#FF0000; padding:15px;">

<div style="height:390px; background-color: #00FF00">

<div style="width:200px; height:370px; float:left; background-color:#0066FF; margin:10px"></div>

<div style="width:200px; height:370px; float:left; background-color:#0066FF; margin:10px">
<div style="height:165px; background-color:#990000; margin:10px"></div>
<div style="height:165px; background-color:#990000; margin:10px"></div>
</div>

<div style="width:320px; height:370px; float:left; background-color:#0066FF; margin:10px"></div>

</div>

<div style="height:390px; background-color: #00FF00; margin-top:20px;"></div>

</div>

</body>
</html>

да вот в общем и весь код, за 2 минуты набросал

только размеры я не соблюдал.

[Удален]
#8
viКing:

да вот в общем и весь код, за 2 минуты набросал



только размеры я соблюдал.

ну так это еще проще. т.е. чтобы разместить один блок относительно другого ниже, вообще ничего кроме размеров не надо задавать...

И что же - так вот все и верстают?

PyMbIH
На сайте с 22.11.2009
Offline
76
PyMbIH
#9
ХочуВсеЗнать:
И что же - так вот все и верстают?

Все верстают по разному. Просто - это не значит плохо. ;)

viКing
На сайте с 20.03.2008
Offline
124
viКing
#10
ХочуВсеЗнать:
т.е. чтобы разместить один блок относительно другого ниже, вообще ничего кроме размеров не надо задавать...

да, DIV - это блочный элемент, по умолчанию он занимает всю ширину родительского блока, поэтому для дивов никогда не указывают, например, width:100%, т.к. это значение по умолчанию.

float нужно использовать только когда блоки расположены на одном уровне, в вашем примере, это синие блоки.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий