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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> HTML страница, Дайте несколько советов по верстке 
:(
    Опции темы
Pitbul
  Дата 31.8.2009, 15:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Fruzenshtein
*


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

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



Добрый день, я сверстал HTML страничку, но ее структура далека от идеала - нерационально используются *.jpg в бэкграундах.

Подскажите пожалуйста, как можно реализовать создание бэкграундИмэджей в таблицах, по схеме:

-top.jpg >>> no-repeat
-middle.jpg >>> repeat-y
-bottom.jpg >>> no-repeat

Я так понимаю в этом построении идет экономия ресурсов трафика за счет единаждой загрузки "полоски" middle.jpg и дальнейшего ее повтора до скольки надо за счет repeat-y 
 smile  smile  smile 

Присоединённый файл ( Кол-во скачиваний: 3 )
Присоединённый файл  matrograd.net.rar 148,57 Kb
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
bars80080
Дата 31.8.2009, 17:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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



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

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



разбиваете общий блок на несколько, делается это либо таблицей, либо вложенными дивами. укаждого свой бэкграунд. углы no-repeat, впромежутки - repeat-x и repeat-y
PM MAIL WWW   Вверх
Pitbul
Дата 31.8.2009, 18:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Fruzenshtein
*


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

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



bars80080

С тегами <div> я не очень хорошо работаю. smile 

А если использовать <table> для этих целей, то надо каждый элемент разбивать на 3 мини <table> правильно? smile 
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
brother79
Дата 31.8.2009, 19:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

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



Цитата(Pitbul @  31.8.2009,  18:11 Найти цитируемый пост)
А если использовать <table> для этих целей, то надо каждый элемент разбивать на 3 мини <table> правильно? smile 



А зачем тебе 3 минитаблицы? одну с 3-мя колонками и у каждого столбца фон в цсс

Но я бы лучше всётаки посоветовал дивы освоить, они гибче и элегантней.


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


Fruzenshtein
*


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

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



brother79

Т.е. лучше создавать одну таблицу и в CSS прописывать правила для ее трех <td> smile 

Ну а <div> я освою, но в ближайшее время не выйдет smile 
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
brother79
Дата 1.9.2009, 04:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

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



Цитата(Pitbul @  31.8.2009,  20:15 Найти цитируемый пост)
Т.е. лучше создавать одну таблицу и в CSS прописывать правила для ее трех <td> smile 


Ну да, цсс, довольно сильная штука. Первый раз мне тоже было страшно книжку по цсс читать, но на самом деле, используя цсс - можно любой блок перестроить как тебе надо, чтобы не лепить новых, соответственно потому дивы и приобретают популярность, а таблицы уходят в прошлое, что див - это нечно бесформенное, у которых мало что предопределенно, а всё остальное поведение стилями можно задать любое. Единственный случай, где я продолжаю юзать таблицы - когда надо сделать именно таблицу, с одинаковыми по высоте строками, т.к.  с дивами это геморно, или надо js подключать. Хотя если бы небыло микрософта - было бы намного проще.


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


Fruzenshtein
*


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

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



brother79
Ну пока что попробовал только внутри таблиц использовать <div> с разными графичискими эфектами. А так что бы целую страницу сверстать блоками, то наверное еще не смогу=)

ПРОБЛЕМА РЕШЕНА! smile 
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
olegti
Дата 1.9.2009, 17:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 62
Регистрация: 9.7.2009

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



это будет выглядеть примерно так

Код


<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="top">top</td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="center">center</td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="bottom">bottom</td>
  </tr>
</table>



для каждой ячеки (td), прописавыешь класс, где указываешь сам "background" и его свойства "repeat" и т.д.
PM MAIL   Вверх
brother79
Дата 1.9.2009, 19:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

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



А смысл делать 3 таблицы в каждой по 1 строке и по 1 столбцу? Можно 1 на 3 строки, без отступов и бордюров, а лучше вообще 3 дива у каждого:

float:left;
width:100%;
height:<высота>;

ну и соотвественно background со всеми нужными параметрами.





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


Fruzenshtein
*


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

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



brother79, olegti
Спасибо, интресные методики, но все таки я так понимаю <table> использовать это действительно по олдскульному. 
Буду учиться <div> стилю smile  smile  smile 
--------------------
### JAVA  ######  programming ###
PM MAIL WWW ICQ Skype   Вверх
bars80080
Дата 1.9.2009, 22:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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



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

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



Цитата(brother79 @  1.9.2009,  19:24 Найти цитируемый пост)
float:left;

а это зачем, для вертикально расположенных дивов?


olegti, это будет выглядеть примерно так
Код

<style>
table { border-collapse: collapse; border: 0px; width: 100%; }
</style>
<table>
  <tr><td class="top">top</td></tr>
  <tr><td class="center">center</td></tr>
  <tr><td class="bottom">bottom</td></tr>
</table>
смотрите, как чисто и аккуратно смотрится разметка в соответствии с правилами css, даже на таком маленьком примере
PM MAIL WWW   Вверх
brother79
Дата 2.9.2009, 06:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

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



Цитата(bars80080 @  1.9.2009,  22:21 Найти цитируемый пост)
а это зачем, для вертикально расположенных дивов?


Не спорю, есть и другие варианты, но мне так проще. Есть вар-ны, когда дивы просто друг на друга ложатся, я иногда такие приёмы использую, но в этой теме немного плаваю, но если им поставить float:left и по ширине они не влезают - то они железно друг за другом лягут.

Вообще всегда есть масса вар-ов вёрстки, с одним результатом внешне, и всегда можно выбрать.

Добавлено через 1 минуту и 46 секунд
Цитата(bars80080 @  1.9.2009,  22:21 Найти цитируемый пост)
смотрите, как чисто и аккуратно смотрится разметка в соответствии с правилами css, даже на таком маленьком примере 


Ты забыл про высоту строки, т.к. если картинка будет фоном, а не img - то надо высоту руками писать 


--------------------
PM MAIL WWW   Вверх
bars80080
Дата 2.9.2009, 10:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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



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

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



brother79, я всего лишь переписал то что предложил olegti, там много чего нет
PM MAIL WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




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


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

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