| |
|
|
| | Я хочу реализовать следующее: в шапке сайта есть картинки. Я хочу, чтобы под ними проходила тоненькая линия. Пытаюсь наложить слой на слой, но не очень получается. Подскажите, как сделать такое? | |
| |
|
|
| |
|
|
| |
для: Footer
(27.01.2008 в 19:21)
| | | использовать абсолютное позиционирование слоёв и параметр z-index - чем он больше, тем "выше" будет находится слой
...
<div style="position:absolute;z-index:1;"><img src="img.jpg" /></div>
<div style="position:absolute;z-index:2;"><img src="img2.jpg" /></div>
...
|
| |
| |
|
|
| |
|
|
| |
для: retsoul
(27.01.2008 в 19:52)
| | | Просто дело в том, что у меня картинки располагаются в шапке по всей длине и они располагаются в таблице. А тонкие полоски должны идти в другом слое. То есть получается, мне нужно таблицу с картинками поместить в один слой, а линии в другой? Или всё делается в одном слое с помощью z-index? | |
| |
|
|
| |
|
|
| |
для: Footer
(27.01.2008 в 20:37)
| | | ...таблицу с картинками поместить в один слой, а линии в другой?... - Да. | |
| |
|
|
| |
|
|
| |
для: coloboc66
(27.01.2008 в 23:23)
| | | А как сделать тоненькую линию? растянуть картинку размером 1х1 пиксел? | |
| |
|
|
| |
|
|
| |
для: Footer
(28.01.2008 в 12:26)
| | | задать ей ширину нужного значения, например width: 100%; | |
| |
|
|
| |
|
|
| |
для: Alex_Keeper
(28.01.2008 в 14:25)
| | | Делаю с z-индексами. Если брать этот индекс больше у слоя с линиями, то они будут сверху картинок. Получается так, что слой с линиями как бы перечёркивает слой с картинками. А нужно, чтобы картинки были сверху линий, то есть на картинах не должно быть линий, а линии должны быть под картинками. Делаю так:
<div style="position:absolute; top: 0px; left: 0px; right: 0px; z-index:1;"> //слой с линиями.
<div style="position:absolute; top: -1px; left: 0px; z-index:2;"> //слой с картинками.
|
и линии исчезают полностью со страницы. Не знаю, почему и куда они деваются. Помогите, что тут нужно исправить? | |
| |
|
|
| |
|
|
| |
для: Footer
(28.01.2008 в 15:46)
| | |
><div style="position:absolute; top: 0px; left: 0px; right: 0px; z-index:1;"> //слой с линиями.
><div style="position:absolute; top: -1px; left: 0px; z-index:2;"> //слой с картинками.
>
|
не знаю что ты там делаешь, но тут у тебя перекрытие слоем с картинками слоя с линиями...полное перекрытие - смотри по координатам.
дай уже чтоли полный код если сам не можешь ладу дать. | |
| |
|
|
| |
|
|
| |
для: Alex_Keeper
(28.01.2008 в 17:09)
| | |
//слой с картинками
<div style="position:absolute; top: -1px; left: 0px; z-index:2;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="6vp.png"></td>
<td> </td>
<td align="center" class="n">текст</td>
<td> </td>
<td><img src="5vp.png"></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"><img src="0vp.png"></td>
<td> </td>
<td rowspan="2"><img src="4vp.png"></td>
<td rowspan="2"> </td>
</tr>
<tr>
<td class="n">текст</td>
</tr>
</table></div>
//слой с полосками
<div style="position:absolute; top: 0px; left: 0px; right: 0px; z-index:1;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" align="left"><img src="l.gif" width="10" height="1"></td>
<td> </td>
<td width="10" align="right"><img src="l.gif" width="10" height="1"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10" align="left"><img src="l.gif" width="10" height="1"></td>
<td> </td>
<td width="10" align="right"><img src="l.gif" width="10" height="1"></td>
</tr>
</table>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: Footer
(28.01.2008 в 17:46)
| | | если ты хочешь, чтобы полоски проходили по картинкам - поменяй значения z-index -ов местами | |
| |
|
|
| |
|
|
| |
для: retsoul
(28.01.2008 в 20:20)
| | | Приведённый выше код не работает как нужно. Слой с полосками исчезает. | |
| |
|
|
| |
|
|
| |
для: Footer
(28.01.2008 в 17:46)
| | | У вас очень плохо с пониманием "слоёв".
Помогаю.
Правило 1. Постарайтесь ВОВСЕ не употреблять понятие СЛОЙ, ибо такового понятия в CSS нет.
Правило 2. Тем более постарайтесь не связывать несуществующее понятие СЛОЙ с тегом DIV.
----------------------------------------------------------------------
а. HTML-страница - это холст, на который верстальщик (художник) наносит теги (мазки). Каждый тег (мазок), нанесенный позже ("находится в коде ниже предыдущих") сам по себе уже будет "выше" предыдущих тегов (мазков).
b. Посмотрите пример (в любом из браузеров):
<body>
<table style="width: 200px;
height: 100px;
position: absolute;
background-color: aqua"><tr><td> </td></tr></table>
<table style="width: 200px;
height: 100px;
position: absolute; top: 30px; left: 30px;
background-color: lime"><tr><td> </td></tr></table>
</body>
|
с. Видите, что никаких DIV'ов нет, никаких z-index тоже нет, а вторая таблица (зеленоватого цвета) находится "выше", чем первая (коя синеватого оттенка).
И именно потому, что "зеленая" таблица в коде написана позже (первый "мазок" на "холсте" уже "высох", поверху него нанесен следующий "мазок").
d. Только если ВДРУГ вам почему-то НЕЛЬЗЯ именно в коде прописать "синее" ранее "зеленого", то только тогда этот ЕСТЕСТВЕННЫЙ порядок надо изменять с помощью свойства z-index. При этом никаких дополнительных тегов <DIV> использовать не надо! Свойство z-index можно (и нужно!) применять прямо к стилю тега <TABLE>:
<body>
<table style="width: 200px; z-index: 3;
height: 100px;
position: absolute;
background-color: aqua"><tr><td> </td></tr></table>
<table style="width: 200px; z-index: 2;
height: 100px;
position: absolute; top: 30px; left: 30px;
background-color: lime"><tr><td> </td></tr></table>
</body>
|
В вашем случае я совершенно НЕ ВИЖУ ПРИЧИН, по которым таблицу "с картинками" нельзя в коде нарисовать "раньше", чем таблицу "с линиями" (или наоборот - я не особо понял, что именно вам надо). | |
| |
|
|
| |
|
|
| |
для: CNT
(29.01.2008 в 14:17)
| | | Спасибо за разъяснения. =) | |
| |
|
|
