Layout stranky

erkakbe · Napísal **erkakbe**: 30.12.2007 19:22 | Layout stranky

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 | Layout stranky

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 | Layout stranky

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 | Layout stranky

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 | Layout stranky

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 | Layout stranky

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 | Layout stranky

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 | Layout stranky

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 | Layout stranky

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 | Layout stranky

<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 | Layout stranky

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

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

d twistik uz to ide ako ma

Layout stranky

Layout stranky

Podobné témy

nenacitava stranky, najma stranky.com;po restarte nacita

Layout...

rozhádzaný layout

Jednoduchý layout

css layout

Brainhacking layout

overflow layout

Toshiba layout

myspace layout

aky Layout?

Pixiho trojstĺpcový layout

Google Layout kóty

e-shop layout

css layout pomoc

chybny layout vo firefoxe

CSS layout + vertical menu