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

trogvar · February 19, 2009

Доброго дня!

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

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

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

<!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}

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

Veseloff · February 20, 2009

Сделать то же самое только слоями, естественно, можно. Насчёт того нужно это или нет, так это, имхо, личное дело каждого - выбор за вами.

trogvar · February 20, 2009

Veseloff, а с багом в Опере (однопиксельная горизонтальная полоска у вложенных таблиц) можете подсказать что-нибудь?

sertu · February 21, 2009

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

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

Edited February 21, 2009 by sertu

trogvar · February 23, 2009

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

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

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

Sign In

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

Recommended Posts

trogvar

Link to comment

Share on other sites

Veseloff

Link to comment

Share on other sites

trogvar

Link to comment

Share on other sites

sertu

Link to comment

Share on other sites

trogvar

Link to comment

Share on other sites

Обсуждения

Forums

Important Information