Autor Zpráva
m3ch0m
Profil
PODMÍNKA: HTML kód není možné editovat

Může mi někdo prosím poradit, jak nastavit CSS, aby se mi podařilo vytvořit vzhled, znázorněný v obrázku níže?

Menu jsem nastavil position="absolute" abych docílil překrytí obrázku HOLLYWOOD...

Zkoušel jsem nastavovat z-indexy společně s position="relative"(absolute), ale stále neúspěšně...

HTML kód

Výsledek

Moje nezdařená verze
juriad
Profil
Docela by pomohlo, pokud bys napsal ten HTML kód, ne jen ho vyfotil!

Ukázka řešení: http://kod.djpw.cz/docb-
Zdroják: http://kod.djpw.cz/docb
m3ch0m
Profil
WOW! Moc děkuji!!! :) A omlouvám se.


Ještě mám však maličký problém... Obrázek HOLLYWOOD se při zůžování stránky, přizpůsobuje šířce okna.... tím se mění i výška, takže nemůžu mít fixní "padding-top" :-/
janbarasek
Profil
m3ch0m:
Zachovám se k tobě stejně jako ty k nám, takže:

juriad
Profil
Tedy výška obrázku lze vyjádřit jako nějaké procento šířky stránky.
Tak zadej padding-top v procentech.
m3ch0m
Profil
Obrázky se již vymazaly, takže aktualizuji... promiňte :) moje chyba

Požadovaný výsledek (užší zobrazení):


Požadovaný výsledek (běžné zobrazení):


Mé aktuální řešení:
http://kod.djpw.cz/bpcb

Snad konečně pro vás jednodušší editace, snažím se o přehledný css kód :)

Důležitý je css kód kolem řádku 150, kde se nastavuje menu/obrázek/content.

A padding top příliš nepomáhá :-/
juriad
Profil
Proveď následující změny, pak se to bude chovat přesně, jak chceš:
#content:
- odeber float: right (kvůli tomu se to tak divně podsouvá)
- přidej margin-left: auto (zajistí odsun doprava)
- přidej padding-top: 25.7% (to je přesně poměr obrázku 1000x257)

#content #top p
- odeber padding-top: 40% (ten je realizovaný už na #content těmi 25.7%)

Navrhuji dále ještě změny (umožní zobrazení na mnohem užších displejích:
#content:
- nahradit width: 620px za max-width: 620px
- nahradit margin-right: 40px za margin-right: 4% (4% z maximální šírky dají těch 40px; pro užší okno se to ale přeškáluje). Toto pravidlo by šlo pomocí media-queries napsat tak, aby se pravý margin změnil na auto při okně menším než 670px (to je hranice, kdy levý a pravý margin jsou shodné; při dalším zmenšování by oba marginy prostě zmizely).

#page:
- odebrat min-width: 620px (není nutné vyžadovat takto širokou stránku)

Aby text nenaléhal přímo na menu:
#menu:
- přidat margin-right: 1em
- přidat margin-bottom: 1em
m3ch0m
Profil
Wow! Weby nedělám zrovna chvíli, ale pořád se mám co učit...
Děkuji moc!!!
Pokud jsi z Brna nebo tam studuješ, tak se ozvi a máš u mě pivo! Pokud pivo nepiješ, tak klidně něco jiného...

btw @media screen and (max-width: XXpx) mám již nastavené, jen jsem to zapodmínkoval když jsem s tím pracoval :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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