Autor Zpráva
Stanley
Profil *
Dobrý den.
Jsem nováček v kódování html/css.
Vytvořil jsem si šablonu ve photoshopu a poté jsem jí rozřezal.
Nakonec jsem se pokusil nakódovat stránku ( dělám na ní už asi 2 týdny), ale už nevím, jak dál.
Nahrál jsem ji na free hosting, abyste se mohli podívat, co mám špatně.
Odkaz na stránku.
Tady je celý web ke stažení : ,,Download webu''.
Řekl bych, že mám celý kód ,,na pytel", proto bych chtěl poprosit o rady, jak web nakódovat.
Web se mi zobrazuje jakštakš dobře v IE. V mozzile mi vzniká úplný paskvil - první otázka : proč tomu tak je.
2. otázka je, jak mám udělat menu, jaké je na obrázku v sekci download, povedlo se mi udělat okraje, ale nepovedlo se mi udělat ,,prostředek", ale aby položky v menu byly ,,roztahovací"
3. otázka : jak udělám sidebar (pravý panel), aby nebyl vždy na konci stránky....
Předem bych chtěl obrovsky poděkovat všem za ochotu a pomoc, kterou mi věnují. :)
Petr ZZZ
Profil
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 &shy; (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
Profil *
Petr ZZZ:
Do šířky webu by se mělo vejít vše, co tam je, nevím proč to tak není..
jestli mám špatně něco v html souboru, nebo v css souboru.... :(
panther
Profil
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
Profil *
panther:
Děkuji za odpověď, velice mi pomohla, jen mi pořád není jasné to menu.
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 ?
panther
Profil
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:
<li><a href=""><span><span>Odkaz</span></span></a></li>

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
Profil *
panther:
Když jsem zkusil
<li><a href=""><span><span>Odkaz</span></span></a></li>
, tak mi vzniklo : toto
Jak mám tedy do css napsat
<span>
, aby to platilo jak pro pravý, tak pro levý okraj menu ?

Ještě, když jsem zkoušel naspat do css pozadí pro
<li>
, tak mi vzniklo skoro to, co chci, akorát okraje překrývali prostředek, nevíte prosím, jak to obejít ?

Děkuji :)


PS : do zazipovaného archivu jsem přidal i .psd šablonu :)
panther
Profil
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í.
Bubák
Profil
Já má za to, že použít v tomto případě zanořený span je zbytečné., stačí takto:
<li><a href=""><span>Odkaz</span></a></li>

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:
<li><a href=""><span class="levy"></span>Odkaz<span class="pravy"></span></a></li>

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:
a span {opacity: 0.8;}
a:hover span {opacity: 0.3;}
panther
Profil
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
Profil *
panther, Bubák : Děkuji
Zkusil jsem to to nakódovat podle vašich rad, ale nějak se mi to všechno rozhodilo, po druhém pokusu mi vzniklo to samé a po třetím pokusu už jsem byl natolik zblblý, že jsem nevěděl ani to, co k čemu paří.. :(
Mohla by mi to nějaká dobrá duše prosím nakódovat a dát odkaz ke stažení ? Možná bych to z toho pochopil lépe.
Děkuji moc :)
Stanley
Profil *
Nevím, pořád na to nějak nemohu přijít, když to zadám pole toho
<li>
, lak mám pořád přilepené okraje na pozadí z prostředka, jak je oddělím ?
Bubák
Profil
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?
MichMond
Profil
Můžeš se podívat na můj tutoriál jak udělat layout pomocí vlastnosti float. Třeba ti to pomůže.
panther
Profil
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.
MichMond
Profil
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: