| Autor | Zpráva | ||
|---|---|---|---|
| Lama Profil * |
#1 · Zasláno: 7. 3. 2005, 13:04:12
Zdravím, mám problém s CSS.
Mám DIV ve kterém je 5px "background-image" vlevo nahoře a opakuje se v "Y". Takže má vlastně vlevo 5px čáru až dolů - potřeboval bych ale aby to pozadí začínalo až 5px shora i zespod. - Když mastavím margin, tak se posune obsah toho DIVu -> nežádané. - Když nastavím do "background-position:left 5px" tak to nefachčí. Asi kvůli tomu "repeat-y". Nevíte co s tím? |
||
| Plaváček Profil |
#2 · Zasláno: 7. 3. 2005, 13:07:42
Zkus background-position: 0 5px, možná to zabere
|
||
| Lama Profil * |
#3 · Zasláno: 7. 3. 2005, 18:56:26
Nene - nezabralo. Pokud vím, tak můžu kombinovat "left" "px" a "%". Ale i tak by mě to začalo 5px níž, ale nezkončilo dřív ;-(
Přemýšlím, že bych to něčím nějak překryl, ale to asi ne. |
||
| Plaváček Profil |
#4 · Zasláno: 7. 3. 2005, 18:59:51
No, tak těch horních 5px na obrázku (pokud je to gif) udělej jinou barvou a nastav jí průhlednost, výsledek bude stejný a ušetříš si spoustu starostí
|
||
| Honza Hučín Profil |
#5 · Zasláno: 7. 3. 2005, 19:07:30
Můžeš také do toho DIVu vložit další dva absolutně pozicované (jeden nahoru, druhý dolů) o výšce 5px a s nějakým pozadím, které překryjí to původní pozadí právě o těch 5px nahoře a dole.
|
||
| Mingan Profil |
#6 · Zasláno: 7. 3. 2005, 22:30:42 · Upravil/a: Mingan
Lama» Díval jsem se na to a bude to tím repeat-y, jediné možné řešení je asi pomocí těch vnořených divů. Prvek může mít jen jeden obrázek pozadí, takže to nemůžeš překrýt.
Plaváček»To by měl tu čáru přerušovanou a to je blbost příklad řešení, snad je to srozumitelný <head> <style type="text/css"> body/*nebo jiný nadřazený prvek*/ { background-color: blue; /*třeba*/ color: yellow; } div.velky { background: url("pruh.gif") repeat-y; position: relative; left: center; top: 5ex; /*nebo absolute, ale musí být, aby vnořené divy počítaly tento div jako počátek souřadné soustavy*/ padding: 10px; border: 1px solid green; } div.horni, div.dolni { position: absolute; left: 0px; width: 100%; height: 5px; background-color: blue; /*stejná jako má nadřazený prvek divu.velky*/ } div.horni { top: 0px; } div.dolni { bottom: 0px; } </style> </head> <body> <div class="velky"> <div class="horni"> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam augue. Maecenas pharetra ultrices tellus. Maecenas rhoncus elementum sapien. Nunc pretium, odio quis vestibulum pretium, augue mauris iaculis lectus, a placerat nibh ipsum at est. Donec venenatis mi. Vestibulum congue convallis ante. Fusce facilisis volutpat nibh. Donec egestas cursus odio. Duis quis orci vitae wisi porta sagittis. Praesent augue. Maecenas nisl dolor, porttitor eget, cursus et, dapibus ut, orci. <div class="dolni"> </div> </div> </body> Musíte si samozřejmě vytvořit ten díl proužku. |
||
| Lama Profil * |
#7 · Zasláno: 8. 3. 2005, 23:37:08
Díky všem - podívám se na to.
|
||
| Kráťa Profil |
#8 · Zasláno: 9. 3. 2005, 00:02:54
Já vím, je to prasárna, ale co udělat ještě jeden div o těch 5px menší uvnitř a to pozadí dát jemu?
|
||
| krteczek Profil |
#9 · Zasláno: 9. 3. 2005, 02:24:08
to Kráťa:co to čtu tak na to myslím... ale muselo by to být p 10px (5nahoře a 5 dole) a myslím si že to není prasárna... je to jednoduche,rychlé a účelné, kod tolik nenaroste, a v css není třeba dělat harrakiry...
krteczek |
||
| Kráťa Profil |
#10 · Zasláno: 9. 3. 2005, 02:58:15
krteczek
muselo by to být p 10px (5nahoře a 5 dole) Možná si sedím na vedení, třeba to máš na mysli. Udělat ten vnější s padding: 5px 0 0 5px a ten vnitřní s pozadím by byl tím pádem o 10px menší, pokud by se použilo 100%, jinak to zapsat s konkrétními čísly. Čili např.: <div style="width: 750px; height: 100%; padding: 5px 0 0 5px; background-color: #ffffff"> <div style="background: URL('pozad.gif')"> veškerý obsah, co má být na pozadí </div> </div> |
||
| Mingan Profil |
#11 · Zasláno: 9. 3. 2005, 20:32:18 · Upravil/a: Mingan
Kráťa» To je vono. Já sem se furt nějak snažřil pozicovat ten vnořený div a neuvědomil jsem si, že se to dá udělat pomocí paddingu toho vnějšího... Jen ještě jsi trochu pomíchal ta hodnoty paddingu. Počítají se podle směru hodinových ručiček, tedy top-right-bottom-left. Správně to tedy je 5 0 5 0px
|
||
| Kráťa Profil |
#12 · Zasláno: 9. 3. 2005, 21:42:38
5px 0 5px 0. U nuly jednotky uvádět nemusíč, u 5 ano, aby si některé prohlížeče věděly rady :-)
|
||
| Mingan Profil |
#13 · Zasláno: 9. 3. 2005, 22:15:01
Holt sem se to snažil opravit a sám to podělám...
|
||
| Honza Hučín Profil |
#14 · Zasláno: 10. 3. 2005, 09:24:17 · Upravil/a: Honza Hučín
No, pánové, to sice vyřeší ten obrázek na pozadí, ale co když pan kolega Lama chtěl mít obsah v celém divu bez odsazení, akorát ten okraj z nějakých důvodů nahoře a dole useknutý? Pak by to přes padding vnějšího divu nešlo. Musely by se jenom překrýt ty dva kousky pozadí.
|
||
| Mingan Profil |
#15 · Zasláno: 10. 3. 2005, 15:47:53
No mě přijde vhodné obecně zadávat nějaký padding, takže ten problém mě nepřijde tak podstatný. Především, když chce z nějakého důvodu odsadit pozadí, tak bych předpokládal, že chce odsadit i text, ale je to jen moje domněnka. Jiné řešení mě nenapadá, ale jestli znáš, tak se rád poučím.
|
||
|
Časová prodleva: 19 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0