XHTML: баннер (встроенные div) - PullRequest
0 голосов
/ 23 января 2012

Я хочу сделать следующее:

------------------------------------------------
width: 100%;
height: 60px


                  image center


                               image bottom/right
-------------------------------------------------

Раньше я делал это с таблицей:

<table border="0">
<tr>
 <td width="25%"></td>
 <td width="50%"><center>image center</center></td>
 <td width="25%" valing bottom><div align="right">image bottom/right</div></td>
</tr>
</table>

но они говорят, что использование таблиц для форматирования плохо (не знаю почему) Так есть ли идея, как сделать следующий баннер? Я слышал, что есть позиция absolute, поэтому возможно, что 2 изображения могут быть встроены в 2 деления

1 Ответ

1 голос
/ 13 февраля 2012

Прежде чем приступить к объяснению, я думаю, вы могли бы использовать некоторые визуальные эффекты того, насколько мощным может быть CSS ...

CSS Zen Garden показывает, как использование другой таблицы стилей CSS может полностью изменить весь внешний вид сайта (используйте тематические ссылки справа) ...

http://www.csszengarden.com/

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

http://www.jabcreations.com/blog/?prompt=themes-official

1.) Таблицы предназначены только для табличных данных, подумайте о панелях питания на этикетках продуктов, если вы не знаете, с чего начать. Таблицы отлично подходят для табличных данных, потому что они устраняют проблемы с форматированием, однако вы никогда не должны помещать не табличный контент в таблицы, так как это нарушает контекст контента для поисковых систем, и вместо этого вы должны использовать элементы деления, поскольку не табличные данные имеют тенденцию к делать что-либо, кроме как быть представленным в табличной форме.

2.) Контекст использования элементов CSS background-images или (X) HTML img (image) сводится к тому, что вы пытаетесь сделать.

2.A.) CSS3 позволяет использовать несколько фоновых изображений, однако поддержка браузера пока не универсальна, если учитывать доли рынка браузеров ...

http://www.caniuse.com/#search=css3%20multiple%20backgrounds

... однако с течением времени IE8 и другие старые браузеры, которые не поддерживают это изменение свойства CSS background-image, постепенно исчезают, поэтому становятся все более жизнеспособным вариантом.

2.B.) Вы можете объединить элемент img и фоновое изображение CSS вместе, чтобы получить два изображения для отображения внутри одного элемента.

2.C.) Вы можете использовать два элемента деления с одинаковым стилем (или их отсутствием), а затем дать каждому из них CSS-фоновое изображение.

Вот общий код CSS ...

background-image: url(kittens.png);

/* Choose one or the other below */
background-position: right bottom;
background-position: center center;

Еще раз повторю, что таблицы для табличных данных исключительно вредны для стиля. Как только вы начинаете понимать, как работает CSS (каскадирование означает, что правила в нижних строках переопределяют более ранние строки, поэтому одно и то же правило в строке 10 переопределяет то же правило в строке 9, если они являются одним и тем же правилом).

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

...