Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Можно ли наложить div на div ?
 
 автор: Footer   (27.01.2008 в 19:21)   письмо автору
 
 

Я хочу реализовать следующее: в шапке сайта есть картинки. Я хочу, чтобы под ними проходила тоненькая линия. Пытаюсь наложить слой на слой, но не очень получается. Подскажите, как сделать такое?

   
 
 автор: retsoul   (27.01.2008 в 19:52)   письмо автору
 
   для: 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>
...

   
 
 автор: Footer   (27.01.2008 в 20:37)   письмо автору
 
   для: retsoul   (27.01.2008 в 19:52)
 

Просто дело в том, что у меня картинки располагаются в шапке по всей длине и они располагаются в таблице. А тонкие полоски должны идти в другом слое. То есть получается, мне нужно таблицу с картинками поместить в один слой, а линии в другой? Или всё делается в одном слое с помощью z-index?

   
 
 автор: coloboc66   (27.01.2008 в 23:23)   письмо автору
 
   для: Footer   (27.01.2008 в 20:37)
 

...таблицу с картинками поместить в один слой, а линии в другой?... - Да.

   
 
 автор: Footer   (28.01.2008 в 12:26)   письмо автору
 
   для: coloboc66   (27.01.2008 в 23:23)
 

А как сделать тоненькую линию? растянуть картинку размером 1х1 пиксел?

   
 
 автор: Alex_Keeper   (28.01.2008 в 14:25)   письмо автору
 
   для: Footer   (28.01.2008 в 12:26)
 

задать ей ширину нужного значения, например width: 100%;

   
 
 автор: Footer   (28.01.2008 в 15:46)   письмо автору
 
   для: 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;"> //слой с картинками.

и линии исчезают полностью со страницы. Не знаю, почему и куда они деваются. Помогите, что тут нужно исправить?

   
 
 автор: Alex_Keeper   (28.01.2008 в 17:09)   письмо автору
 
   для: 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;"> //слой с картинками.
>


не знаю что ты там делаешь, но тут у тебя перекрытие слоем с картинками слоя с линиями...полное перекрытие - смотри по координатам.
дай уже чтоли полный код если сам не можешь ладу дать.

   
 
 автор: Footer   (28.01.2008 в 17:46)   письмо автору
 
   для: 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>&nbsp;</td>
    <td align="center" class="n">текст</td>
    <td>&nbsp;</td>
    <td><img src="5vp.png"></td>
  </tr>
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td rowspan="2"><img src="0vp.png"></td>
    <td>&nbsp;</td>
    <td rowspan="2"><img src="4vp.png"></td>
    <td rowspan="2">&nbsp;</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>&nbsp;</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>&nbsp;</td>
        <td width="10" align="right"><img src="l.gif" width="10" height="1"></td>
    </tr>
</table>
</div>

   
 
 автор: retsoul   (28.01.2008 в 20:20)   письмо автору
 
   для: Footer   (28.01.2008 в 17:46)
 

если ты хочешь, чтобы полоски проходили по картинкам - поменяй значения z-index -ов местами

   
 
 автор: Footer   (29.01.2008 в 12:51)   письмо автору
 
   для: retsoul   (28.01.2008 в 20:20)
 

Приведённый выше код не работает как нужно. Слой с полосками исчезает.

   
 
 автор: CNT   (29.01.2008 в 14:17)   письмо автору
 
   для: 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>&nbsp;</td></tr></table>
<table style="width: 200px;
              height: 100px;
              position: absolute; top: 30px; left: 30px;
              background-color: lime"><tr><td>&nbsp;</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>&nbsp;</td></tr></table>
<table style="width: 200px; z-index: 2;
              height: 100px;
              position: absolute; top: 30px; left: 30px;
              background-color: lime"><tr><td>&nbsp;</td></tr></table>
</body>



В вашем случае я совершенно НЕ ВИЖУ ПРИЧИН, по которым таблицу "с картинками" нельзя в коде нарисовать "раньше", чем таблицу "с линиями" (или наоборот - я не особо понял, что именно вам надо).

   
 
 автор: Footer   (29.01.2008 в 18:35)   письмо автору
 
   для: CNT   (29.01.2008 в 14:17)
 

Спасибо за разъяснения. =)

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования