Unkrada
-
Posts
3 -
Joined
-
Last visited
Unkrada's Achievements
Explorer (1/14)
-4
Reputation
-
Не получается сделать такую картинку Нужно, чтобы текст внутри был и таблица под него растягивалась. Когда меняю doctype на xhtml, то все работает как надо, но хочется сделать на html4.01. В чем может быть проблема подскажите. Использую такой код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Рисунок</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <table class="pt"> <thead> <tr><td> <table class="pt"> <tr><td width="23"><img src="img/thl.gif" width="23" height="44" alt=""></td> <td class="thbgr" nowrap>dwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd</td> <td width="12"><img src="img/thr1.gif" width="12" height="44" alt=""></td> <td class="p"> </td> <td width="15" valign="top"><img src="img/thr2.gif" width="15" height="44" alt=""></td> </tr> </table> </td></tr> </thead> <tbody> <tr class="gh"> <td>fgfgdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfs </td> </tr> </tbody> <tfoot> <tr><td> <table class="pt"> <tr> <td width="15" valign="bottom"><img src="img/tfl.gif" width="15" height="44" alt=""></td> <td class="p"> </td> <td width="12"><img src="img/tfl2.gif" width="12" height="44" alt=""></td> <td class="thbgr" nowrap>dwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd fsfsd fdsfsd fsdfsdwdwdwd</td> <td width="23"><img src="img/tfr.gif" width="23" height="44" alt=""></td> </tr> </table> </td></tr> </tfoot> </table> </body> </html> Код CSS: html { background:#ffffff; } .pt { width:100%; border:0; cellspacing:0; cellpadding:0; background:#c7d1f1; } .p { background:#c7d1f1; width:100%; height:44px; } .thbgr { background:url('../img/thbgr.gif') repeat-x; height:44px; } .gh { background:#c7d1f1; } .ic { height:44px; } Получается вот так: Нижние левый и правый углы ведут себя мягко говоря не хорошо
-
Пока никак нельзя отказываться от таблиц, с их помощью можно делать закругленные углы. border-radius не все поддерживают, хотя для каждого браузера можно прописать: для mozilla: moz-border-radius:30px; для opera: o-border-radius:30px; но для IE 6 придется применить таблицы с картинками.
-
Можно использовать списки, и тогда нет разницы какой HTML. Но чтобы отображалось в IE 6 нужно использовать хак или скрипты. Придется исхитрятся. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="fixie.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Горизонтальное выпадающее 3-x уровневое меню</title> <style type="text/css"> #nav, #nav ul{ list-style:none; margin:0; padding:0; background-color: #444444; font:12px/28px Verdana, Arial, Helvetica, sans-serif; } #nav{ height:28px; width:660px; border:1px solid #000; } #nav li{ float:left; position:relative; } #nav li:hover, #nav li.jshover{ background-color: #333; } #nav a{ display:block; width:80px; color:#fff; padding:0 20px; text-align:center; text-decoration:none; border-right:1px solid #000; } #nav a:hover{ background-color:#ccc; color:#000; } #nav ul{ border:1px solid #000; border-top:0; border-bottom:0; visibility:hidden; width:118px; position:absolute; top:28px; left:0; } #nav ul a{ border:0; border-bottom:1px solid #000; width:78px; } #nav li:hover ul, #nav li.jshover ul{visibility:visible;} #nav li:hover li ul, #nav li.jshover li ul{ border-top:1px solid #000; top:-1px; left:118px; visibility:hidden; } #nav li:hover li:hover ul, #nav li.jshover li.jshover ul{ visibility:visible; } </style> </head> <body> <ul id="nav"> <li><a href="#">Главная</a></li> <li><a href="#">Уроки</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a> <ul> <li><a href="#">Верстка</a></li> <li><a href="#">Техники</a></li> <li><a href="#">Хаки</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul> </li> <li><a href="#">Статьи</a></li> <li><a href="#">Учебники</a></li> <li><a href="#">Контакты</a></li> </ul> </body> </html> Это урок не помню кто делал, но если не ошибаюсь Попов, не плохо для начинающих. Посмотрите, есть его видео урок в инете, не найдете пишите в личку, если что вышлю.