Header - úprava (vzhled v Sunlightu)

Od: Datum: 16.07.13 16:39 odpovědí: 8 změna: 16.07.13 23:20

Ahoj, měl bych dotaz ohledně kódování - mám nastavenou určitou velikost pro header - jak docílit toho (Hádám, že zřejmě v CSS), aby některá část z headeru "vyčuhovala"?

Přiblížení, co řpesněji myslím: http://www.vmwebdesign.nl/wp-…rd/headers/header-03-mini.png

Děkuji moc za rady


Seznam odpovědí:
 
moment čekejte prosím, probíhá přenos dat...
Zobrazení struktury odpovědí v otázce
Skrytí struktury odpovědí v otázce
Zobrazení struktury odpovědí v otázce

 

Odpovědi na otázku:
Datum: 16.07.13 17:29
avatar

Záleží na tom, jak přesně máte jaké divy poskládané do sebe.

Dejme tomu, že takhle ten celý obrázek je jeden div, uvnitř něj jsou dva divy za sebou: bílý pruh a "fotka", tj div, který má fotku jako pozadí. Tomuto dáte position: relative. Dovnitř něj pak umístíte tu zeměkouli jako img (nebo opět div s pozadím) a dáte jí position: absolute; left: 10px; top: -80px. Nebo tak nějak, aby to vycházelo.

Nebo pokud byste chtěl třeba v tom hlavním divu mít tyhle tři za sebou: bílý pruh, fotka, zeměkoule, tak se to udělá velmi obdobně.

Ohodnoceno: 0x
 
Od: petr7896
Datum: 16.07.13 18:44

Jéj, docela jsem se ztratil :D :/ - hádám, že spodní nastínení, jak by to mělo vypadat je špatně...?

takže mám

a teď CSS:

#cely_obrazek {background: url(.../images/cely_obrazek.png)}

#pruh{background: grey}

#fotka{background: url(.../images/fotka_bez_zemekoule.png);position:relative}

#zemekoule{background: url(.../images/hornicastsezemekouli.png);position:absolute;left:...}

Od: petr7859
Datum: 16.07.13 18:46

Jéj, docela jsem se ztratil :D :/ - hádám, že spodní nastínení, jak by to mělo vypadat je špatně...?(závorky místo zobáčků :D )

takže mám [div id="cely_obrazek] [div id="pruh"][div id="zemekoule"] [div id="fotka"] [/div][/div][/div][/div]

Datum: 16.07.13 19:14
avatar

Takhle by to šlo taky, jen vyměňte id zemekoule a fotka, aby zemekoule byla nejvíc uvnitř.

Ohodnoceno: 2x
 
Od: petr7852
Datum: 16.07.13 19:48

Tak jsem to zkoušel a zkoušel, ale stejně bez výsledku :/

No nic, to neva i tak díky moc za rady

Datum: 16.07.13 23:16
avatar

Když uděláte jsfiddle s tím, jak to vypadá a (ne)funguje teď, určitě to někdo opraví a zprovozní :)

Ohodnoceno: 0x
 
Od: ben®
Datum: 16.07.13 22:07
avatar

Dobrý den, zkusím dvě rady (asi dost amatérské). Jedna možnost je najít si na internetu podobný header (tedy stránky s ním). Např. ve Firefoxu potom není problém dostat se přes zdrojový kód stránky až do CSS. A tam to okoukat a zkusit použít. Druhá možnost je udělat normální obrázek (obdélník) a pozadí vyplnit barvou pozadí stránky - opticky to bude vypadat jako "vyčuhování". Zdravím!

Ohodnoceno: 0x
 
Datum: 16.07.13 23:20
avatar

Líbí se mi ten druhý nápad, jenom bych místo pozadí barvy stránky nastavila průhlednost.

Ohodnoceno: 0x
 

 

 

 

 

Přihlásit se k odběru odpovědí z této otázky:

Neneseme odpovědnost za správnost informací a za škodu vzniklou jejich využitím. Jednotlivé odpovědi vyjadřují názory jejich autorů a nemusí se shodovat s názorem provozovatele poradny Poradte.cz

 
Copyright © 2004-2016 Poradna Poradte.cz. Všechna práva na poradně Poradte.cz vyhrazena.