Autor Zpráva
crooner
Profil *
Dobrý večer všem, má tu takový oříšek, alespoň pro mne. Potřebuji udělat div, který bude mít kolem sebe všude stín, aby plasticky vystupoval ze stránky. Stín jsem si vyrobil ve Photoshopu s tím, že mi dělá trošku trable horní a dolní okraj, který musí být udělán takto, jinak rohy stínu nenavazují. Jenže když si stíny složím, tak bych do nich potřeboval vložit další div, který bude reagovat na obsah bude mít třeba bílou barvu a přizpůsobí jemu svojí výšku. Co není takový problém. Jenže problém již nastává když se podíváte jak vypadá horní a spodní okraj, aby stránka začínala již v prvním divu se stínem a končila ve spodním. A přitom střední stín reagoval na stránku. Doufám, že jsem to srozumitelně vysvětlil. Nevíte si s tím někdo rady? Zde přikládám kody a odkaz.
<div class="stintop"></div>
  <div class="stinbok"></div> 
  <div class="stinbottom"></div>
.stintop {
        width: 1035px;
        height: 28px;
        background-image: url(../images/shadow_top.png);
        background-position: top;
        background-repeat: norepeat;
        position: relative;
        margin-left: auto;
        margin-right: auto;
       
        top: 0px;
        z-index: 500;    
               }        
.stinbok {
        width: 1035px;
        min-height: 230px;
        height: auto;
        background-image: url(../images/shadow_bok.png);
        background-repeat: repeat-y;
        position: relative;
        margin-left: auto;
        margin-right: auto;             
        top: 0px;
        z-index: 500;    
               }
.stinbottom {
        width: 1035px;
        height: 27px;
        background-image: url(../images/shadow_bottom.png);
        background-repeat: norepeat;
        position: relative;
        margin-left: auto;
        margin-right: auto;             
        top: 0px;
        z-index: 500;    
               }
Zde odkaz na příklad
habendorf
Profil
Ne že bych to zadání zrovna chápal, ale nestačil by prostě box-shadow?
weroro
Profil
habendorf:
Možno mu ide viac menej o spätnú kompatibilitu.

crooner:
Na toto by bola vhodná matrioška. Ak ma niekto nepredbehne [napr. odkazom na hotové riešenie], tak to sem neskôr dám.

edit: Tu som niečo urobil http://temp.weroro.sk/jpw/matrioska/ Tieň sa automaticky prispôsobí akejkoľvek šírke aj výške.
crooner
Profil *
super weroro, díky. sice se asi uDIVuju, ale účel by to mělo splnit, ještě si to zkusím na stylovat a snad to bude fungovat tak jak potřebuji. ještě jednou díky.
habendorf
Profil
Já myslel, že ti stačí roztahování jen na výšku, pak ta kanonáda divů bude výrazně redukovaná.
weroro
Profil
crooner:
Ak toho budeš mať na webe veľa, tak budeš mať tzv. DIV-nú stránku. :)
crooner
Profil *
ajajaj, při průhlednosti png se rohy překrývají, to mě taky mohlo napadnout, škoda, že css neumí pozicovat pozadí v divu pomocí px
weroro
Profil
crooner:
škoda, že css neumí pozicovat pozadí v divu pomocí px
To sa predsa dá. Napr. namiesto left top zadáš hodnoty 5px 10px (= 5px z ľava a 10px z hora), nemám vedomosť ale či sa dá takto nastavovať pozadie od dola a z prava.

ajajaj, při průhlednosti png se rohy překrývají,
IE6 má s priehľadnými PNG problém (nezobrazuje priehľadnosť a namiesto nej tam dá čiernu - dá sa to však obísť filtrami ale je to fuj, fuj, fuj). To som pridal iba ako poznámku, lebo až tak to so spätnou kompatibilitou asi nepreháňaš.
margin
Profil *
weroro:
Myslím si, že crooner nemá na mysli background-position, ale opakující se pozadí osdut-potud, což se dá řešit matrjoškou, ale ta by se asi nekamarádila s matrjoškou pro stíny.

crooner:
Opravdu potřebuješ natahovací výšku i šířku? Pokud bys měl pevnou šířku, měl bys to o poznání jednodušší.
crooner
Profil *
stačí výška, už jsem to vyřešil tím, že jsem si překreslil stín, tak aby se rohy daly vykreslit pouze horním a spodním pruhem stínu. jinak přesně tak, potřeboval jsem opakující pozadí pouze v části divu. což si myslím, že opravdu řešit nejde


v mém případě

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0