Autor Zpráva
Nosko
Profil *
#1 · Zasláno: 14. 9. 2006, 13:26:09
Odpovědět Citovat
Zdravím všetkých.Mám problém, s ktorým sa už babrem dva dni a už fakt neviem.Na stranke som si vytvoril layout. Hlavička+telo+pata. Telo som dalej rozdelil na dva stípce(ľavý,pravý) a obsah. A celý problém je v tom že chcem ale neviem, aby sa všetky 3 stípce dotiahli až ku pate. Napríklad ked je lavé menu dlhšie ako obsah aby sa obsah dotiahol až dole a naopak(keď je obsah dlhší...). ďakujem všetkým za vašu pomoc a rady. 


html, body {

    padding-top: 20px;

    background-color: rgb(248,248,248);

}

#page {

    margin-left: auto;

    margin-right: auto;

    width: 900px;

    height: 300px;

}

#hlavicka {

    width: 100%;

    background-color: rgb(169,169,169);

    height:40px;

}

#lista {

    width: 100%;

    height: 30px;

}

#hlavnaobal {

    width: 900px;

}

#lavemenu {

    width: 20%;

    float: left;

    background-color: pink;

}

#pravemenu {

    width: 20%;

    float: right;

    background-color: red;

}

#hlavnaobsah {

    background-color: rgb(0,204,153);

    width: 60%;

    float: right;

}

#pata {

    width: 900px;

    height: 40px;

    background-color: rgb(229,229,229);

    text-align: center;

}



<body>

 <div id="page">

  <div id="hlavicka">

  Hlavicka

  </div>

  <div id="lista">

  lista

  </div>

    <div id="hlavnaobal">

      <div id="lavemenu">

      lave

      </div>

      <div id="pravemenu">

      prave

      </div>

      <div id="hlavnaobsah">

      obsah<br />

      </div>

    </div>

    <div id="pata">

      pata

    </div>

  </div>

</body>
Anonymní
Profil *
#2 · Zasláno: 14. 9. 2006, 15:01:10
Odpovědět Citovat
Nastav všem třem sloupcům stejnou výšku,
například

#lavemenu {
width: 20%;
height: 800px;
float: left;
background-color: pink;
}
#pravemenu {
width: 20%;
height: 800px;
float: right;
background-color: red;
}
#hlavnaobsah {
background-color: rgb(0,204,153);
width: 60%;
height: 800px;
float: right;


