Forum PHP.pl > Pozycjonowanie warstwy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

squid

10.04.2007, 09:06:48

Witam Was!

Mam taka warstwe:

[HTML] pobierz, plaintext 
<div id="orders_join_table_div" style="position: absolute; top: 250px; left: 50px;z-index: 1; padding:0px; margin:0px; border: 2px #454B5D solid; width: 930px;">
[HTML] pobierz, plaintext

pojawia sie ona po kliknieciu na lacze. Pojawianie i znikanie dziala mi dobrze uzywam do tego celu js ale mam problem z pozycjonowaniem tej warstwy.
chcialbym zeby pojawiala sie zawsze na srodku strony niezaleznie od rozdzielczosci, jak to zrobic??
chodzi mi tu o srodek pionowy i poziomy, tutaj ustawilem pozycjonowanie absolute ale wiem ze to raczej nie to, relative powoduje ze mi sie strona rozjezdza.

starach

10.04.2007, 09:35:41

To chyba niestety tylko javascriptem.
edit>
a to jak to napisać masz tutaj:
http://www.w3schools.com/htmldom/dom_obj_screen.asp
edit>>
kiedyś zrobiłem taki trik że wypozycjonowałem warstwę absolute za pomocą innej warstwy użyłem do tego magin:0 auto; ale nie na warstwie z position absolute bo to nie zadziała.

revyag

10.04.2007, 10:34:15

@squid: da się to zrobić css'em ale musiałbyś ustalić szerokość i wysokość warstwy.
Wtedy wystarczy taki kod:

Kod

position:absolute;
width:szerokosc;
height:wysokosc;
left:50%;
margin-left:-(szerokosc/2);
top:50%;
margin-top:-(wysokosc/2);

squid

10.04.2007, 10:46:48

@revyag nie wiem czy dobrze zrozumialem ale zrobilem tak i wcale nie jest wycentrowane

[HTML] pobierz, plaintext 
<div id="orders_join_table_div" style="position: absolute; left:50%; margin-left:-225px; top:50%; margin-top:-100px;z-index: 1; padding:0px; margin:0px; border: 2px #454B5D solid; width:550px; height: 200px">
[HTML] pobierz, plaintext

revyag

10.04.2007, 10:55:34

550/2 = 275 a nie 225

Ten sposób na pewno działa.

[HTML] pobierz, plaintext 
<html>
<head>
<style type="text/css">
div#test {
	position:absolute;
	width:550px;
	height:200px;
	left:50%; 
	margin-left:-275px;
	top:50%;
	margin-top:-100px;
	background-color:blue;
}
</style>
</head>
<body>
	<div id="test"></div>
</body>
</html>
[HTML] pobierz, plaintext

Odpal ten kod.

wojtek.zielinski

10.04.2007, 11:10:31

Cytat(squid @ 10.04.2007, 11:46:48 )

@revyag nie wiem czy dobrze zrozumialem ale zrobilem tak i wcale nie jest wycentrowane

[HTML] pobierz, plaintext 
<div ... style="... margin-left:-225px; margin-top:-100px; ... margin:0px; ...">
[HTML] pobierz, plaintext

Nic dziwnego, że nie działa - nadpisałeś wartość margin. Usuń margin:0px;

squid

10.04.2007, 11:41:40

@revyag && @wojtek.zielinski dzieki, przeoczylem to, teraz dziala choc nie moge ustwic wysokosci warstwy na stale bo moze byc rozna

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.