Centrare pagina, Am nevoie mare de tot de ajutor!

Forumul Softpedia > Professional Zone > Webmaster Corner > Web Design / Flash / Graphix

cipapos2

25th September 2009, 21:44

Buna ziua!

As dori un sfat, un exemplu ceva pentru problema mea. Mai exact, eu am o pagina web, cu dimensiunile de 1024 x 768 px. As vrea ca aceasta pagina HTML sa fie centrata si pe orizontala dar mai ales pe verticala. Adica atunci cand accesezi acea pagina sa apara exact pe mijlocul paginii continutul, indiferent de rezolutia monitorului tau. As vrea sa stiu daca exista un cod anume de face acest lucru, sau vreun script sau ceva. Am vazut ca se poate face acest lucru dar numai cu tabelele...problema este ca eu nu am gasit si nu stiu daca se poate sa fac de exemplu un tabel in care sa ruleze pagina intr-un iFrame sau ceva de genul. Am incercat sa fac acest lucru (dar fara tabel) direct cu un iFrame in pagina...el se poate centra dar numai pe orizontala, pe verticala nu am reusit.

Sper ca ati inteles ce as vrea eu sa fac...deci nu ma deranjeaza daca se foloseste vreun script anume sau un iFrame ceva, ideea e ca atunci cand cineva intra pe pagina respectiva sa apara centrata si pe verticala si pe orizontala, indiferent de rezolutia monitorului acelei persoane.

Va multumesc anticipat!

Jumping Jack

25th September 2009, 22:01

CITAT (cipapos2 @ 25th September 2009, 21:44)

Se poate, dar chestia functioneaza numai in cazul in care pagina va avea intotdeauna dimensiuni fixe(1024x768px, sau cit vrei tu, ideea este sa aibe dimensiuni fixe).

CODSURSA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">

#container {width:1024px;height:768px;background:#bbb;border:1px solid red;position:absolute;left:50%;top:50%;margin-top:-384px;margin-left:-512px}

</style>

</head>
<body>
<div id="container">

</div>
</body>
</html>

cipapos2

28th September 2009, 01:10

Multumesc mult de tot Jumping Jack
A mers si este perfect!

Multumesc inca o data...mi-ai fost de mare ajutor!

Jumping Jack

28th September 2009, 11:17

CITAT (cipapos2 @ 28th September 2009, 01:10)

Multumesc mult de tot Jumping Jack
A mers si este perfect!

Multumesc inca o data...mi-ai fost de mare ajutor!

sa fii sanatos, coane.

akkad

13th October 2009, 14:53

QUOTE (Jumping Jack @ 25th September 2009, 23:01)

Se poate, dar chestia functioneaza numai in cazul in care pagina va avea intotdeauna dimensiuni fixe(1024x768px, sau cit vrei tu, ideea este sa aibe dimensiuni fixe).

CODE

se poate si fara ca pagina sa aiba dimensiuni fixe. Doar elementul care e centrat trebuie sa aiba latime fixa si trebuie specificat doctype:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>

      <div style="width:350px;height:100px;margin:0 auto;border:1px solid black"></div>
</body>

</html>

Jumping Jack

13th October 2009, 21:14

CITAT (akkad @ 13th October 2009, 14:53)

se poate si fara ca pagina sa aiba dimensiuni fixe. Doar elementul care e centrat trebuie sa aiba latime fixa si trebuie specificat doctype:
[...]

CODSURSA

Hai sa mori tu? Si cum il centrezi pe verticala? Sau nici nu ai citit toate datele problemei? Bai ce ti-e si cu esperctii astia...

akkad

16th October 2009, 18:59

QUOTE (Jumping Jack @ 13th October 2009, 22:14)

Hai sa mori tu? Si cum il centrezi pe verticala? Sau nici nu ai citit toate datele problemei? Bai ce ti-e si cu esperctii astia...

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
    <div style="display: table; ">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div  style=" #position: relative; #top: -50%;width:300px;height:100px;margin:0 auto;border:1px solid black">
        <div  style=" #position: relative; #top: 25%;width:145px;height:50px;margin:0 auto;border:1px solid black">
          <h2>No shit</h2> </div>
      </div>
    </div>
  </div>
</body>

</html>

Incearca asa in IE. La FF n-am avut timp inca.

Jumping Jack

16th October 2009, 19:57

CITAT (akkad @ 16th October 2009, 18:59)

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
    <div style="display: table; ">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div  style=" #position: relative; #top: -50%;width:300px;height:100px;margin:0 auto;border:1px solid black">
        <div  style=" #position: relative; #top: 25%;width:145px;height:50px;margin:0 auto;border:1px solid black">
          <h2>No shit</h2> </div>
      </div>
    </div>
  </div>
</body>

</html>

Incearca asa in IE. La FF n-am avut timp inca.

Oh yes.... Shit!
Nu inteleg, asta ar trebui sa fie rezolvarea? Pai cred ca faci misto de mine. Tu nu vezi ca si tu ai acolo inaltimi fixe? Si e si mult mai stufos codul, cu 3 div-uri in plus aiurea. De asemenea, ca sa functioneze intr-adevar cumva codul tau, niste dieji nu prea au ce cauta acolo.
Back to work!

Jumping Jack

16th October 2009, 20:36

A, acum imi pica fisa! ai luat codul de aici:

http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html

Dar atunci macar scrie-l corect, ca asa acum e la tine, deloc nu merge. Oricum, de # hack inca nu am auzit, numai de * si de _ . Si dintre astia oricum numai * valideaza. Asta daca te intereseaza aspectul validarii.Si oricum, problema inaltimii fixe tot nu ai rezolvat-o.

akkad

16th October 2009, 20:58

Ala nu imi merge in IE8,FF, Safari Opera sau Chrome, in schimb asta merge.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div style="display: table;margin:0 auto; width:300px;height:50px">
<div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;margin:0 auto;">
<div style=" position: relative; top:- 25%;width:145px;height:50px;margin:0 auto;border:1px solid black">
<h2></h2> </div>
</div>

</div>
</body>

</html>

Dimensiunile paginii nu sunt fixe asa cum ai zis tu, ci doar a obiectului.

Jumping Jack

16th October 2009, 21:07

CITAT (akkad @ 16th October 2009, 20:58)

Dimensiunile paginii nu sunt fixe asa cum ai zis tu, ci doar a obiectului.

La obiect ma refeream si eu, ca doar #container are inaltime fixa, nu fereastra browserului. Iar #container e un rahat de div, nimic altceva, nu e PAGINA. A, ne luam de exprimare si luam la analiza sintaxa, ok, am zis cuvintul "pagina", dar unul care se uita la cod (si stie sa il citeasca) intelege despre ce este vorba acolo. Te-a indus in eroare 1024x768? pai poti sa scrii ce vrei acolo, si 200x300, tot aia e.
Nu o mai da cotita, ca nu tine.

PS: Si codul tau initial functiona in ff3, ie8 si safari, cu conditia sa scoti hackurile alea. Sau sa le scrii altfel.

Jumping Jack

16th October 2009, 21:46

Stai, ca acum imi dau seama: pai codul tau din ultimul exemplu e chiar anapoda. Nici nu e centrat pe verticala macar. Ia schimba 50px cu altceva mai mare, de exemplu 200px, si o sa vezi ca se duce in jos. Pentru ca acel top: -25% nu are ce sa caute acolo. Ca sa se centreze, ar trebui ca top sa fie jumate din inaltimea div-ului, in cazul tau deci ar trebui sa fie top:-25px. Abia atunci ar fi centrat, si in cazul asta ar fi exact exemplul pe care l-am dat eu.
Uite, ai aici mai jos un exemplu in care este centrat si div-ul parinte, si textul din interior. Mai centrat de atat nu se poate. Si si in cazul asta, ai nevoie de inaltimi fixe.
Edit: Acu vad ca nu merge in ie7/8 partea cu textul centrat, o sa ma uit sa vad ce are. Insa esenta cam asta ar fi.
Later edit: Am gasit rezolvarea pentru ie.

CODSURSA

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title></title>
  <style type="text/css">

  #container {display: table; height: 400px; overflow: hidden;border:1px solid black;padding:10px;width:700px;position:absolute;top:50%;left:50%;margin-left:-350px;margin-top:-200px}
  #inner {display: table-cell; vertical-align: middle;}
  #content {border:1px solid red;padding:5px}
  </style>


  </head>

  <body>
    <div id="container">
      <div id="inner">
        <div id="content">
          <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
          to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
        </div>
      </div>
    </div>
  </body>
  </html>

akkad

17th October 2009, 23:19

Ultima ta tentativa merge in FF, dar uite cum se vede in IE:
Click pentru a vizualiza ataşamentul

Uite cum arata perfect:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
  <script language="JavaScript" type="text/javascript">
    var w='100px';
    var h='100px';
    var screenX=document.documentElement.clientWidth/2;
    var screenY=document.documentElement.clientHeight/2;
    var dv=document.createElement('div');
    dv.style.width=w;
    dv.style.height=h;
    dv.style.border='1px solid black';
    dv.style.position='absolute';
    dv.style.top=screenY-parseFloat(h)/2+'px';
    dv.style.left=screenX-parseFloat(w)/2+'px';
    document.body.appendChild(dv);
  </script>
</body>

</html>

Jumping Jack

18th October 2009, 23:02

CITAT (akkad @ 17th October 2009, 23:19)

Ultima ta tentativa merge in FF, dar uite cum se vede in IE:
Click pentru a vizualiza ataşamentul

Tentativa pe dracu. Merge peste tot perfect. Am uitat sa delimitez conditional comment-ul pentru a exclude ie8, asta e tot. Conditional comment-ul este acolo pentru ie6 si ie7. IE8 nu are nevoie. Mai jos e codul, dar ca sa nu te deranjezi sa il mai reproduci tu local, ca poate mai gresesti la editare, ia-l de aici, si poti sa il vizionezi in orice browser vrea muschii tai, de la ie6 in sus.

In alta ordine de idei: din tot ce scrii pe acolo, e clar ca esti pe linga problema rau de tot. Nu stiu de unde culegi atatea grozavii si vii sa le servesti aci, insa eu as lasa-o balta in locul tau.
Acum, vii cu Dhtml? Tu ai auzit macar asa, in treacat, de notiuni ca accesibilitate, cod valid, etc? Cu frumuselul ala de cod js pe care l-ai produs acum, ce sa fac eu daca nu am javascript activat? Ma uit la pereti, nu? Nici macar nu stiu ca acolo este ceva. Insa imi place ca pui Doctype, ce sa zic, respecti standardele. Hai ca m-am saturat de discutia asta. Du-te nene si invata css si html si vino dupa aia, pe bune!

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">




<head>
  <title></title>
<style type="text/css">

#container {display: table; height: 400px; overflow: hidden;border:1px solid black;padding:10px;width:700px;position:absolute;top:50%;left:50%;margin-left:-350px;margin-top:-200px}

#inner {display: table-cell; vertical-align: middle;}
#content {border:1px solid red;padding:5px;}
.greenBorder {border: 1px solid green;}
</style>

<!--[if lt IE 8]>

<style type="text/css">
#inner {position: absolute; top: 50%;width:700px}
#content {position: relative; top: -50%}
</style>

<![endif]-->

</head>

<body>
  <div id="container">
    <div id="inner">
      <div id="content">
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 
        to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>    
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 
        to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>            
      </div>
    </div>
  </div>
  
  
  
</body>
</html>

akkad

19th October 2009, 17:05

QUOTE

Cu frumuselul ala de cod js pe care l-ai produs acum, ce sa fac eu daca nu am javascript activat?

Pentru cei 5% care au javascript dezactivat- blah....E greu sa pastrezi un site cu look&feel competitiv cu javascript dezactivat. Cat despre valid,

QUOTE

This document was successfully checked as XHTML 1.0 Transitional!

Si ce ai pus tu e valid, dar de ce te oftici asa cand altii pot rezolva o problema la fel ca tine ? Poate pentru ca si prima solutie tot eu ti-am sugerat-o.

Jumping Jack

19th October 2009, 18:41

CITAT (akkad @ 19th October 2009, 17:05)

Pentru cei 5% care au javascript dezactivat- blah....E greu sa pastrezi un site cu look&feel competitiv cu javascript dezactivat. Cat despre valid,

Si ce ai pus tu e valid, dar de ce te oftici asa cand altii pot rezolva o problema la fel ca tine ? Poate pentru ca si prima solutie tot eu ti-am sugerat-o.

1. Nu e vorba de a pastra un look si un feel competitiv, ci de a pastra orice fel de look. Tu nu pastrai nimic acolo, era pagina blank, fara js.
2. Scuza-ma, ai sugerat ce?
Vrei sa ne intoarcem la ce a generat sirul asta de replici?
OK, deci: omul voia sa centreze ceva pe orizontala si - mai important - verticala intr-o pagina. Eu i-am dat solutia cea mai uzuala, cea mai simpla si cea mai sigura - fara nici un fel de artificii cu hackuri si js. Era exact ceea ce voia omul, dupa cum a si spus-o. Dupa care ai venit tu si te-ai dat mare ca esti bun, citesti postul meu in crucis si nu intelegi nimic din el - dupa cum dovedeste replica ta referitoare la inaltimea fixa a paginii sau a obiectului, si dai o solutie care nu functioneaza nicaieri. Iti atrag atentia ca e aiurea, si vii cu alta, care merge asa, sontic sontic. Dupa a doua refacere, vii cu minunatia aia de dhtml.
Iar eu ti-am dat o noua solutie, care ingloba - intr-adevar -si ceea ce propusesei tu initial, insa o solutie functionala si fara hackuri (in masura in care conditional comments nu sint hack-uri). Insa ti-am dat solutia asta numai ca sa iti arat cum se face, pentru ca am vazut ca te chinui.

Si acum ai seninanatea de a spune ca ce-ti pasa de cei 5% din useri care nu au javascript. Replica asta ar veni de unul care se pretinde om de meserie!
E ca si cum ai spune ca trotuarele coborite si autobuzele cu facilitati pentru handicapati sint inutile, pentru ca mai putin de 1% din populatie este handicapata. Sau ca textul de pe pagina web poate sa fie de 8-9px, pentru ca publicul tau tinta sint pustii de 15 ani care in general nu au probleme cu vederea. Cam ciudat punct de vedere, nu crezi?
Pai atunci tin sa iti aduc la cunostinta ca in unele tari exista legi (nu recomandari, legi!) care prevad ca accesul la o pagina web sa fie nerestrictionat, adica sa nu necesite incarcarea si rularea de programe sau alte tehnologii suplimentare (js sau flash) pentru a putea citi acea pagina. In USA exista articolul 508 din legea persoanelor cu handicap (cauta despre Section 508). E adevarat ca legile respective se refera la site-uri de interes public - guvern, adm. locala, institutii ale statului, etc. Si la fel de adevarat este ca in Romania unii asa zisi webdesigneri isi baga fix @&%$ in aceasta lege, asta daca au macar cunostinta de existenta ei. Insa in alte locuri civilizate de pe planete asta, se pot cistiga procese pe tema asta. Si s-au si cistigat, de altfel. In Romania exista din cite stiu eu numai o recomandare a Uniunii Europene in sensul asta. Dar va fi lege, in mod sigur, in citiva ani.
Pentru restul lumii, lumea paginilor private - unde nu esti obligat sa respecti acea lege - se impune ca din bun simt, sa incerci sa respecti. Nu spune nimeni sa fii 100% conform cu indicatiile respective, insa acolo un WAI Level A nu mare lucru.

Si ca sa inchei, validarea html nu este singura validare existenta pe lume asta, mai exista si validarea css, si WAI. Te las sa cauti singur despre WAI. Si mai cauta si WCAG. Dupa ce citesti destul pe tema asta, putem sa discutam despre solutii pentru centrarea div-urilor in pagina.
Pina atunci, imi permit sa spun ea esti departe de tot de ceea ce se cheama web designer. Fara suparare.

Reclama

A minute ago

In curand... autoevolution.ro

Teste, stiri, ghiduri, jurnale, forum si multe altele!

Aceasta este o versiune simplificată a paginii originale. Pentru a vizita versiunea originala click aici.