Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Построение расбивки страницы, Не до конца вышло поработать с table 
:(
    Опции темы
Pitbul
Дата 22.5.2009, 20:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Fruzenshtein
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет



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

Работа кассается работы с расбивкой страницы с помощью тега <table>
Результат своей цели работы изобразил на рисунке:
user posted image

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

<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  smile  smile 
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
bars80080
Дата 23.5.2009, 00:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



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



Цитата(Pitbul @  22.5.2009,  20:22 Найти цитируемый пост)
<tr><td height=100 colspan="3" ><h1 align=center>TOP</h1></td></tr>

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


Цитата(Pitbul @  22.5.2009,  20:22 Найти цитируемый пост)
<table width=100% cellspacing="0" border=1>
    <tr><th bgcolor=#66ff00>item1</th>
    <tr><td>Link1</td>
    <tr><td>Link2</td>

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

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


Цитата(Pitbul @  22.5.2009,  20:22 Найти цитируемый пост)
оправте меня пожалуйста, в тех местах моего кода где я сделал ошибки, которые не дают возможности реализовать задумку

да, и так вопросы не задают. обычно: хочу то-то, сделал так, а выглядит вот так. в чём проблема?
какова конкретная цель? ибо в общих чертах код отвечает поставленной задаче
PM MAIL WWW   Вверх
Pitbul
Дата 23.5.2009, 08:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Fruzenshtein
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет



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

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

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


Я предоставил скриншот-макет, на каком показано, как я бы хотел, что бы выглядила страница. А если мой код запустить то есть некие различия. Например:
Рамки вокруг TOP & Bottom нет, и зона item1 не примыкает к TOP, как item1 & item3, вот эти вещи и хотел бы исправить smile 
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
bars80080
Дата 23.5.2009, 12:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(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; }

PM MAIL WWW   Вверх
Pitbul
Дата 23.5.2009, 15:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Fruzenshtein
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет



Спасибо smile , применил все кроме:

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

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


--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
bars80080
Дата 24.5.2009, 00:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(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; }

PM MAIL WWW   Вверх
Pitbul
  Дата 25.5.2009, 19:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Fruzenshtein
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет



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

Это сообщение отредактировал(а) Pitbul - 25.5.2009, 19:23
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
Pitbul
Дата 25.5.2009, 19:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Fruzenshtein
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет



Решение пришло с помощью добавления во второй ряд ячеек в тег <td> атрибута valign=top
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0558 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.