trogvar
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by trogvar
-
-
Veseloff, а с багом в Опере (однопиксельная горизонтальная полоска у вложенных таблиц) можете подсказать что-нибудь?
-
Доброго дня!
Вопрос к гуру валидной вёрстки: можно ли и нужно ли такой макет переверстать только слоями?
Сейчас вариант очень простой, работает везде и валидный. Но всё построено на таблицах.
Только один маааленький баг - в Опере появляется однопиксельная серая полоска вдоль границы вложенных таблиц....
<!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}Заранее спасибо!
1) можно ли (надо ли) такой макет сверстать без таблиц
in Discussion of works
Posted
sertu, спасибо. Если поможете, будет здорово.
Строгий док тайп поставить не получится. Этот макет я для темы cms делаю, а сторонние модули Drupal свои стили используют, которые не всегда валидные. Лучше оставить переходный тип.
P.S.аськой не пользуюсь