Как мне растянуть среднюю таблицу?

serking · August 6, 2010

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

Помогите правильно растянуть среднюю таблицу...не знаю что делать...она не тянется...все мозги вынес...прописать жестко 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>→</li><li><a href="#">2008</a>→</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;
}

типо макет

bravada j · August 6, 2010

Что значит "не тянется"? Если высота таблицы не указана то она как раз таки и будет тянутся в высоту по мере количества контента в ней.

Или вам нужно растянуть ее на всю высоту окна? В таком случае вопрос задан некорректно.

serking · August 6, 2010

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

Great Rash · August 6, 2010

Такие вещи надо делать дивами, а не таблицами. Если все-же хотите таблицами, то сделайте одну таблицу для шапки, контента и подвала, а не три разных. И смените доктайп на transitional или вообще на HTML. Потому что при strict растянуть среднюю ячейку у таблицы проблематично на сколько я помню...

Вот пример верстки дивами: http://dimox.name/press_footer_bottom_with_css/

Sign In

Как мне растянуть среднюю таблицу?

Question

serking

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

bravada j

Link to comment

Share on other sites

serking

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information