Nemusí to být v px, ale i v %.
Nosko
Profil *
#3 · Zasláno: 14. 9. 2006, 15:24:26
Odpovědět Citovat
Hej som skúšal ale keď má obsah na výšku viac ako tých x px/% tak text začne prechádzať cez patu :(
Tom@sQo
Profil *
#4 · Zasláno: 14. 9. 2006, 15:59:02
Odpovědět Citovat
ja mam PRESNE ten isty problem na http://tomasko.wz.cz/testpage.php a neviem si dat rady. skus sa pozriet do zdrojakov na freez.wz.cz alebo na superhry.cz tam to maju nejako riesene, ale ako, na to som neprisiel... resp. som sa nevzsomaril :( ked na nieco prides, napis :)
Tom@sQo
Profil *
#5 · Zasláno: 14. 9. 2006, 16:02:23
Odpovědět Citovat
add1:btw neze sa zlaknete z toho dizajnu :) pouzil som nan vystredne farby, aby ste videli, ze kde ktory div konci :)
add2: nosko, ja som uz trosku pokrocil oproti tvojmu dizajnu, ale nie ovela :) (mne sa paa dotiahne podla najdlhsieho divu)
tiso
Profil
#6 · Zasláno: 14. 9. 2006, 20:20:31
Odpovědět Citovat
...to som zvedavý kam to dotiahnete... Všetci traja... Doporučujem hľadať na internete...
Nosko
Profil *
#7 · Zasláno: 14. 9. 2006, 20:41:25
Odpovědět Citovat
na internete som uz
...to som zvedavý kam to dotiahnete... Všetci traja... Doporučujem hľadať na internete...
Na internete som už pozeral, mi možeš veriť (buď je to uplne niečo iné, alebo proste riešené cez tabulky - a to ja nechcem) A tiso dá sa to vôbec urobiť, alebo je to nemožné ako tu trošku naznačuješ? ;) Budem rád za každú radu. Ď.
tiso
Profil
#8 · Zasláno: 14. 9. 2006, 21:11:52 · Upravil/a: tiso
Odpovědět Citovat
Nosko
1. Pokiaľ chceš mať stĺpce rovnako dlhé, nastav im rovnakú dĺžku... Inak to nejde.
2. Pokiaľ chceš aby stĺpce vyzerali ako rovnako dlhé, tak to môžeš spraviť buď obrázkom na pozadí, alebo trošku zložitejšie i bez obrázku, ale na odkaz si nespomeniem...
UPDATE: http://www.pixy.cz/blogg/clanky/css-3col-layout/
Tom@sQo
Profil *
#9 · Zasláno: 15. 9. 2006, 10:18:35
Odpovědět Citovat
huha velmi nerozumiem tomu pixyho kodu :(
Tom@sQo
Profil *
#10 · Zasláno: 15. 9. 2006, 19:28:05
Odpovědět Citovat
mno, zase som sa trosku pohral s csskom na http://tomasko.wz.cz/testpage.php , ale nanestastie, nedosiahol som ziaden efekt :( prosim pomozte mi, co tam robim zle(co som tam v cssku zabudol dat)?
tiso
Profil
#11 · Zasláno: 15. 9. 2006, 19:50:33
Odpovědět Citovat
Tom@sQo
Kúp si Pixy-ho knižku a možno porozumieš... Pokiaľ to so stránkami myslíš vážne tak by si sa mal systematicky učiť..
Tom@sQo
Profil *
#12 · Zasláno: 16. 9. 2006, 09:50:52
Odpovědět Citovat
1) aku knizku vydal? 2) nechce sa mi z toho vysomarit :) som si stiahol zdrojak toho prikladu, trosku ho zjednodusil a pohral sa s html a css, ale este stale tomu nejako nechapem. naco tam dal to main1 a main2 ?
potom som sa pohral s poradim stlpcov, ale som z toho este vacsi jelen jak doteraz(preco zalezi na poradi kodenia stlpcov? ked som ich poprehadzoval, tak sa to pomenilo...).
add: mno zo strankami to myslim vazne, viem kodit v php, viem robit redakcne systemy, ale na htmlko som prikratky :-)
Tom@sQo
Profil *
#13 · Zasláno: 16. 9. 2006, 14:37:15
Odpovědět Citovat
cssko som prestudoval, pochopil som niektore yaujimave vlastnosti (clear: both :-)), ale stale nechapem, KTORY predpis CSS robi ten samopredlzovaci dizajn vo vsetkych stlpcoch...
Alphard
Profil
#14 · Zasláno: 16. 9. 2006, 14:49:11 · Upravil/a: Alphard
Odpovědět Citovat
http://jezek2.advel.cz/css/3colhf.html
http://www.positioniseverything.net/threecolbglong.html
http://www.pixy.cz/blogg/clanky/css-3col-layout/
tiso
Profil
#15 · Zasláno: 16. 9. 2006, 19:48:20
Odpovědět Citovat
Tom@sQo
1) http://knihy.cpress.cz/Book.asp?BookCode=K0798 (super kniha)
alebo i http://knihy.cpress.cz/Book.asp?ID=1394 (ešte som nečítal)
2) hold študuj aké vlastnosti sú priradené ktorému prvku, kľudne si zvýrazni jednotlivé div-y zadaním nejakej farby pozadia...
3) Poradie stĺpcov je dôležitá vec, obsahový stĺpec by mal byť čo najvyššie v kóde stránky.
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0