| Autor | Zpráva | ||
|---|---|---|---|
| Ricco Profil * |
#1 · Zasláno: 28. 5. 2011, 22:54:57
Asi deň sa už trápim s tým ako nasekať grafiku na tento prvok - Odkaz
Problém je v tom že potrebujem aby bol univerzálny a prispôsoboval sa obsahu - to znamená aby sa naťahoval na dĺžku. Riešil som to už dvoma spôsobmi - 1. Vytvoril som si 3x div element - <div id="vrch"> </div> <div id="obsah"> </div> <div id="spodok"> </div> Vrch a spodok obsahovali 5px vysoký obrázok zaoblenia. Obsah obsahoval ten prechod ktorý mal nastavený repeat-x a celý div mal border. Výzorovo to bolo dobre ale keď som do obsahu vložil napríklad h1 tak mi to vytvorilo medzi vrchnou častou a obsahom biele miesto ... 2. vrch a spodok som vnoril do obsahu ale potom mi border obsahu presahoval cez tie zaoblené miesta Už naozaj neviem ako to zalámať tak aby mi to fungovalo ako potrebujem. Budem vďačný za každú radu. Ďakujem |
||
| Homer Profil |
#2 · Zasláno: 29. 5. 2011, 06:42:30
Já jsem to kdysi udělal pomocí čtyř obrázků, pro každý zaoblený roh jeden a fungovalo to dobře.
Bohužel už nemůžu najít kódy:-) Zkusím zapátrat v archivu... |
||
| Plaváček Profil |
#3 · Zasláno: 29. 5. 2011, 08:13:53 · Upravil/a: Plaváček
Ricco:
Zpytlíkoval jsem rychlou ukázku jednoho z možných řešení: http://klient.plavacek.net/oble-rohy.htm (Vnořený DIV lze za určitých okolností vynechat. Obrázky i rozměry si uprav dle svých potřeb. Pro box s neznámou šířkou by se použil jiný postup.) |
||
| mirag3 Profil |
#4 · Zasláno: 29. 5. 2011, 10:09:54
Myslím že sa to dá rozumne vyriešiť cez CSS3.
Zaoblené rohy: http://www.css3.info/preview/rounded-border/ Farebný prechod ako pozadie divu: http://gradients.glrzad.com/ ; http://css-tricks.com/examples/CSS3Gradient/ ; http://css-tricks.com/css3-gradients/ |
||
| shaggy Profil |
#5 · Zasláno: 29. 5. 2011, 10:31:21
mirag3:
„Myslím že sa to dá rozumne vyriešiť cez CSS3.“ Čo je to rozumne? Ak rozumne = nebude fungovať vo všetkých používaných prehliadačoch, tak áno, dá sa to rozumne vyriešiť cez CSS3. |
||
| pcmanik Profil |
#6 · Zasláno: 29. 5. 2011, 10:35:39
shaggy:
Funguje to vo vsetkych novsich prehliadacoch, vratane IE 9. |
||
| jenikkozak Profil |
#7 · Zasláno: 29. 5. 2011, 11:27:36
pcmanik:
„Funguje to vo vsetkych novsich prehliadacoch, vratane IE 9.“ To je výhodné. Ale obrázky na pozadí fungují i ve starších. |
||
| joe Profil |
#8 · Zasláno: 29. 5. 2011, 13:33:09
1. Buď pomocí CSS, jak píše mirag3
2. Pozadí jedním obrázkem a rohy pomocí CSS (tak bych to udělal, navíc zakulacené rohy nejsou ani moc vidět a dá se to brát jako jakési vylepšení) 3. Pomocí dvou obrázků, v jednom bude pozadí, ve druhém budou rohy |
||
| Ricco Profil * |
#9 · Zasláno: 29. 5. 2011, 14:00:02
Ďakujem za rady no môj problém nieje stále vyriešený.
1. Nemôžem to robiť pomocou 1 obrázka keďže sa to má prispôsobovať obsahu 2. Pomocou CSS3 to riešiť nechcem. Podpora je síce už v celku dobrá ale IE7 ktorá sa ešte stále v dosť značnej miere využíva css3 nepozná. 3. Problém s obrázkom vrchnej, strednej a spodnej časti rovnako ako problém vytvorenia 4 gulatých rohov ako div elementov je ten že celý obrázok je orámovaný a prechod je robený po y-ovej ose. To znamená že prechod robím pomocou obrázka ktorý sa opakuje po x-ovej osi - takže musím použiť aj border:1px solid farba; a tento border mi orámuje všetky vnorené obrázky - vrchnú časť alebo všetky 4 rohy. Dúfam že som už presnejšie popísal s čím si neviem rady ... Ďakujem |
||
| peta Profil |
#10 · Zasláno: 31. 5. 2011, 10:51:29 · Upravil/a: peta
div.aaa:before
{content:"";display:block;width/height/backround} div.aaa {width/height/backround} div.aaa:after {content:"";display:block;width/height/backround} + doctype 1.1/1.0, funguje to ie9,8,ff,opera a mozna i neco starsiho A priste prosim zkus google = html css rounded corner example http://www.devwebpro.com/25-rounded-corners-techniques-with-css/ "2. Pomocou CSS3 to riešiť nechcem. " Chyba. Css 3 uz nejaky patek funguje celkem spolehlive ve vsech beznych prohlizecich a ty ostatni se casem upgraduji. Zrovna dekorace okraje je to, co uzivateli bude vadit nejmene. |
||
| panther Profil |
#11 · Zasláno: 31. 5. 2011, 21:14:37
peta:
„Css 3 uz nejaky patek funguje celkem spolehlive ve vsech beznych prohlizecich“ vidíš to, zrovna v IE moc spolehlivě nefunguje, nepočítám-li verzi 9. V součtu to tvoří nějakých 25% uživatelů, což není zanedbatelná menšina. Též konstrukce :before a content nefunguje v IE <= 7.
Příště, pokud budeš chtít tento způsob doporučit, uveď i možná úskalí (poměrně velká nefunkčnost). |
||
| slovakCZ Profil |
#12 · Zasláno: 2. 6. 2011, 17:25:31
Vytvor si tech obalovacich divu vice.. jeden bude mit obrazek leveho horniho vyrezu (toho obloku), dalsi spodniho praveho napr atd atd... takze asi nejak takto:
<div class="box">
<div class="gradient">
<div class="top-border">
<div class="left-border">
<div class="right-border">
<div class="bottom-border">
<div class="top-left">
<div class="top-right">
<div class="bottom-left">
<div class="bottom-right">
<div class="content">
A zde jiz obsah
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.box { width:300px; }
/* pozadi prechodu */
.gradient { backround:#ccc url('prechod.png') top repeat-x; }
/* ramecek */
.top-border { background:url('tecka.png') top repeat-x; }
.left-border { background:url('tecka.png') left repeat-y; }
.right-border { background:url('tecka.png') right repeat-y; }
.bottom-border { background:url('tecka.png') bottom repeat-x; }
/* kulate rohy */
.top-left { background:url('top-left.png') top left no-repeat; }
.top-right { background:url('top-right.png') top right no-repeat; }
.bottom-left { background:url('bottom-left.png') bottom left no-repeat; }
.bottom-right { background:url('bottom-right.png') bottom right no-repeat; }
</style>nejdrivr mas nejaky obalovaci div box, kteremu muzes nastavit jakoukoliv sirku, jelikoz reseno je to tak, ze se to muze roztahovat i do sirky pak tam je div s tridou gradient, tomu nastavis dlouhy prechod (nebo tak dlouhy jak potrebujes a zbytek doplnis uz barvou) dale tam jsou 4 divy, ktere reprezentuji ramecek (napr 1x1px cerny obrazek, ktery se rozne roztahuje) dale tam jsou 4 divy, ktere reprezentuji kulaty roh... v tomto pripad je nutne je udelat inverzne.. to znamena ze obrazek nebude samotne zaobleni rohu, ale bude to to pozadi, ktere by ramecek vyrizl.. pokud mas tedy bile pozadi stranky, musis udelat nejaky takovyto obrazek: http://img62.imageshack.us/img62/3553/tninn.png kde bila cast obrazku je opravdu obrazek a ta cerna cast obrakzku je pruhledna.... (chce to umet praci s gimpem/photoshopem, abys to spravne vyrizl a nemel to kostrbate).. no a pak tam je div s tridou .content a tomu nastavis pading aby text nebyl tak prilepen ke krajim.. takto ti to bude fungovat i v IE6 ( pokud udelas pruhledny obrazek rohu v gifu (to ze bude kostrbaty se proste musi zkousnout.... hold IE6 je IE6 a uz i microsoft ho prestal podporovat) |
||
| pcmanik Profil |
#13 · Zasláno: 2. 6. 2011, 18:34:49
slovakCZ:
Asi nevies, ze classy sa daju spajat do jedneho, resp. nechcem radsej vydet tvoje weby.... |
||
| slovakCZ Profil |
#14 · Zasláno: 2. 6. 2011, 20:57:43
pcmanik:
To ze jsem to nezapsal strucneji neznamena ze to nevim. Mozna by ses divil na jakych webech pracuji, ale to je jina... Moc ale nechapu, co by si na tomto pripade chtel v css spojit do jednoho aby kod byl strucnejsi. Hlavne to zapsat tak, aby to pochopili i ti, kterym slozitejsi zapisy nic nerikaji. Mozna by se dalo zestrucnit to, jak zapsat zapis ramecku... napr .gradient div { background:url('tecka.png') } nebo (dost nesikovne, pac to tecku nastavi i na odstavce v textu) .gradient * { background:url('tecka.png') } a pote jen pozicovat dane pozadi... Pripadne sloucit veskere obrazky do jednoho a pote je pozicovat, ale to uz je na jinou diskuzi. Jinak jestli se ti nelibi zapis html kodu, tak je to jedno z mala reseni, ktere zaruci kulate rohy a umozni promenne sirky boxu... rekl bych ze je to nejelegantnejsi reseni dane situace. |
||
| domeon Profil |
#15 · Zasláno: 4. 6. 2011, 20:28:55
Nejen zakulacené rohy můžeš taky udělat pomocí Jquery.
http://jquery.malsup.com/corner/ |
||
| Kolonicny Profil * |
#16 · Zasláno: 5. 6. 2011, 10:41:16
Takze udelal bych to jednoduse ze dvou divu.
A to tak, ze prvni div bych narezal ze bude obrazek, ktery obsahuje pouze vrch se zaoblenim. a druhy div bych narizl zbytek. potom bych napsal kod <div class="vrch"> <div class="spodek"> nejaky content </div></div> a v CSS vrchu nastavis padding z vrchu, ktery bude stejne velky jak ten obrazek, a spodku nastavis background : img a nastavis mu hodnoty no repeat left bottom ( takze se obrazek bude nacitat ze spodu ) a pokud chces presne tu vysku, tak mu nastavis vysku . nezapomen na padding ze spoda, aby se ti to nejak odsadilo :p |
||
|
Časová prodleva: 13 let
|
|||
0