| Autor | Zpráva | ||
|---|---|---|---|
| AssaYe Profil |
#1 · Zasláno: 2. 9. 2008, 20:25:36
Zdravím,
potreboval by som sa opýtať, v čom mám chybu v kóde. Chcel som pomocou návodu na stránke http://www.jakpsatweb.cz/css/css-design-position.html vytvoriť stránku, ktorá by mala len hlavičku a obsah. Kód som spravil takto. <html>
<head>
<style>
#obsah {position: absolute; width 500px; height: 500px; top: 154px; left: 0px}
#obsah {background-color: blue; color: yellow}
#obsah .text {color: yellow; font-size: 18pt}
#obsah a {text-decoration: none}
#obsah a:hover {color: cyan}
#hlavicka {position: absolute; width 50px; height 50px; top: 0px; left: 0px}
#hlavicka {background-color: blue; color: yellow}
#hlavicka .text {color: yellow; font-size: 18pt}
#hlavicka a {text-decoration: none}
#hlavicka a:hover {color: cyan}
border {background-color: purple}
div {border: 2px outset yellow}
</style>
</head>
<body>
<div id="obsah">Obsah</div>
<div id="hlavicka">Hlavicka</div>
</body>
</html>Moj problém je tento: Ak otvorím stránku, tak hlavička má danú výšku, ale šírka je taká, ako je široké slovo v nej... Keď dopíšem dalšie slová tak sa to zase o dĺžku tých slov roztiahne. Tak isto je to s tým obsahom... Ale ja by som potreboval pevnú danú šírku, napr.: 800px. V čom som spravil chybu? Ďakujem. |
||
| mark Profil |
#2 · Zasláno: 2. 9. 2008, 21:03:24
1. position: absolute; nahraď za position: relative;.
2. Tie divi si prehodil. Hore má byť hlavička a na spodu Obsah. Pri absolútnom poziciovaní to nevadilo, ale pri relatívnom áno. 3. Ak chceš robiť loyouty, doporučujem si pozrieť toto. Dodám: vytvárať loyout cez absolútne poziciovanie nieje najvhodnejšie riešenie. |
||
| AssaYe Profil |
#3 · Zasláno: 2. 9. 2008, 21:14:27
Aha v poriadku, prečítam si to, ale nechápem, ako myslíš position relative. Hlavicku by som mal nechať tak a obsah dať {position: relative; top: 50px} ?
Ďakujem pekne. |
||
| mark Profil |
#4 · Zasláno: 3. 9. 2008, 16:27:16
mal si tam toho veľa, všetky pre teba nepotrebné veci som z toho kódu vyhodil (keďže začínaš s Loyoutmi), takže kód by mal byť asi takýto:
<html>
<head>
<style>
#obsah {position: relative; width: 500px; height: 100px; background-color: blue; color: red;}
#hlavicka {position: relative; width: 500px; height: 100px; background-color: blue; color: red;}
div {border: 2px outset yellow}
</style>
</head>
<body>
<div id="hlavicka">Hlavicka</div>
<div id="obsah">Obsah</div>
</body>
</html>zmenil som aj trochu farby, aby to lepšie znázorňovalo, ktoré hodnoty čo robia. Potom si to prispôsob podľa vlastnej potrieb. Rád by som ešte dodal, že dôležité je pochopiť pri písaní takeho kódu základy CSS. Do HTML vložíš nejaký objekt (neviem, ako to správne nazvať) napr. text, div, obrázok. Tomu objektu pridelíš názov pomocou id a v CSS nastavíš jeho hodnoty. Je dôležité poznať základné vlastnosti, ako background, padding, margin (taktiež ich odvodeniny, ako margin-top, margin-left, padding-bottom, atd.), position, color, width, height, top, left, background, float , potom napr. textové vlastnosti, ako: font, text, color, border a iné. Tiež aj kedy treba ktoré hodnoty použiť a ako (syntax CSS spomínať nemusím). Návod nájdeš na stránke jakpsatweb:) link poznáš.... |
||
|
Časová prodleva: 16 let
|
|||
0