trogvar
-
Posts
3 -
Joined
-
Last visited
trogvar's Achievements
Explorer (1/14)
0
Reputation
-
1) можно ли (надо ли) такой макет сверстать без таблиц
trogvar replied to trogvar's topic in Discussion of works
sertu, спасибо. Если поможете, будет здорово. Строгий док тайп поставить не получится. Этот макет я для темы cms делаю, а сторонние модули Drupal свои стили используют, которые не всегда валидные. Лучше оставить переходный тип. P.S.аськой не пользуюсь -
1) можно ли (надо ли) такой макет сверстать без таблиц
trogvar replied to trogvar's topic in Discussion of works
Veseloff, а с багом в Опере (однопиксельная горизонтальная полоска у вложенных таблиц) можете подсказать что-нибудь? -
1) можно ли (надо ли) такой макет сверстать без таблиц
trogvar posted a topic in Discussion of works
Доброго дня! Вопрос к гуру валидной вёрстки: можно ли и нужно ли такой макет переверстать только слоями? Сейчас вариант очень простой, работает везде и валидный. Но всё построено на таблицах. Только один маааленький баг - в Опере появляется однопиксельная серая полоска вдоль границы вложенных таблиц.... <!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} Заранее спасибо!