Table => Div

Nack · April 23, 2012

Здравствуйте. Надеюсь на вашу помощь: необходимо перевести данный табличный код в дивный вариант.


<table cellpadding="0" cellspacing="0" align="center" width="100%"><tr><td class="header-left"></td><td> /* Здесь фоновое изображение */
<table cellpadding="0" cellspacing="0" class="f1topline"><tr> /* Здесь фоновое изображение */
 <td class="head" align="center">Ваш сайт.ру</td>
 <td>текст</td>
 <td>Текст</td>
 <td>Текст</td>
 <td>Текст</td>
 <td>{login}</td>
 <td>текст</td>
</tr></table></td><td class="header-right"></td></tr></table> /* Здесь фоновое изображение */

Каким образом это можно реализовать?

Спасибо.

Edited April 23, 2012 by Nack

alex_anderr · April 23, 2012

Без макета не ясно как оптимизировать создание всех этих дивов )

Если у вас табличные данные, то вторая таблица может остаться.

И еще у вас два закрывающих table. И еще изображение не находится в ячейке, что не правильно.

Nack · April 23, 2012

Без макета не ясно как оптимизировать создание всех этих дивов )

Стили для этих дивов я задам сам Хотелось бы в общей сложности увидеть 'шапку' кода ))

Код немного поправил...


<table cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>

<td class="header-left"></td>

<td><table cellpadding="0" cellspacing="0" class="header-center"><tr></tr></table></td>

<td class="header-right"></td>

</tr>
</table>


.header-center {
  width:100%;
  height:49px;
  background: #000 url('../images/header-center.png') top repeat-x;
}

.header-left {
  height:49px;
  width:15px;
  background: url('../images/header-left.png')left top no-repeat;
}

.header-right {
  width: 15px;
  height: 49px;
  background: url('../images/header-right.png') right top no-repeat;
}

Edited April 23, 2012 by Nack

alex_anderr · April 23, 2012

<div class='main'>
   <div class='header-left'></div>
   <div class='header-center'></div>
   <div class='header-right'></div>
   <div class='clear'></div>
</div>

Можно обойтись без main и просто вставить в body.

Судя по вашему запросу:

http://htmlbook.ru/layout

--


.header-center {
  width:1000px;
  height:49px;
  float:left;
  background: #000 url('../images/header-center.png') top repeat-x;
}

.header-left {
  height:49px;
  width:15px;
  float:left;
  background: url('../images/header-left.png')left top no-repeat;
}

.header-right {
  width: 15px;
  height: 49px;
  float: right;
  background: url('../images/header-right.png') right top no-repeat;
}
.clear {
  clear:both;
}

Это фиксированный макет.

Резиновый http://uggallery.audiopeace.ru/examples/3-cols-template/ в исходном коде.

Edited April 23, 2012 by alex_anderr

Nack · April 23, 2012

Спасибо за помощь, но получилась вот такая картина:

Пробовал выставлять position:absolute для левых и правых блоков, не помогло...

Edited April 23, 2012 by Nack

alex_anderr · April 23, 2012

<style type="text/css">
body {
    margin : 0;
    padding: 0;
}
.main {
    width: 1000px;
    margin: 0 auto;
}
.header-left {
    width: 250px;
    height: 50px;
    float: left;
    background: #aaa;
}
.header-center {
    width: 700px;
    height: 40px;
    float: left;
    background: #ccc;
}
.header-right {
    width: 50px;
    height: 30px;
    float: left;
    background: #a32;
}
.clear {
    clear:both;
}
</style>
</head>

<body>

<div class='main'>
   <div class='header-left'></div>
   <div class='header-center'></div>
   <div class='header-right'></div>
   <div class='clear'></div>
</div>

</body>

Прошу прощения, совсем на скорую руку.

Edited April 23, 2012 by alex_anderr

Nack · April 23, 2012

Спасибо больше! Принцип понял :yahoo:

Тему можно закрыть)

Sign In

Table => Div

Question

Nack

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

alex_anderr

Link to comment

Share on other sites

Nack

Link to comment

Share on other sites

alex_anderr

Link to comment

Share on other sites

Nack

Link to comment

Share on other sites

alex_anderr

Link to comment

Share on other sites

Nack

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information