| 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 |
#4 · Zasláno: 30. 3. 2014, 19:23:18
m3ch0m:
Zachovám se k tobě stejně jako ty k nám, takže: 
|
||
| juriad Profil |
#5 · Zasláno: 30. 3. 2014, 19:36:13
Tedy výška obrázku lze vyjádřit jako nějaké procento šířky stránky.
Tak zadej padding-top v procentech. |
||
|
Časová prodleva: 3 dny
|
|||
| 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 |
#7 · Zasláno: 2. 4. 2014, 23:34:06
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 :) |
||
|
Časová prodleva: 10 let
|
|||
0