Modrý rámeček s pozadím - roztáhování

Od: Datum: 05.08.13 16:40 odpovědí: 7 změna: 10.08.13 20:58

Zdravím, na webu pavelkcourek.eu si nevím rady jak dál psotupovat s mdorým rámečkem s bruslemi níže, který se zobrazuje za nadpisy..

Většinou budou nadpisy velmi dlouhé, a tak potřebuji, aby se modrý rámeček v závisloti na text roztahoval dolů.

Asi nejlepší řešení - brusle jakou background-image, modrý rámečke jako prostý text. JEnomže ať se snažím jak se snažím, vždy se mi rámeček roztáhne přes celou šíři stránky (rozměry lze určovat pouze přes všeobecný width/height, což je myslím kravina v tomto případě).

Web je dělán v Sunlightu, předem díky 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: 05.08.13 17:42
avatar

Pevnou šířku tomu klidně můžete dát, je to uvnitř prvku (#obsah), který už pevnou šířku má.

Ten modrý rámeček má ještě stín kolem sebe, s tím bude hlavní problém. Bez stínu by na to stačil border-radius (nešlo by to v IE8-). Případně i ten stín, ale jako normální, vržený jen dvěma směry (ne zároveň dolů a zároveň nahoru).

Když se nadpis natáhne na dva řádky, co se ale stane s bruslema? Bude tam pořád stejně uříznutý kus nohou?

Ohodnoceno: 0x
 
Od: petr12346
Datum: 05.08.13 18:14

No brusle by zůstaly pořád na stejným místě - proto by se daly jako background-image. Stín nená potřeba
(samozřejmě že nejlepší by bylo, aby se brusle postupně roztahovaly, jenže potom by došlo k deformaci, proto raději pouze na roztáhnutí modrého rámečku)...

Od: petr12346
Datum: 05.08.13 20:03

Poradíte prosím někdo aspoň s kódem, jak nastavit, aby se rámeček roztahoval podle textu? (dolů)

Datum: 05.08.13 20:11
avatar

http://jsfiddle.net/nN8HQ/ tak?

Pozici doladit posunutím vnitřku obrázku uvnitř jeho průhledné plochy. Případně tam teda přidat další obal (div), pak by šlo pozadím hýbat i jen pomocí stylů.

doplněno 05.08.13 20:14:

Teď se neroztahuje proto, že .list-title má napevno height: 49px; (a taky overflow: hidden)

Ohodnoceno: 2x
 
Od: petr12346
Datum: 10.08.13 19:17

Mockrát děkuji, už je to ok

Ještě bych měl dotaz - rád bych to stejné použil i na nadpisy h1, jenže netuším, jak to u nich zařídit.. h1 a fungovat nebude, takže nelze to rozdělit "na 2 části"

Děkuji

Datum: 10.08.13 20:07
avatar

Tak tam místo a dejte třeba span, je to fuk.

Mimochodem, ten obrázek bruslí, co tam teď máte, je pořád linkovaný z imgur.com, kam jsem ho nahrál, a byl vyříznutý z toho původního jen hodně nahrubo. Možná to budete chtít trochu lepší.

doplněno 10.08.13 22:41:

Aha, tak snad nějak takhle: http://jsfiddle.net/32TAq/1/ Ale záleží na tom, jak přesně si to představujete.

Pro složitější grafiku by mohlo být jednodušší mít h1 schovanou (běžně neviditelnou) a na jejím současném místě mít obyč div nebo p, ale to ten systém nejspíš taky neumožňuje.

Ohodnoceno: 2x
 
Od: petr12346
Datum: 10.08.13 20:58

no jak to myslíte s tím spanem? s h1 mohu pracovat pouze přes css, v html nelze nadpisy poupravovat (sunlight).

Jinak ano, vím o tom, zatím jsem si s tím "hrál", zkoušel jsem co a jak - cestu k obrázku samožejmě změním

 

 

 

 

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.