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

Div vs Table

1 2345
HapKOTuK
На сайте с 23.08.2007
Offline
30
HapKOTuK
#41
Ткач:
Shirase, не вижу разницы между дивами и таблицами кроме той, что у дивов легко можно изменять ширину, высоту и положение любых элементов в структуре, что невозможно у таблиц и минимализм кода в дивной верстке. Табличные данные конечно же легче в таблице делать.

Ткач добавил 27.08.2008 в 16:29
HapKOTuK, я вам и сверстать могу полностью, если оплатите.
Выше код рабочий выложил. Без стилей разве что, вы сами их задайте.

Ткач, 10Wmz будет достаточно за такую задачу?

Так вот - за рабочий пример, заплачу 10Wmz.

Условия - описаны выше. Работать должно в Ie/ff/opera, без JavaScript'а.

Оформлено в одном файле. (т.е. не выносите файл стилей в отдельный файл).

Не будь слишком требователен к себе - будешь неудовлетворен. Не будь слишком требовательным к другим - разочаруешься.
Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#42

Glukhov_D_O, а изюм либо платно преподаю (лично я), либо самому нужно немножечко потрудится и поискать информацию и впитать.

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

А то сейчас кто то придет и выложит код рабочий, а завтра человек этот же придет и скажет , я в этот код добавил картинку, но она стала не так как надо, в табличке было бы сразу как надо. Подскажите а? напишите рабочий код, предложите готовый вариант.

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
HapKOTuK
На сайте с 23.08.2007
Offline
30
HapKOTuK
#43
Glukhov_D_O:
Извините, конечно, но Вы выложили "рабочий код" блочной верстки "без стилей разве что"... Даже не знаю с чем и сравнить :) "Привёз кирпичей, ну а дом постройте сами, самое сложное я уже сделал" :)
Тут весь изюм именно в стилях :)

Верно подмечено :)

Я так и не смог придумать верной аналогии, и решил не писать ничего :)

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#44

HapKOTuK, да, впринципе за сабж достаточно, просто рабочий код без макета. стукните в аську.

HapKOTuK
На сайте с 23.08.2007
Offline
30
HapKOTuK
#45
Ткач:
HapKOTuK, да, впринципе за сабж достаточно, просто рабочий код без макета. стукните в аську.

Точную копию того, что я сделал выше таблицами. Без использование яваскриптов. В одном файле.

Код можно и тут, т.к. если вы сможете реализовать тот табличный функционал дивами - я думаю, код будет инетресен многим. Мне не жалко 10Wmz.

PS. Как вы понимаете, я считаю это невозможным, т.к. в своё время рыл очень много пытаясь решить эту задачку. Факт того, что это невозможно - так же полезен для раскрытия этой темы, в связи с чем предлагаю в аське не вести эти разговоры, дабы общественность в итоге увидела что я прав\неправ.

D5
На сайте с 01.08.2007
Offline
24
dudim55
#46
HapKOTuK:
Мнээ... используйте средства там, где это нужно.

Вот, например, простая задачка:
Макет:
хидер - 200 пикселей в высоту
контент - заранее не известно сколько его. может быть 100px, может быть 3000px.
футер - 100 пикселей в высоту. Если контента мало - прилипает к низу, если контента много - уезжает под контент. (с прокруткой само собой).

Сделайте это дивами. (только перед выкладыванием - протестируйте).

Табличный вариант:

<table height=100% width=100% cellspacing=0 cellpadding=0 border=1>
<tr>
<td style='height:200px;'>HEADER</td>
</tr>
<tr>
<td height=100% valign=top>CONTENT</td>
</tr>
<tr>
<td style='height:100px;'>FOOTER</td>
</tr>
</table>


Если не сложно, киньте в приват (дабы тут не захламлять тему) рабочий вариант на дивах.
Я пока не нашёл его. (JavaScript само собой не используем :) )

Ваш код работает пока не указан doctype. Следовательно верстка не валидна. Хотя вопрос важности валидности тоже спорный. Такой код уже не будет растягиваться на всю высоту.

<!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" xml:lang="en" lang="en">

<head>

<title></title>

</head>

<body>

<table height=100% width=100% cellspacing=0 cellpadding=0 border=1>

<tr>

<td style='height:200px;'>HEADER</td>

</tr>

<tr>

<td height=100% valign=top>CONTENT</td>

</tr>

<tr>

<td style='height:100px;'>FOOTER</td>

</tr>

</table>

</body>

</html>

Думаю что без js сделать валидно невозможно ни дивами ни таблицами. Могу предложить свой вариант на дивах, но с js.

<!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" xml:lang="en" lang="en">

<head>

<title></title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

<script type="text/javascript">

function initPage() {

var h;

h = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;

document.getElementById('wrap').style.minHeight = h+ 'px';

}

</script>

<!--[if IE 6]>

<script type="text/javascript">

function initPage() {

var h;

h = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;

document.getElementById('wrap').style.height = h+ 'px';

}

</script>

<![endif]-->

<style type="text/css">

body {

margin: 0px;

padding: 0px;

}

#wrap {

background: #3300FF;

position: relative;

}

.header {

height: 200px;

background: #3399FF;

}

.content {

padding-bottom: 100px;

}

.footer {

height: 100px;

width: 100%;

background: #33FFFF;

position: absolute;

bottom: 0px;

left: 0px;

}

</style>

</head>

<body onload="initPage()">

<div id="wrap">

<div class="header">Header</div>

<div class="content">Content</div>

<div class="footer">Footer</div>

</div>

</body>

</html>

Верстка макетов HTML+CSS (http://portfoliocoder.com/)
Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>&#207;&#240;&#232;&#236;&#229;&#240;</title>
<style type="text/css">
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0; width: 100%; font: 12px Tahoma, sans; color: #000;}
div.main {margin-bottom: -100px; border: none; min-height: 100%;}
div.header {height: 200px;}
div.footer {height: 100px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
div.main {height: 100%;}
</style>
<![endif]-->
</head>

<body>
<div class="main">
<div class="header">HEADER</div>
<div class="content">CONTENT</div>
</div>
<div class="footer">FOOTER</div>

</body>
</html>

сырой вариант, но по сабжу. Требует отточки некоторой, но сейчас точная коия работающая везде

HapKOTuK
На сайте с 23.08.2007
Offline
30
HapKOTuK
#48
Ткач:
сырой вариант, но по сабжу. Требует отточки некоторой, но сейчас точная коия работающая везде

О чём, собственно, я и говорил.

Возьмите FF - и начните уменьшать видимую область по вертикали. Что мы видим? Правильно, как Футер наезжает на контент.

(в IE, кстати, тоже самое)

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#49

Внес корректирвоки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>&#207;&#240;&#232;&#236;&#229;&#240;</title>
<style type="text/css">
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0; width: 100%; font: 12px Tahoma, sans; color: #000;}
div.main {margin-bottom: -100px; border: none; min-height: 100%;}
div.header {height: 200px; background: purple;}
div.footer {height: 100px; background: blue;}
div.pere {clear: both;}
div.pre {height: 100px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
div.main {height: 100%;}
</style>
<![endif]-->
</head>

<body>
<div class="main">
<div class="header">HEADER</div>
<div class="content">CONTENT</div>
<div class="pere"></div>
<div class="pre"></div>
</div>
<div class="footer">FOOTER</div>

</body>
</html>
HapKOTuK
На сайте с 23.08.2007
Offline
30
HapKOTuK
#50
Ткач:
Внес корректирвоки

Да, всё работает. (посыпает голову пеплом). :P

Теперь придётся переходить на дивы, местами очень удобно :)

1 2345

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