Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Построение расбивки страницы

Автор: Pitbul 22.5.2009, 20:22

Всем доброго времени суток! Уже создавал несколько тем на ВинГраде по поводу своих ВЭБ начинаний. Теперь вот хочу попросить поправить меня в моей первой работе.

Работа кассается работы с расбивкой страницы с помощью тега <table>
Результат своей цели работы изобразил на рисунке:
http://ipicture.ru/Gallery/Viewfull/19290456.html

А результат моей работы выкладываю кодом:

<html>
<head>
  <title>использование table & table для создания разбивки страницы</title>
</head>

<body>
  <table align="center" colos=3 width=75% cellspacing="0">

  <tr><td height=100 colspan="3" ><h1 align=center>TOP</h1></td></tr>

  <tr>

    <td width=16%>
        <table width=100% cellspacing="0" border=1>
    <tr><th bgcolor=#66ff00>item1</th>
    <tr><td>Link1</td>
    <tr><td>Link2</td>
    </table>
    </td>

    <td>
    <table align=top width=100% cellspacing="0" border=1>
    <tr><th>item2</th>
    <tr><td>Text...</td>
    </table>
    </td>

    <td width=20%>
    <table width=100% cellspacing="0" border=1>
    <tr><th bgcolor=#66ff00>item3</th>
    <tr><td>
     <ul>
     <li>link1</li>
     <li>link2</li>
     </ul>
    </td>
    </table>
    </td>

  </tr>
  <tr><td height=100 colspan="3" ><h1 align=center>Bottom</h1></td></tr>
</table>
</body>
</html>

Поправте меня пожалуйста, в тех местах моего кода где я сделал ошибки, которые не дают возможности реализовать задумку smile

Автор: bars80080 23.5.2009, 00:52

1. пользуемся кнопкой код. если бы воспользовался, то достаточно было бы назвать номера ошибочных строк, а теперь придётся изворачиваться

Цитата(Pitbul @ 22.5.2009, 20:22

)

при всём желании 100 пикселей на всю таблицу - мало

Цитата(Pitbul @ 22.5.2009, 20:22

)

можно, не непонятно зачем. есть такие вещи, как списки ul, li

здесь же, не закрыты строчки (нет </tr>). тэги всегда надо закрывать, даже <br />

Цитата(Pitbul @ 22.5.2009, 20:22

)

оправте меня пожалуйста, в тех местах моего кода где я сделал ошибки, которые не дают возможности реализовать задумку

да, и так вопросы не задают. обычно: хочу то-то, сделал так, а выглядит вот так. в чём проблема?
какова конкретная цель? ибо в общих чертах код отвечает поставленной задаче

Автор: Pitbul 23.5.2009, 08:43

Со всем согласен, исправлюсь.

А на счет последнего:

Цитата

да, и так вопросы не задают. обычно: хочу то-то, сделал так, а выглядит вот так. в чём проблема?
какова конкретная цель? ибо в общих чертах код отвечает поставленной задаче

Я предоставил скриншот-макет, на каком показано, как я бы хотел, что бы выглядила страница. А если мой код запустить то есть некие различия. Например:
Рамки вокруг TOP & Bottom нет, и зона item1 не примыкает к TOP, как item1 & item3, вот эти вещи и хотел бы исправить smile

Автор: bars80080 23.5.2009, 12:46

Цитата(Pitbul @ 23.5.2009, 08:43

)

Рамки вокруг TOP & Bottom нет, и зона item1 не примыкает к TOP, как item1 & item3, вот эти вещи и хотел бы исправить

вот это и есть вопросы

рамка вокруг элемента делается с помощью стиля border

Код


<style>
.shir { border: solid 1px #999999; }
</style>
<tr><td height=100 colspan="3" class="shir"><h1 align=center>TOP</h1></td></tr>

...

<tr><td height=100 colspan="3" class="shir"><h1 align=center>Bottom</h1></td></tr>

зона item1 не примыкает к TOP, как item1 & item3

надо обязательно указывать следующие стили в самом начале:

Код


* { margin: 0px; padding: 0px; }
table { border: 0px; border-collapse: collapse; }

Автор: Pitbul 23.5.2009, 15:58

Спасибо

, применил все кроме:

* { margin: 0px; padding: 0px; } --- Не понимаю что оно делает=/

Но вид странички стал симпотичнее после этих апгрейдов, но остался еще один штрих в работе:
item1,2,3 должны иметь общую черту выравнивания относительно TOP, к примеру пусть они располагаются на расстоянии 3 пикселей от ТОР'а. smile

Автор: bars80080 24.5.2009, 00:36

Цитата(Pitbul @ 23.5.2009, 08:43

)

и зона item1 не примыкает к TOP

Цитата(Pitbul @ 23.5.2009, 15:58

)

* { margin: 0px; padding: 0px; }

этот стиль должен применяться всегда, во всех случаях. дословно он означает обнуление внутренних и внешних полей у всех элементов

Цитата(Pitbul @ 23.5.2009, 15:58

)

item1,2,3 должны иметь общую черту выравнивания относительно TOP, к примеру пусть они располагаются на расстоянии 3 пикселей от ТОР'а

после применения стиля * { margin: 0px; padding: 0px; }, если структура у колонок одинаковая, то должны быть одинаковыми

нужный отступ можно задать так:

Код


<tr><td height=100 colspan="3" class="shir"><h1 align=center>TOP</h1></td></tr>

  <tr class="qw">

Код


.qw table { margin-top: 3px; }

Автор: Pitbul 25.5.2009, 19:12

все решил проблему smile

Автор: Pitbul 25.5.2009, 19:35

Решение пришло с помощью добавления во второй ряд ячеек в тег <td> атрибута valign=top