Autor Zpráva
pepa32
Profil *
Zdravím.
Dělám na svém webu vyskakovací div s login formulářem a doposud jsem to měl přes position:absolute; ale pak jsem zjistil že v různých rozlišeních to dělá nepořádek (odskočené jinam). Tak jsem to zkusil přes position:relative; ten sice funguje ve všech rozlišeních ale odsouvá od sebe obsah -> nepřekrývá.

Mohli byste mi prosím poradit jak to udělat aby to překrývalo obsah pod ním (jako position:absolute;), ale zároven to sedělo ve všech rozlišeních (jako position:relative;)?
Děkuji za rady.
pexxxik
Profil
Ahoj, použij position: absolute, ale na střed to dostaň pomocí javascriptu. Použij document.body.clientWidth, to vyděl dvěma a odečti od toho polovinu šířky divu (ve kterém je login) a máš to umístěný na středu;).... Od zhora to můžeš udělat podobně ale já bych to jen nastyloval pomocí top.
Medvídek
Profil
pexxxik:
Použij document.body.clientWidth

Stačí udělat:
#login {width:200px;height:50px;position:absolute;top:10px;left:50%;margin-left:-100px}
shaggy
Profil
pexxxik:
Preboha, prečo by na to mal používať Javascript? Ak na stránke používa nejaký obaľovací div, tak vycentrovať v ňom absoútny prvok nie je problém. A ak ho nevyužíva, je to tiež jednoduché, chce to len trochu porozmýšlať nad tým.
edit: presne tak, ako písal Medvídek.
pepa32
Profil *
Použil jsem radu od Medvídek, ale v mém rozlišení 1680x1050 je to dobré, ale jakmile zkusím 1024x768 tak je to cca o 4px odsunuté. Nevíte kde dělám pořád chybu?
Jinak celý web je v divu #wrapper který je vycentrovaný přes margin:0 auto; a má nastavenou pevnou šířku width:960px; a login div vyskakuje na podobném místě jako to má twitter.
shaggy
Profil
pepa32:
a login div vyskakuje na podobném místě jako to má twitter.
Čiže aj tvoj login vyskakuje na twitter.com? Alebo si myslel iné podobné miesto?

Nevíte kde dělám pořád chybu?
Vieme. Nedal si odkaz na web. Keď vravíš, že tvoj web má fixnú šírku, nie je nič ľahšie, než ten login box vložiť priamo do toho wrapper-u a nastaviť mu fixnú pozíciu.
pepa32
Profil *
Web mám zatím na localhostu a vím že by bylo lepší ho ukázat, ale nemohu.
Na podobném místě jako na Twitteru jsem myslel z hlediska pozice na webu.

Jinak ale styl toho divu je :

#login {
background-image:url('resources/images/login_extend.png');
background-position:center top;
background-repeat:no-repeat;
height:116px;
margin-left:14px;
padding-top:8px;
position:absolute;
text-align:center;
width:162px;
left:49%;
top:50px;
}


A leží přímo v tom wrapperu :

#wrapper{
margin:0 auto;
padding-top:15px;
width:960px;
}
shaggy
Profil
pepa32:
Ďakujem za kompletný kód, chybu máš na riadku.
pepa32
Profil *
Vyřešeno.
Do #wrapper jsem přidal position:relative; změnil trošku procenta v #login a již vše funguje jak má ve všech rozlišeních. Děkuji za rady.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0