(učím se) Nakódování stránky-něco už mám, ale špatně....

Jedním z důvodů, proč se <div>y (nebo jiné bloky) někdy řadí pod sebou místo vedle sebe, může být, když mají někde definované šířky, které se vedle sebe prostě nevejdou. Případně, je-li <div> úzký a písmo veliké, může nějaké dlouhé slovo natáhnout <div> do šířky a ten se pak nevejde a posune se dolů. Tomu lze odpomoci např. použitím entity ­ (která v případě potřeby slovo rozdělí).

Za rozdílným vykreslováním v různých prohlížečích může vězet nevhodná definice vlastnosti padding (viz Rozdíly módů, asi v půlce na odkázané stránce).

Doporučuji přečíst si něco taky o obtékání (a nezapomenout na čistič).

Všeobecně: Za dva týdny se kódovat nenaučíš, to je na delší studium. Doporučuji začít s HTML a brzo přidat CSS, nebo začít číst úplně od začátku Jak psát web.

Stanley:
„ale nepovedlo se mi udělat ,,prostředek", ale aby položky v menu byly ,,roztahovací"“
protože ti tam chybí jeden element - potřebuješ 3 obrázky, máš jen dva elementy - <a> a <span>

„3. otázka : jak udělám sidebar (pravý panel), aby nebyl vždy na konci stránky....“
div.hlavni + div.sidebar mají celkovou šířku 862px ((529+2x10+27) + (239+2x10+27)), což je víc, než div.main a jeho 850px - schválně jsem to ozávorkoval, aby bylo vědět, co k čemu patří.

„Řekl bych, že mám celý kód ,,na pytel", proto bych chtěl poprosit o rady, jak web nakódovat.“
na dva týdny to není nejhorší, ale:
- div.menu je zbytečný - nevadí, přebývá
- na 6. řádku u přilinkování stylů ti přebývá na konci lomítko (ničemu nevadí, jen přebývá)
- text by měl být v odstavcích
- div.hlavni je menší než div.hlavni_zacatek a div.hlavni_konec (zápis marginu 0 27px (=margin: 0 27px 0 27px) vs. margin-left: 27px (=margin: 0 0 0 27px;))
Celkově v HTML nic moc nemáš, není co hodnotit.

Styly:
- nauč se sdružovat zápisy (např.: background: #00f url('obrazek.png') left top no-repeat)
- velikost písma nezadávej v PX (nepůjde zvětšovat v IE6)
- máš tam spoustu záporných marginů, které se mi nelíbí (máš tam u div.hlavni a div.sidebar záporný horní margin, kterým oba panely nadsouváš nad dolní 20px padding div.menu). Zbytečně.
V CSS máš mezery (což je pochopitelné), nevíš (pravděpodobně), čím se liší zkrácené zápisy (padding: 10px vs. 0 10px vs. 0 10px 5px vs. 0 10px 5px 7px)
- pro .menu a:hover a .menu a.active deklaruješ zbytečně totéž, co má .menu a {}. Pokud se vlastnosti nemění, je to zbytečné opisovat.
a tak by se dalo pokračovat.

Dále, nevím, jestli to byl záměr (obávám se, že nikoliv), s vpnutými obrázky je bílý text na černém pozadí. To je dobře, jen nevím, jestli to bylo chtěné. Na to si dávej bacha, aby byla stránka čitelná i s vypnutými obrázky - snadno si vyzkoušej, vypnout se dají jednoduše.

Stanley:
„Když mám v počítači i ten 3. obrázek - prostředek, jak ho mám zapsat do css stylu a poté do html ?“
Pro tebe nejjednodušeji asi takto:

Spany budou blokové, jeden bude mít levý kraj, druhý pravý kraj a odkaz jako takový bude mít opakující se střed.

Stanley:
„Jak mám tedy do css napsat, aby to platilo jak pro pravý, tak pro levý okraj menu ? “
.menu li span {} /* oba dva, nastav napr. levy okraj */
.menu li span span {} /* ten vnoreny span, tomu nastav na pozadi pravy okraj */

„Ještě, když jsem zkoušel naspat do css pozadí pro“
to je taky možnost. Překrývá se to, protože ta PNG jsou průsvitná, čili je pod nimi vidět pozadí obrázkové i barva. Mimochodem, podívej se v IE6, to ti takové menu (s těmito obrázky) nezobrazí.

Já má za to, že použít v tomto případě zanořený span je zbytečné., stačí takto:

Jedno pozadí, třebas levé se nadeklaruje odkazu, druhé pozadí, (zbylo pravé) spanu. Umístění pozadí napravo/nalevo pomocí background-position, pro úspru a přehlednost zapsané ve sdružené CSS vlastnosti background.

Pro IE6 bych doporučil použít jiný obrázek, bez alfakanálu s obyčejnou průhledností. Sice to nebude vypadat tak dobře, ale myslím, si, že to bude rozumný kompromis mezi vzhledem a pracností.

Teď mě ještě napadlo řešení pro tento případ:

Což je na první pohled začátečnická klasika, ale fígl by byl ve změně průsvitnosti spanu, v případě použití bude nutné minimálně použít float, deklarovat rozměry a taky použít filter opacity pro IE:

Bubák:
řešení tohoto je spoustu, dva spany mi přišly pro pochopení pro začátečníka nejjednodušší. Jestli se zanoří, nebo se použije řešení, které jsi uvedl ty uprostřed [#9], je jedno.

Stanley:
„mám pořád přilepené okraje na pozadí z prostředka, jak je oddělím ?“
Nechápu, co tím myslíš.
- okraje - čeho okraje?
- pozadí - čeho pozadí?
- z prostředka - čeho střed?

Můžeš se podívat na můj tutoriál jak udělat layout pomocí vlastnosti float. Třeba ti to pomůže.

MichMond:
„Můžeš se podívat na můj tutoriál jak udělat layout pomocí vlastnosti float.“
je náhoda, že v kroku 2 mají všechny sloupce 3 řádky textu? Proč ses nezabýval možností, aby byly sloupce stejně dlouhé vždy? Třeba by to někomu pomohlo.

Nehledě na to, že návodů (kvalitnějších) je všude hafo.

panther:
V kroku 3 jsou možná vylepšení layoutu a je tam i pozadí pro všechny 3 sloupce společné. Neříkal jsem že je to nejkvalitnější návod, ale dal jsem si s ním práci a tak by mu mohl třeba pomoci.