Autor Zpráva
Honza H.
Profil *
#1 · Zasláno: 9. 3. 2005, 20:12:20
Odpovědět Citovat
Napsal jsem si základní vzor stránky. Hlavička, levý slopec, okno na obsah a celý jsem to vycentroval. Mám ale několik drobných problémů.
1) Jak docílit, aby hlavička byla úplně nahoře.
2) Čím více textu napíšu do levého okna, tím více se mi posune okno obsahu dolů.
3) Celá tato část bude společná pro všechny stránky webu. Co všechno a jak vložit do externího ccs souboru.

Více na Testovací stránka

Děkuji
Martin Kuželka
Profil
#2 · Zasláno: 9. 3. 2005, 20:22:25 · Upravil/a: Martin Kuželka
Odpovědět Citovat
Ad 1,2) Honzo, všechny tvé problémy vyřeší, když celý obsah obalíš divem s id #stranka a nahradíš své styly tímto: 

body{text-align: center; color: #CCCC99; background-color: #006600; margin: 0; padding: 0;}

#stranka{width: 770px; margin: 0 auto; text-align: left;}

#hlavicka {height: 120px; background-color: yellow; color: black;}

#obsah {margin-left: 150px;}

#levy {float: left; width: 150px;}

#obsah {background-color: #cccc99; color: #000000}

#levy {background-color: #006600; color: #cccc99}
¨

ad 3) do css bych vložil úplně všechno.
Honza H.
Profil *
#3 · Zasláno: 9. 3. 2005, 20:43:48
Odpovědět Citovat
Kopnul jsem do té stránky tvije styly. V IE to šlape, akorát je mezera mezi obsahem a hlavičkou. V Mozile beze změny.
Co znamená celý obsah obalíš divem s id #stranka ? Změna je ve verzi 2
Petra
Profil
#4 · Zasláno: 9. 3. 2005, 20:50:04 · Upravil/a: Petra
Odpovědět Citovat
Martin asi myslel, aby ten první div (<div style="width: 770px; position: relative; text-align: left; margin: auto">) byl změněn na <div id="stranka">, mimochodem ten div není ukončený (ukončit by se měl před </body>) a ty <style> nemají být za ním, ale v hlavičce (<head>)
Martin Kuželka
Profil
#5 · Zasláno: 9. 3. 2005, 20:54:13 · Upravil/a: Martin Kuželka
Odpovědět Citovat
Takhle by to mělo fungovat: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<title>Testovací stránka</title>

<style type="text/css">

