Нужно поместить текст поверх изображений в таблице - PullRequest
0 голосов
/ 13 февраля 2011

Я сделал веб-страницу в Photoshop CS4, разрезал ее, бросил в таблицу в Dreamweaver CS4.http://www.themegan.info/lab4/index.htm (грубое начало, я знаю) Теперь, как мне разместить текст поверх изображений?Я использую CSS?Я просто запутался в этом пункте.

Ответы [ 4 ]

3 голосов
/ 13 февраля 2011
<td style="position:relative;">
    <img src="..." style="position:absolute;z-index:1;" />
    <div style="z-index:2;position:relative;">your text goes here</div>
</td>
0 голосов
/ 13 февраля 2011

Если вы не хотите, чтобы ваши пользователи взаимодействовали с изображением (то есть изображениями меню навигации), вы должны использовать свойство css background-image, чтобы элементы вашего дизайна перешли на задний план.Пример:

td#sidebar { background-image:sidebarimg.jpg no-repeat; }

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

0 голосов
/ 13 февраля 2011

Если бы вы использовали элемент DIV, то он мог бы быть достигнут как

<div>
<div>image</div>
<div id="textDiv">text</div>
</div>

А это CSS

div.textDiv {
position:absolute;
top:220px; left:450px;
width:242px; height:366px;
z-index:7;
}

Альтернативой является использование Layers

<LAYER LEFT=220 TOP=450>Text</LAYER>
0 голосов
/ 13 февраля 2011

Вы можете использовать изображения в качестве фона вашего "макета" частей через CSS. * 1001 Т.е. *

HTML:

<div id="content">...text...</div>

CSS:

#content{
    background:url(..imgurl..) no-repeat top left;
}
...