VPF::разное разрешение экрана и позиционирование

supervladislav

Дата 18.3.2008, 14:22 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

как сделать так чтоб при разном разрешении экрана один слой не сезжал с другова)))

Код


#one{z-index:1;position:relative;background-image:url(01.png);background-repeat:no-repeat;width:400px;height:267px;background-position:center;left:20%;top:1%;}
#one2{z-index:2;position:relative;top:-200px;left:0px;}

bars80080

Дата 18.3.2008, 15:06 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

желательно ещё html приложить

а так можно сказать следующее
если эти два блока находятся рядом, то one будет ездить из стороны в сторону, потому что left:20%;top:1%; - зависит от размера окна
а one2 пригвождён top:-200px;left:0px

supervladislav

Дата 18.3.2008, 19:17 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

Код


#one{z-index:1;position:relative;background-image:url(01.png);background-repeat:no-repeat;width:400px;height:267px;background-position:center;left:150px;top:0px;right:0px;}
#one2{z-index:2;position:relative;top:-200px;left:-20px;right:0px;bottom:0px;}

мне надо чтоб одно было над другим,ну тоесть чтоб один слой был над другим
а вот код

Код


<div id="one">
</div>
<div id="one2"><table border="0"  cellpadding="4" cellspacing="0" align="center">
<tr align="center">
<td>Телефон:&nbsp;</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8(921)445-46-99<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8(960)245-63-49<br>988-02</td>
</tr><tr align="center">
<td>Адресс:&nbsp;</td>
<td>г.Гатчина</td>
</tr>

</table></div>

а в процентах лучше не задавать?А на вечно их пригвоздить чтоб в браузере они не ездели можно

Это сообщение отредактировал(а) supervladislav - 18.3.2008, 19:49

bars80080

Дата 19.3.2008, 11:19 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

да можно как угодно, всё зависит от того что ты хочешь

чтобы одно было над другим, лучше всего слой one2 вложить в слой one

а дальше как хочешь
пригвождённый вариант:

Код

<style>
#one { z-index: 1; position: relative; background-image: url(zzz.jpg); background-repeat: no-repeat;
    width: 400px; height: 267px; background-position: center; left: 100px; top: 100px; }
#one2 { z-index: 2; position: relative; top: 40px; left: 40px; }
</style>
<div id="one">
<div id="one2"><table border="0"  cellpadding="4" cellspacing="0" align="center">
<tr align="center">
<td>Телефон:&nbsp;</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8(921)445-46-99<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8(960)245-63-49<br>988-02</td>
</tr><tr align="center">
<td>Адресс:&nbsp;</td>
<td>г.Гатчина</td>
</tr>
</table></div></div>

или ползающий в зависимости от ширины окна:

Код

<style>
#one { z-index: 1; position: relative; background-image: url(zzz.jpg); background-repeat: no-repeat;
    width: 400px; height: 267px; background-position: center; left: 20%; top: 20%; }
#one2 { z-index: 2; position: relative; top: 40px; left: 40px; }
</style>
<div id="one">
<div id="one2"><table border="0"  cellpadding="4" cellspacing="0" align="center">
<tr align="center">
<td>Телефон:&nbsp;</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8(921)445-46-99<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8(960)245-63-49<br>988-02</td>
</tr><tr align="center">
<td>Адресс:&nbsp;</td>
<td>г.Гатчина</td>
</tr>
</table></div></div>

кстати, удалил лишние right и bottom, надеюсь не надо объяснять почему

Это сообщение отредактировал(а) bars80080 - 19.3.2008, 11:20

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »