[CSS] narożniki w zmiennej wielkości div'ie, "wydajne" osadzenie grafiki w div'ie Opcje

[r4xz]

problem:
(IMG:http://img692.imageshack.us/img692/4885/cssx.gif)
rozwiązanie:

[HTML] pobierz, plaintext 
<div id="pudlo">
    <div class="p2">
        <div class="p3">
            <div class="p4">
                tutaj dopiero tekst
            </div>
        </div>
    </div>
</div>
[HTML] pobierz, plaintext 

Kod

#pudlo {
    width: 242px;
    height: 754px;
    background: #0F3s56 url('1_naroznik.gif') top left no-repeat;
}

.p2 {
    background: url('2_naroznik.gif') top right no-repeat;
}

.p3 {
    background: url('3_naroznik.gif') bottom right no-repeat;
}

.p4 {
    background: url('4_naroznik.gif') top left no-repeat;
    padding: 8px;
}

ma ktoś pomysł na lepsze rozwiązanie tego problemu?

Ten post edytował r4xz 8.06.2010, 19:49:28

[eamzeet]

Tutaj jest zaprezentowana jedna z technik zaokrąglonych rogów.
Wklejam ją bo podobnie wykorzystuje 4 obrazki i css.

Ten post edytował eamzeet 8.06.2010, 20:08:17

[r4xz]

tu chyba jednak lepiej zastosować zaprezentowaną przeze mnie metodę - oszczędność miejsca (CSS) i większa przejrzystość (IMG:style_emoticons/default/winksmiley.jpg)

PS widzę, że jednak nie ma na to idealnego rozwiązania. no trudno (IMG:style_emoticons/default/dry.gif)

[Kildyt]

tu chyba jednak lepiej zastosować zaprezentowaną przeze mnie metodę - oszczędność miejsca (CSS) i większa przejrzystość (IMG:style_emoticons/default/winksmiley.jpg)

PS widzę, że jednak nie ma na to idealnego rozwiązania. no trudno (IMG:style_emoticons/default/dry.gif)

Twój pomysł jest dobry, ale źle wykonany. Dlaczego rogi się nie dostosowują? A bo zawartość to p4, a ty zdefiniowałeś wymiary w pudlo, który odpowiada tylko za lewy narożnik.

PS Za niedługo CSS 3 wypłynie na szerokie wody i będzie spokój. Uff...