Autor Zpráva
Stalker
Profil
Ahoj,

jak docílit toho, aby horní border nebyl pod "kolečkem" ale končil vlevo i vpravo cca 5px před "kolečkem"?

Ukázka: jsfiddle.net/fak8hw99

Edit: ještě bych chtěl dodat, že obsah nebude mít fixní šířku
Trejpa
Profil
Stalker:
Toho rámečku se nezbavíš. Můžeš ho ale překrýt jinou barvou.

aby horní border nebyl pod "kolečkem"
Nastavit kolečku barvu pozadí: background: white;

končil vlevo i vpravo cca 5px před "kolečkem"?
Je třeba další element, který stejným způsobem překryje čáru. Kolečko bude teprve před ním.

ukázka
Stalker
Profil
Trejpa:
Zapomněl jsem dodat, že na pozadí je obrázek, takže nejde použít fallback bílého pozadí pod kolečkem
anonymníí
Profil *
Stalker:
K tomu obecné řešení asi nepovede. Osobně bych to, pokud dám na svou intuici a první nápad, místo Trejpovy bílé na pozadí přiřadil totéž pozadí, které má rodič, jen s jinou background-position. Tak, aby to sedlo. Při změně (rozměru) pozadí s tím budeš muset trochu laborovat, ale jiná cesta asi nepovede.
Stalker
Profil
anonymníí:
A když bych to ještě zkomplikoval a byl by na pozadí carousel z obrázků? :)

Já nad tím celkově přemýšlel tak, že mezi rámečky umístím nějaký obrázek a bordery udělám přes after a before, zatíkající např. -5000px a +5000px s tím, že to pak oříznu, ale tím pádem bych obrázek mezi rámečky ořízl i z vrchu.

Něco takového: jsfiddle.net/fak8hw99/1 ale ještě chloupek k dokonalosti chybí :)


Leda to obalit ještě jedním obalem a tomu nastavit padding-top, v případě, že znám výšku obrázku. To by šlo, ale že by se mi to zrovna nějak moc líbilo, se říct nedá :D

Ukázka: jsfiddle.net/fak8hw99/2
Keeehi
Profil
A co se vykašlat na rámečky a jen si to prostě nakreslit a použít obrázek?
Stalker
Profil
Keeehi:
Když tvoříš webové stránky je vždy dobré (pokud to jde) vše tvořit pomocí HTML a CSS. V tomto případě obrázek použít nemůžu, protože jednak bude text různě veliký a potřebuji, aby se ten rámeček natahoval a zkracoval a druhak bude web responzivní, takže potřebuji aby se rámeček automaticky zmenšoval na menších zařízeních.
Keeehi
Profil
Stalker:
Toho jde ale přece dosáhnout i s obrázky. Pamatuji si dobu, kdy se kulaté rohy musely řešit přes obrázky. Pokud nebyla známá ani šířka ani výška boxu, bylo na to potřeba 8 obrázků. Což sice bylo trochu nepohodlné, ovšem funkční. Plně responsivní provedení be tvém by mělo být možné s 2 png obrázky.

No a nebo by taky mohlo jít využít SVG.
Trejpa
Profil
Stalker:
Když tvoříš webové stránky je vždy dobré (pokud to jde) vše tvořit pomocí HTML a CSS.
Naštěstí ne všichni sdílí stejný názor.

V tomto případě obrázek použít nemůžu
Nemůžu nebo neumím? Už před deseti lety jsem řešil stejný problém v situaci, kdy u natahovacího rámečku každý roh i stěna vypadala jinak. S dnešními možnostmi CSS a tvým jednoduchým 1px rámečkem je to jen o dost jednodušší.

Ve tvém případě bude stačit jen jeden obrázek vodorovné čáry (dlouhé, co to dá, vysoké 1 px), která má uprostřed průhlednou mezeru. Dáš ji bloku s rámečkem jako pozadí zarovnané nahoru na střed bez svislého opakování, horní rámeček zrušíš. Můžeš doplnit 1 px odsazení paddingu shora jako kompenzaci chybjícího pixelu.
Stalker
Profil
Keeehi [#8], Trejpa [#9]:
Proč zrovna toto řešit obrázky a nepoužít css? Napřijde mi to jako dobré řešení.

Trejpa [#9]:
Tvé řešení by šlo, zřejmě by šlo použít i na můj případ. Do doby, dokud se klient nerozmyslí, že chce vrchní obrázek trochu upravit (rozměry). Ps: díky za odkaz, přečtu si :)
Keeehi
Profil
Stalker:
Proč zrovna toto řešit obrázky a nepoužít css? Napřijde mi to jako dobré řešení.
Protože to je jednoduché a všude krásně funkční.
Speedy21
Profil
Souhlasím s Trejpou Keeehim... Stačí použít jediný obrázek a nemusíš zbytečně psát 50 řádků kódu, kvůli takové maličkosti.
Živá ukázka
Speedy21
Profil
Pokud bys ale trval na svém, tak tady je to pouze pomocí kódu:
Živá ukázka
Stalker
Profil
Speedy21 [#12]:
Řešení obrázkem je jednoduchý, do doby, dokud klient neřekne, že chce změnit obrázek , nebo barvu či tloušťku rámečku

Speedy21 [#13]:
Toto je pěkné řešení, to se mi líbí :-)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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