body{text-align: center; color: #CCCC99; background-color: #006600; margin: 0; padding: 0;}

#stranka{width: 770px; margin: 0 auto; text-align: left;}

#hlavicka {height: 120px; background-color: yellow; color: black;}

#obsah {margin-left: 150px;}

#levy {float: left; width: 150px;}

#obsah {background-color: #cccc99; color: #000000}

#levy {background-color: #006600; color: #cccc99}

</style>

</head>

<body>

<div id="stranka">  

<div id="hlavicka"><h1>Hlavička</h1></div>

<div id="levy"><h1>Levý sloupec</h1></div>

<div id="obsah"><h1>Obsah</h1></div>

</div>    

</body>

</html>
Honza H.
Profil *
#6 · Zasláno: 9. 3. 2005, 21:28:13
Odpovědět Citovat
Už si připadám jako tupec, ale bohužel. Můžu si oči vykoukat, ale nic nevidím. Jsou to 2 opravený verze a výsledek v podstatě stejný.
Verze 3. IE a Mozila to zobrazují různě. Mezera mezi obsahem a hlavičkou je u obou prohlížečů, hlavička odsazená od horní hrany jenom v Mozile. Prošel jsem si několikrát Jak psát web ale nevím, co s tím. Tato problematika mi připadá jako základ, ale ani ten pořádně nezvládám . . . Od chvíle, co jsem zavrhl FP se v tom docela plácám.
habendorf
Profil
#7 · Zasláno: 9. 3. 2005, 21:42:12
Odpovědět Citovat
Je třeba vynulovat margin u h1: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<title>Testovací stránka</title>

<style type="text/css">

body{text-align: center; color: #CCCC99; background-color: #006600; margin: 0; padding: 0;}

#stranka{width: 770px; margin: 0 auto; text-align: left;}

#hlavicka {height: 120px; background-color: yellow; color: black;}

#levy {float: left; width: 150px; background-color: #006600; color: #cccc99}

#obsah {background-color: #cccc99; color: #000000;margin:0}

h1 {margin: 0;}

</style>

</head>

<body>

<div id="stranka">  

<div id="hlavicka"><h1>Hlavi&egrave;ka</h1></div>

<div id="levy"><h1>Levý sloupec</h1></div>

<div id="obsah"><h1>Obsah</h1></div>

</div>    

</body>

</html>
Martin Kuželka
Profil
#8 · Zasláno: 9. 3. 2005, 21:44:22
Odpovědět Citovat
Problém, který teď popisuješ, je způsobený marginem, který je defaultně nastaven nadpisům. Řešením tedy je přidat do stylů h1{margin: 0;}.
Martin Kuželka
Profil
#9 · Zasláno: 9. 3. 2005, 21:45:04
Odpovědět Citovat
Pozdě... :-(
Honza H.
Profil *
#10 · Zasláno: 9. 3. 2005, 21:48:32
Odpovědět Citovat
Jo, to je přesně to, co to chtělo. Akorát nevím, proč a jak. S tím se ale musím poprat sám. Vždy, když se na něco ptám mám pocit, že jsem za největšího troubu na fóru a všichni tyto dětské nemoce už mají za sebou. Díky.
habendorf
Profil
#11 · Zasláno: 9. 3. 2005, 21:53:09 · Upravil/a: habendorf
Odpovědět Citovat
Honza H.:
Akorát nevím, proč a jak. Protože prohlížeč si nastavuje pro některé prvky - třeba hx - standardní margin. Je to v podstatě dobře, protože např. h2 se pak nelepí zespoda na h1, je-li zapsáno na dalším řádku, ale vytvoří se tam pěkná vertikální mezera. Někdy je ale třeba to předefinovat dle svých potřeb.


Vždy, když se na něco ptám mám pocit, že jsem za největšího troubu na fóru a všichni tyto dětské nemoce už mají za sebou. Já bych to tak tragicky neviděl a koneckonců od toho zde fórum je. Tak ať se daří! :o)
Honza H.
Profil *
#12 · Zasláno: 9. 3. 2005, 21:57:08
Odpovědět Citovat
Dík za uklidnění. Bude se mi líp usínat . . .
krteczek
Profil
#13 · Zasláno: 9. 3. 2005, 22:36:06
Odpovědět Citovat
1) ty styly patří do hlavičky,a musí být ohraničeny <!-- styly --> jako poznámka. Začni tady tím že je přemístíš do hlavičky 

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

    <title>Testovací stránka</title>

        <style type="text/css">

<!--

          body {color: #CCCC99; background-color: #006600; } /* pozadí+text */

          #hlavicka {position: relative; width: 770px; height: 120px; top: 0px; left: 0px}

          #obsah {position: relative; width: 620px; px;top: 0px; left: 150px}

          #levy {position: relative; width: 150px; top: 0px; left: 0px}

          #hlavicka {background-color: yellow; color: black} /* pozadí+text */

          #obsah {background-color: #cccc99; color: #000000} /* pozadí+text */

          #levy {background-color: #006600; color: #cccc99} /* pozadí+text */

--> 

         </style>

  </head>

dále bude třeba zmenittrošku kod aby to centrování na prostředek nebylo tak náročné na čarování s css: 

<body>

   <div id="vse">

       <div id="hlavicka"><h1>Hlavička</h1>

              <p>Tady bude nějakej "gif" jako logo stránky</p>

       </div>

       <div id="levy">

             <h1>Levý sloupec</h1>

                   <p> V levém sloupci budou odkazy na jednotlivé stránky celého webu.</p>

       </div>

       <div id="obsah">

             <h1>Obsah</h1>

             <p> Tady budou bláboly, jak se normálně do webů píšou.</p>

             <p>. . .</p>

             <p>. . .</p>

             <p>. . .</p>

             <p>. . .</p>

             <p>. . .</p>

             <p>. . .</p>

             <p>... a bude se psát až někam do kšá . . .</p>

       </div> 

       <div id="paticka">

       </div>      

   </div>                                 

</body>

</html>

Tak máme základ je třeba opravit a doplnit css:-) 

        <style type="text/css">

<!--

          body {color: #CCCC99; background-color: #006600; text-align:center} /* pozadí+text + centrování pro ie */

          #vse{width: 770px; margin:0 auto} /*centrování v mozille a v opere */

          #hlavicka { width: 770px; height: 120px; margin:0; background-color: yellow; color: black}

          #obsah { width: 610px; float:right; background-color: #cccc99; color: #000000}

          #levy {width: 150px; float:left; background-color: #006600; color: #cccc99}

          #paticka{clear:both} /* tohle nám udrží celý layout po kupě:-) */

--> 

         </style>
krteczek
Profil
#14 · Zasláno: 9. 3. 2005, 22:39:15
Odpovědět Citovat
ježiši než sem to napsal tak je tu několik řešení...:-)
to je tak když dělám pět věcí najednou :-(
krteczek
PS: kdybys necemu nerozuměl tak se zeptej :-)
habendorf
Profil
#15 · Zasláno: 9. 3. 2005, 22:41:32
Odpovědět Citovat
krteczek musí být ohraničeny <!-- styly --> jako poznámka

Proč?
krteczek
Profil
#16 · Zasláno: 9. 3. 2005, 22:46:26
Odpovědět Citovat
aby dokument bezproblémově zpracovali i prohlížeče které css neumí a jsou už opravdu velmi staré:-)
Honza H.
Profil *
#17 · Zasláno: 9. 3. 2005, 22:50:00
Odpovědět Citovat
Díky, ty komentáře v CCS mi pomohly se zorientovat. Ještě to chtělo nulovat margin v 
body {color: #CCCC99; background-color: #006600; text-align:center; margin:0} /* pozadí+text + centrování pro ie */
. Hlavička byla odsazená od horní hrany. V každým případě všem děkuji. Kód se musí chápat, ne jenom opsat, aby to fungovalo.
krteczek
Profil
#18 · Zasláno: 9. 3. 2005, 23:45:09
Odpovědět Citovat
jo jinak je to moje řešení lepši v tom, že vezmeš a prohodíš u float: left za right a opačně, a máš přehozené bloky :-) ale jinak uvidíš když nebudeš vědět tak se ozvi
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0