Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > HTML страница


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

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

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

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

Автор: bars80080 31.8.2009, 17:55
разбиваете общий блок на несколько, делается это либо таблицей, либо вложенными дивами. укаждого свой бэкграунд. углы no-repeat, впромежутки - repeat-x и repeat-y

Автор: Pitbul 31.8.2009, 18:11
bars80080

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

А если использовать <table> для этих целей, то надо каждый элемент разбивать на 3 мини <table> правильно? smile 

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



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

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

Автор: Pitbul 31.8.2009, 20:15
brother79

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

Ну а <div> я освою, но в ближайшее время не выйдет smile 

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


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

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

ПРОБЛЕМА РЕШЕНА! smile 

Автор: olegti 1.9.2009, 17:54
это будет выглядеть примерно так

Код


<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" и т.д.

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

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

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



Автор: Pitbul 1.9.2009, 21:13
brother79, olegti
Спасибо, интресные методики, но все таки я так понимаю <table> использовать это действительно по олдскульному. 
Буду учиться <div> стилю smile  smile  smile 

Автор: bars80080 1.9.2009, 22:21
Цитата(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, даже на таком маленьком примере

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


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

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

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


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

Автор: bars80080 2.9.2009, 10:05
brother79, я всего лишь переписал то что предложил olegti, там много чего нет

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)