Помощь в верстке слоями шаблона

Тема в разделе "Веб-дизайн", создана пользователем SUVEREN, 13 сен 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. SUVEREN

    SUVEREN

    Регистр.:
    13 фев 2008
    Сообщения:
    360
    Симпатии:
    175
    Друзья, всем привет.
    Нужна помощь. Верстаю шаблон для своего сайта, сделал шапку с помощью таблиц, а вот название сайта, и текст не влазит в саму таблицу, надо чтоб он на две или на три ячейки был. Короч с помощью обычной таблицы реализовать невозможно.
    Надо сделать это с помощью слоев, но в этом я не так силен.
    Надо слой привязать к верхушке страницы, и сделать отступ в процентах от верхнего и левого края. И самое главное, чтобы этот новый слой был сверху всей таблицы, сверху ячеек.
    Как так сделать.
    Вот привожу примерный код.
    Синим выделена шапка, к ней и надо слой привязать.
    А зеленым прочий контент, к нему привязываться не надо
    <html>
    <head>
    <title> </title>
    <meta name="generator" >
    </head>
    <body>
    <table class="head" width="100%" height="90px">
    <tr>
    <td id="headhead"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

    дальше идут всякие блоки и прочий контент
    </body>
    </html>
    Заранее спасибо
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    HTML:
    <div class="header">
    <div class="logo">
    <a href="#"><img src="img/logo.gif" alt="bla-bla-bla" /></a>
    </div>
    </div>
    <table ....
    PHP:
    .header {
    height:100px;
    margin:0 10%;
    position:relative;
    }
    .
    logo {
    position:absolute;
    top:0;
    left:0;
    }
     
    SUVEREN нравится это.
  3. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Код:
    .header{
    	position: absolute;
    	left: 0px;
    	top: 0px;
    }
    .logo{
    	position: relative;
    	padding-top:40px;
    	padding-left:30px;
    }
    HTML:
    	<div class="header">	
    		<div class="logo">sdcs</div>
    	</div>
    <table class="head" width="100%" height="90px">
    <tr>
    <td style="width:100px; background:#ff0000; height: 100px;">DV</td>
    <td style="width:100px; background:#fff000; height: 100px;">ghn</td>
    <td style="width:100px; background:#ffffy0; height: 100px;">tyr</td>
    </tr>
    <tr>
    <td style="width:100px; background:#fy0000; height: 100px;">sdv</td>
    <td style="width:100px; background:#fff000; height: 100px;">jk,</td>
    <td style="width:100px; background:#ffer000; height: 100px;">fgb</td>
    </tr>
    </table>
    Так тоже можно. Параметрами padding-top и padding-left стиля logo ты изменяешь положение элемента относительно топа и левого края.
     
    SUVEREN нравится это.
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    так, как ты написал логотип будет поверх таблицы
     
  5. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    mdss
    как просили так и сделал:))
     
  6. Razminka

    Razminka Постоялец

    Регистр.:
    12 мар 2009
    Сообщения:
    84
    Симпатии:
    30
    Прекрасно возможно что угодно реализовать с помощью таблицы, чтоб влезало на любую высоту на любое количество ячеек. Другое дело, концерн w3org или как там его называют, предписал, чтоб в таблицах были табличные данные, а логическая разметка шла слоями.
    Возьми визивиг-редактор типа Дримвьювер и переделай свою таблицу, Дримвьювер делает корректный код, потом что надо сам допишешь. Там просто легко увидеть как таблицу можно переделать - добавить-удалить строки, объединить-разделить ячейки и т.п.
     
  7. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Что для w3org является "табличными данными"?
     
  8. Razminka

    Razminka Постоялец

    Регистр.:
    12 мар 2009
    Сообщения:
    84
    Симпатии:
    30
    Насколько я понимаю - именно данные. То есть, если какую-то таблицу с данными гипотетически легко себе представить в экселе - то верстать это надо как таблицу. А разметку сайта делать таблицей - не следует.
    Или найти оригинальное определение? Лениво, если честно :ah:
     
    rafic нравится это.
  9. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Не спс:) Я понял...
     
Статус темы:
Закрыта.