aliniere verticala DIV

#1
Alta_

Posted 12 April 2010 - 08:24

Active Member

Grup: Members
Posts: 1,197
Înscris: 22.05.2007

Daca vreau sa pozitionez Vertical un DIV (cu o inaltime stabilita) pe centrul paginii, fara sa folosesc javascript, doar din CSS, ce e de facut? Deocamdata n-am facut decat sa dau dau inaltime 100% div-ului parinte si sa stabilesc margin-top, tot procentual (sa zic 20%) pentru div-ul de aliniat, asa incat la rezolutii mari sa nu fie cocotat in partea de sus a paginii. Dar e ok practica asta?

Back to top

#2
alin19

Posted 12 April 2010 - 09:35

Active Member

Grup: Members
Posts: 1,338
Înscris: 03.01.2007

Alta_, on 12th April 2010, 09:24, said:

Daca vreau sa pozitionez Vertical un DIV (cu o inaltime stabilita) pe centrul paginii, fara sa folosesc javascript, doar din CSS, ce e de facut? Deocamdata n-am facut decat sa dau dau inaltime 100% div-ului parinte si sa stabilesc margin-top, tot procentual (sa zic 20%) pentru div-ul de aliniat, asa incat la rezolutii mari sa nu fie cocotat in partea de sus a paginii. Dar e ok practica asta?

Uite mie practica aceasta mi se pare ok :

http://www.jakpsatwe...r-solution.html

Edited by alin19, 12 April 2010 - 09:36.

Back to top

#3
Alta_

Posted 12 April 2010 - 10:50

Active Member

Grup: Members
Posts: 1,197
Înscris: 22.05.2007

Mersi mult, a mers ce era acolo cu mici modificari; de exemplu faza cu top:-50%, nu a mers la mine, a trebuit sa specific in pixeli (dar nu e problema caci inaltimea div-ului de aliniat vertical este fixa, asa ca am impartit-o la 2).

Back to top

#4
neobluenet

Posted 12 April 2010 - 21:49

Member

Grup: Members
Posts: 489
Înscris: 13.08.2004

Alta_, on 12th April 2010, 11:50, said:

Mersi mult, a mers ce era acolo cu mici modificari; de exemplu faza cu top:-50%, nu a mers la mine, a trebuit sa specific in pixeli (dar nu e problema caci inaltimea div-ului de aliniat vertical este fixa, asa ca am impartit-o la 2).

Pai daca pui in pixeli nu mai ii fix pe mijloc, ca eu poate am alta rezolutie decat ai tu. top trebuie sa ia ca valoare absoluta una pozitiva, la fel si left. Trebuie sa pui top:50%; left:50%; margin: -{div-height}/2px auto auto -{div-width}/2px; si trebuie sa mearga.

PS in loc de {div-...} pui ce valoare are inaltimea / latimea div-ului.

Back to top

#5
Alta_

Posted 12 April 2010 - 23:30

Active Member

Grup: Members
Posts: 1,197
Înscris: 22.05.2007

neobluenet, on 12th April 2010, 22:49, said:

Pai daca pui in pixeli nu mai ii fix pe mijloc, ca eu poate am alta rezolutie decat ai tu. top trebuie sa ia ca valoare absoluta una pozitiva, la fel si left. Trebuie sa pui top:50%; left:50%; margin: -{div-height}/2px auto auto -{div-width}/2px;

O sa incerc si varianta ta, e cam aceeasi idee, doar ca folosesti "margin".

In pixeli am specificat cu cat sa se ridice in sus DIV-ul "problema" fata de linia de mijloc a ecranului (50% din Height-ul ferestrei), ceva de genul:

#div_median {position: absolute; top: 50%;}
#div_de_aliniat {position:relative; top:-([height]/2)px;}

Edited by Alta_, 12 April 2010 - 23:31.

Back to top

#6
MembruAnonim

Posted 16 April 2010 - 16:26

MembruAnonim

Grup: Banned
Posts: 399,715
Înscris: 08.10.2015

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

Și asta f�r� ț�șpe div-uri suplimentare

Back to top

#7
Alta_

Posted 16 April 2010 - 21:51

Active Member

Grup: Members
Posts: 1,197
Înscris: 22.05.2007

@i0nutzb
Pare logic ce e mai sus, insa nu-mi merge asa, se duce in div-ul in dreapta jos. Nu stiu ce-mi scapa, testeaza si tu linia asta, sa vezi ca e asa cum zic:

<div id="intro" style="position:absolute; top:50%; left:50%; margin-left:422px; margin-top:255px; width:844px; height:510px; border: solid 1px #444;">
de aliniat pe mijlocul ecranului
</div>

Back to top

#8
MonK3y

Posted 16 April 2010 - 21:58

Member

Grup: Members
Posts: 412
Înscris: 02.09.2005

<div id="intro" style="position:absolute; top:50%; left:50%; margin-left:-422px; margin-top:-255px; width:844px; height:510px; border: solid 1px #444;">
de aliniat pe mijlocul ecranului
</div>

Edited by MonK3y, 16 April 2010 - 21:59.

Back to top

#9
Alta_

Posted 16 April 2010 - 22:16

Active Member

Grup: Members
Posts: 1,197
Înscris: 22.05.2007

Corect, am uitat de minus! Merge in toate browserele. Va multumesc.

Back to top

#10
MembruAnonim

Posted 16 April 2010 - 23:25

MembruAnonim

Grup: Banned
Posts: 399,715
Înscris: 08.10.2015

dap, am uitat s� pun minusul �n faț�. Scuze.

Back to top

Anunturi

Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

aliniere verticala DIV

#1 Alta_ Posted 12 April 2010 - 08:24

#2 alin19 Posted 12 April 2010 - 09:35

#3 Alta_ Posted 12 April 2010 - 10:50

#4 neobluenet Posted 12 April 2010 - 21:49

#5 Alta_ Posted 12 April 2010 - 23:30

#6 MembruAnonim Posted 16 April 2010 - 16:26

#7 Alta_ Posted 16 April 2010 - 21:51

#8 MonK3y Posted 16 April 2010 - 21:58

#9 Alta_ Posted 16 April 2010 - 22:16

#10 MembruAnonim Posted 16 April 2010 - 23:25

Anunturi

▶ 1 user(s) are reading this topic

Sign In

#1
Alta_

Posted 12 April 2010 - 08:24

#2
alin19

Posted 12 April 2010 - 09:35

#3
Alta_

Posted 12 April 2010 - 10:50

#4
neobluenet

Posted 12 April 2010 - 21:49

#5
Alta_

Posted 12 April 2010 - 23:30

#6
MembruAnonim

Posted 16 April 2010 - 16:26

#7
Alta_

Posted 16 April 2010 - 21:51

#8
MonK3y

Posted 16 April 2010 - 21:58

#9
Alta_

Posted 16 April 2010 - 22:16

#10
MembruAnonim

Posted 16 April 2010 - 23:25