Jump to content

1) можно ли (надо ли) такой макет сверстать без таблиц


trogvar
 Share

Recommended Posts

Доброго дня!

Вопрос к гуру валидной вёрстки: можно ли и нужно ли такой макет переверстать только слоями?

Сейчас вариант очень простой, работает везде и валидный. Но всё построено на таблицах.

Только один маааленький баг - в Опере появляется однопиксельная серая полоска вдоль границы вложенных таблиц....

<!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>
<title>Grail</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" class="h">
<tr>
<td class="h1"></td>
<td class="h2"></td>
<td class="h3"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="search">
<tr>
<td>ссылка 1 | ссылка 2</td>
<td class="r">ссылка 3</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="all-cl">
<tr>
<td class="cl1"><div class="b">
<div class="b-h"></div>
<h2>Заголовок</h2>
<p>текст</p>
<div class="b-f"></div>
</div>
<div class="b">
<div class="b-h"></div>
<h2>Заголовок</h2>
<p>текст</p>
<div class="b-f"></div>
</div></td>
<td class="cl2"><div class="loon1">
<div class="loon2">
<table cellpadding="0" cellspacing="0" class="ln1">
<tr>
<td><img src="c.jpg" alt="" /></td>
<td style="text-align:right"><img src="c.jpg" alt="" /></td>
</tr>
</table>
<div class="loon3">
<h1>Заголовок 1</h1>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<p>текст</p>
</div>
<table cellpadding="0" cellspacing="0" class="ln2">
<tr>
<td><img src="c.jpg" alt="" /></td>
<td style="text-align:right"><img src="c.jpg" alt="" /></td>
</tr>
</table>
</div>
</div></td>
<td class="cl3"><div class="b">
<div class="b-h"></div>
<h2>Заголовок</h2>
<p>текст</p>
<div class="b-f"></div>
</div></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="f">
<tr>
<td>ссылка 4</td>
<td class="r">ссылка 5</td>
</tr>
</table>
</body>
</html>

@charset "utf-8";
* {font-size:100%; margin:0;}
BODY {margin:0px; padding:0px; background:#363 repeat left bottom;}
BODY, TABLE, TH, TD, UL, OL, LI {padding:0; border-collapse:collapse; list-style:none; vertical-align:top}
IMG {border:0}
/* ================ DESIGN ================ */
.clear-all {clear:both}
.h {width:100%; background:#060; background:url(b-texture.gif);}
.h1 {background:url(i1.jpg) no-repeat left top; width:300px; height:110px;}
.h2 {background:url(i2.jpg) no-repeat center top; width:300px; height:110px;}
.h3 {background:url(i3.jpg) no-repeat right top; width:300px; height:110px;}
.all-cl {width:100%}
.ln1 {width:100%; background:url(c.jpg) repeat-x}
.ln2 {width:100%; background:url(c.jpg) repeat-x}
.loon1 {background:url(b2.jpg) #960 repeat-y 0% 0%; vertical-align:top;}
.loon2 {background:url(b2.jpg) repeat-y 100% 0%; vertical-align:top;}
.loon3 {padding:0 15px;}
.cl1 {background:url(b1.jpg) #33C repeat-y 0% 0%; width:190px; padding:0 15px; vertical-align:top;}
.cl2 {background:#363; padding:0; vertical-align:top; background:url(b-texture.gif) bottom left;}
.cl3 {background:url(b1.jpg) #999 repeat-y 100% 0%; width:190px; padding:0 15px; vertical-align:top;}
.search, .f {width:100%; background-color:#FC0;/*background:url(b2.jpg);*/}
.search TD, .f TD {width:50%; vertical-align:top;}
.r {text-align:right;}
/* ================ BLOCKS ================ */
.b {padding:0; margin:10px 0; background:url(b-b.jpg) repeat-y;}
.b H2, .b P {padding:0 10px;}
.b-h {background:url(b-h.gif) top left; width:190px; height:10px;}
.b-f {background:url(b-f.gif) bottom left; width:190px; height:10px;}
/* ================ TEXT ================ */
P {padding:5px 0;}
H1 {font-size:220%;}
H2 {font-size:200%;}
H3 {font-size:180%;}
H4 {font-size:150%;}
a:link {color:#F60}

Заранее спасибо!

Link to comment
Share on other sites

Считаю что переверстывать слоями,то бишь дивами нужно,потом баг ваш проверить в осле 6 файфорксе и опере и док тайп строгий тоже нужен.Удобнее же, и код попроще читается и меньше он НАМНОГО и возни нет как с этими таблицами при верстке.Стукнитесь аську мне 464335037 ,преверстать попробуем в дивы хозяйство ваше.

Бесплатно :rolleyes: за отзыв

Edited by sertu
Link to comment
Share on other sites

sertu, спасибо. Если поможете, будет здорово.

Строгий док тайп поставить не получится. Этот макет я для темы cms делаю, а сторонние модули Drupal свои стили используют, которые не всегда валидные. Лучше оставить переходный тип.

P.S.аськой не пользуюсь :lol:

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy