Форум Сайтостроение Веб-строительство

Помогите с версткой

SZ
На сайте с 15.09.2008
Offline
19
Ser_Z
664

Только учусь верстать. Взялся сверстать учебный макет...

Помогите правильно растянуть среднюю таблицу...не знаю что делать...она не тянется...все мозги вынес...прописать жестко height по условию задания нельзя...надо, чтобы все эффективно тянулось как в ширину, так и в высоту...

Люди добрые, если кому не тяжело...подскажите начинающему...:) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Премия "Серебряное копытце". Рога и копыта</title>

  <link rel="stylesheet" type="text/css" href="style.css" media="all" />

</head>

<body>



<table>        <!--"Шапка"-->

  <tr>

    <th id="logo"><a href="/" title="Рога и копыта"><img src="i/logo.gif" alt="Рога и копыта. Логотип" style="width: 80px; height: 80px;" />Рога и копыта</a></th>

	<th>Россия, Черноморск,<br />ул. О. Бендеры, 14<br />(0123) 12-34-56</th>

  </tr>

</table>  



<table>        <!--Основная часть-->

  <tr>

    <td id="menu" class="qw">

	   <ul>

	         <li><a href="#">О компании</a></li>

			 <li><a href="#">Магазин</a></li>

			 <li><a href="#">Наши поставщики</a></li>

			 <li><a href="#">Акции</a></li>

			 <li><a href="#">Музей О. Бендера</a></li>

		</ul>	 

    </td>

	<td class="qw">

	  <ol><li><a href="#">Акции</a>&#8594;</li><li><a href="#">2008</a>&#8594;</li><li>Премия "Серебряное копытце"</li></ol>

	  <h1>Премия "Серебряное копытце"</h1>

	  <address><span>В на</span>*шем го*ро*де со*сто*я*лась де*ся*тая це*ре*мо*ния вру*че*ния меж*ду*на*род*ной пре*мии "Се*реб*ря*ное ко*пыт*це". Ге*не*раль*ный спон*со*ром пре*мии <span>по*преж</span>*не*му яв*ля*ет*ся ком*па*ния "Ро*га <span>и ко</span>*пы*та".</address>

	  <div>"Сереб*ря*ное ко*пыт*це" еже*год*но вру*ча*ет*ся де*я*те*лям куль*ту*ры, чьё твор*чест*во рас*кры*ва*ет те*му рог*ов <span>и ко</span>*пыт. <span>В этом</span> го*ду шесть "Ко*пыт*цев" на*шли сво*их героев.</div>

	  <p>"Сереб*ря*ное ко*пыт*це" <span>в об</span>*ла*сти <strong>ли*те*ра*ту*ры</strong>...</p>

	  </td>

  </tr>

</table>



<table id="footer">        <!--"Подвал"-->

  <tr>

    <th id="signature">OOO <a href="#">"Рога и копыта"</a>, 2008</th>

	<th>info@roga.ru</th>

  </tr>

</table>



</body>

</html>

* {

      /*Удалить все отступы по умолчанию*/

  margin: 0;

  padding: 0;

      /*устранить зазоры между ячейками*/

  border-collapse: collapse;	  

     /*привести кегль шрифта к единому уровню*/

  font-size: 100%;

}



html {

  height: 100%;

}



body {

  min-height: 100%;

  position: relative;

}



table {

  width: 100%;

}





th {

  background: #369;

  font: bold 0.8em Arial, sans-serif;

  padding: 0.5em 1.25em;

  text-align: right;

  color: #6ff;

}



td {

  background: #fcc;

  vertical-align: top;

  padding: 0.5em 1em 1.5em;

}



#logo {

font: bold 1.75em Verdana, sans-serif;

text-align: left;

text-transform: uppercase;

padding: 0 0.57em;

}

#logo img {

border: none;

margin-right: 0.57em;

vertical-align: middle;

}



#logo a {

text-decoration: none;

color: #6cc;

}



#menu {

border-right: 2px solid #639;

}



#menu ul {

  font: bold 1em Arial, sans-serif;

  list-style: none;

  margin-top: -0.25em;

  text-transform: uppercase;

}



#menu li {

 margin-top: 0.5em;

}



td a {

  color: #369;

}  



ol {

  font: bold 0.8em Arial, sans-serif;

}



ol li {

  display: inline;

  margin-right: 0.5em;

}



ol a {

  margin-right: 0.5em;

}



h1 {

  color: #369;

  font: bold 1.5em Verdana, sans-serif;

  margin: 0.67em 0;

  text-transform: uppercase;

}



div, address, p {

  text-align: justify;

  word-spacing: 0.1em;

}



address {

  font: bold 0.8em Arial, sans-serif;

  margin-bottom: 1.25em;

}



div, p {

  margin-bottom: 1em;

}  



p {

  display: list-item;

  list-style: square inside;

}



#signature {

  text-align: left;

}



#signature a {

  text-decoration: none;

  color: #6ff;

}



span {

  white-space: nowrap;

}



#footer {

  position: absolute;

  bottom: 0;

}

[Удален]
#1

Во-первых всем таблицам желательно прописать вот это:


<table cellspacing="0" cellpadding="0" border="0" width="100%">

Во-вторых, колонке с меню (левой) пропишите ширину, а правую колонку (где весь контент) оставьте без ширины. Должно получиться, хотя не все стили вы выложили.

Что за стандарт такой Яндекс кобласит Facebook тестирует новый дизайн
ydn
На сайте с 12.05.2010
Offline
12
ydn
#2
Сашко:
Во-первых всем таблицам желательно прописать вот это: 

<table cellspacing="0" cellpadding="0" border="0" width="100%">

Или же в стилях то же самое 


.table {

width: 100%;

border-collapse: collapse;

border: 0px;

}

По поводу растягивания по высоте

1) все 3 таблицы запихнуть в одну с тремя строками, жестко задать верхней и нижней строке высоту, потом там где подвал, убрать абсолютное позиционирование и задать самой строке valign="bottom"

2) самой главной таблице задать высоту 100%, при этом добавив в стили следующее 


html, body { height: 100%; }

Надеюсь эти указания вам помогут :)

Вёрстка xHTML ● WordPress > Вёрстка, программирование, настройка, консультации (/ru/forum/526726) Вёрстка на халяву (/ru/forum/569543) ICQ 853588 | Написать мне личное сообщение ()
O
На сайте с 06.08.2010
Offline
2
Opupenko
#3

Приведу решение "в лоб".

Стиль поправить:

body {

min-height: 100%;

height: 100%;

position: relative;

}

таблицы слить: 

<table style="height:100%">        <!--"Шапка"-->

  <tr>

    <th id="logo"><a href="/" title="Рога и копыта"><img src="i/logo.gif" alt="Рога и копыта. Логотип" style="width: 80px; height: 80px;" />Рога и копыта</a></th>

	<th>Россия, Черноморск,<br />ул. О. Бендеры, 14<br />(0123) 12-34-56</th>

  </tr>

  <tr style="height:100%">

    <td id="menu" class="qw">

	   <ul>

	         <li><a href="#">О компании</a></li>

			 <li><a href="#">Магазин</a></li>

			 <li><a href="#">Наши поставщики</a></li>

			 <li><a href="#">Акции</a></li>

			 <li><a href="#">Музей О. Бендера</a></li>

		</ul>

    </td>

	<td class="qw">

	  <ol><li><a href="#">Акции</a>&#8594;</li><li><a href="#">2008</a>&#8594;</li><li>Премия "Серебряное копытце"</li></ol>

	  <h1>Премия "Серебряное копытце"</h1>

	  <address><span>В на</span>*шем го*ро*де со*сто*я*лась де*ся*тая це*ре*мо*ния вру*че*ния меж*ду*на*род*ной пре*мии "Се*реб*ря*ное ко*пыт*це". Ге*не*раль*ный спон*со*ром пре*мии <span>по*преж</span>*не*му яв*ля*ет*ся ком*па*ния "Ро*га <span>и ко</span>*пы*та".</address>

	  <div>"Сереб*ря*ное ко*пыт*це" еже*год*но вру*ча*ет*ся де*я*те*лям куль*ту*ры, чьё твор*чест*во рас*кры*ва*ет те*му рог*ов <span>и ко</span>*пыт. <span>В этом</span> го*ду шесть "Ко*пыт*цев" на*шли сво*их героев.</div>

	  <p>"Сереб*ря*ное ко*пыт*це" <span>в об</span>*ла*сти <strong>ли*те*ра*ту*ры</strong>...</p>

	  </td>

  </tr>

  <tr>

    <th id="signature">OOO <a href="#">"Рога и копыта"</a>, 2008</th>

	<th>info@roga.ru</th>

  </tr>

</table>

Для высоты 100% можешь сделать стиль и применять его.

Имхо, это кривое решение.

Ну и на кой мне эта подпись?..

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий