Layout stranky

erkakbe · Napísal **erkakbe**: 30.12.2007 19:22

Zdravim,
robim nasledujuci layout stranky

pomocou divov a chcem aby to bolo vzdy zarovnane na stred z lavej aj z pravej strany. Takze ak to niekto zapne vo vyssom rozliseni ako 1024x768 tak to bude mat v strede a nie nalepene vlavo v rohu.

Tiez by ma zaujimalo preco mi straka neberie prvy prikaz ulozeny v layout.css (momentalne tam mam aby mi vsetko fungovalo hodeny prazdny #test{}).

Dakujem za pomoc.

Kód:

<STYLE>
#test {}

body {
      margin:0;
      padding:0;
      }

#header {
        position:absolute;
        width:1000px;
        height:80px;
        }

div.link-list {
        position:absolute;
        width:100px;
        height:auto;
        font-size:80%;
        line-height:160%;
        }

#main {
        position:absolute;
        width:800px;
        height:auto
        }
</STYLE>

Tominator · Napísal **Tominator**: 30.12.2007 19:32

a čo?
1. dnes je taký bežný
2, to je od teba pekné (zarovnanie na stred)
3, ani ja

(mne to funguje)

p360t · Napísal **p360t**: 30.12.2007 19:35

Zarovnanie na stred sa už miliónkrát riešilo, použi funkciu "hľadať".

A ak máš ten zdroják, ktorý si zverejnil v takejto podobe uložený v layout.css, tak ti to nepôjde kvôli <style> a </style>, daj ich preč. Tieto značky patria do HTML súboru, ale nie súboru s CSSkom.

erkakbe · Napísal autor témy **erkakbe**: 30.12.2007 19:44

dik za ten style.

hladanie som samozrejme pouzil a aj som si precital podobnu temu ale nic z toho. skusal som nastavovat margin v body aj v jednotlivych divoch, menil som position ale stale sa mi to serie.

p360t · Napísal **p360t**: 30.12.2007 19:56

Ok, tak ti dám ultimatívnu odpoveď na všetky problémy tohoto typu (lebo čo som pozeral, tak riešenia tohoto triviálneho problému od webmáááástrov tu na fóre boli, slušne povedané, "na hovno").

Blokový prvok vycentrujeme do stredu v normálnych prehliadačoch pomocou vlastnosti margin, v IEčku pomocou text-align. Ako? Takto:

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com ">
  <meta name="author" content="p360t">
  <title>Učíme sa centrovať</title>
  <style>
    h1 {
      border: 1px dashed gray;
    }
    #obalovaci_blokovy_prvok {
      text-align: center;
      
      border: 1px dashed green;
    }
    #vycentrovany_blokovy_prvok {
      width: 800px;
      margin: 20px auto;
      text-align: left;
      
      border: 1px dashed red;
    }
  </style>
  </head>
  <body>
    <h1>Učíme sa centrovať</h1>
    <div id="obalovaci_blokovy_prvok">
      <div id="vycentrovany_blokovy_prvok">
        Vycentrovaný obsah blokového prvku s pevnou šírkou.<br>
        
        Blááááááááááááááááááááááááááááá!<br>
        Blááááááááááááááááááááááááááááá!<br>
        Blááááááááááááááááááááááááááááá!<br>
        Blááááááááááááááááááááááááááááá!<br>
        Blááááááááááááááááááááááááááááá!<br>
      </div>
    </div>
  </body>
</html>

Dôležité je nastaviť obalovaciemu prvku text-align: center; a centrovanému prvku margin: auto; (pričom zarovnanie textu je dobré vrátiť naspäť na ľavé a margin hore a dolu môžeš zmeniť na nejaký pevný, viď príklad). Rámčeky sú tam pre ilustráciu.

erkakbe · Napísal autor témy **erkakbe**: 30.12.2007 20:27

ok diky za ten text align, hodil som to tam cez body a mam ich teraz vsetky zarovnane na stred ale problem je ze vsetky tie divy su teraz nahadzene pod sebou:
header
main
link-list
link-list

Kód:

body {
      text-align:center;
      margin:0;
      padding:0;
      }

#header {
        width:1000px;
        height:80px;
        margin:auto;
        text-align:left;
        }

div.link-list {
        width:100px;
        height:auto;
        margin:auto;
        text-align:left;
        font-size:80%;
        line-height:160%;
        }

#main {
        width:800px;
        margin:auto;
        text-align:left;
        }

jedine co som dokazal spravit ze som zabalil tie bocne link-listy do dalsich dvoch divov "left" a "right" a obdobne cez text align som ich prilepil dolava a doprava ale stale je to vsetko pod sebou

Kód:

body {
      text-align:center;
      margin:0;
      padding:0;
      }

#header {
        width:1000px;
        height:80px;
        margin:auto;
        text-align:left;
        }

div.link-list {
        width:100px;
        height:auto;
        margin:auto;
        text-align:left;
        font-size:80%;
        line-height:160%;
        }

#main {
        width:800px;
        margin:auto;
        text-align:left;
        }

#left{text-align:left;}

#right{text-align:right;}

m@-nX · Napísal **m@-nX**: 30.12.2007 21:46

div je blokovy element tzn v poooooodstate nieco take ze za sebou zalomi riadok takze vsetko za nim uz idem po neho...

skus dat tym divom vlastnost float. V tvojom pripade asi float: left;

to zabezpeci ze ten div sa necha v pooooooodstate "obtekat" ako obrazok vedla ktoreho je text.. cize v poooodstate vedla seba nieco pusti

erkakbe · Napísal autor témy **erkakbe**: 30.12.2007 22:19

ok super dik...ale este to nie je ono. header je vycentrovany ale main aj s tymi obtekajucimi link-listami nie su takze ked to prepnem do niakeho velkeho rozlisenia tak header je v strede a ten zvysok pod nim je nalepeny vlavo

m@-nX · Napísal **m@-nX**: 30.12.2007 22:22

ak to ma cele vyzerat ako ten obrazok hore tak to vsetko obal jednym divom a ten daj centrovat na stred

erkakbe · Napísal autor témy **erkakbe**: 30.12.2007 22:30

<body> je centrovane na stred preto ten header funguje. teraz som skusal obalit zvlast dalsim divom len ten main a tie bocne listy ale stale je to nalepene vlavo

twistik · Napísal **twistik**: 30.12.2007 22:41

napr. http://css.interval.cz/layouty/

erkakbe · Napísal autor témy **erkakbe**: 30.12.2007 23:23

d twistik uz to ide ako ma

Layout stranky

Podobné témy