• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Runde Ecken bei variabler Größe

E

Efchen

Guest
Moin,

wie war das doch gleich mit runden Ecken (oder Schatten o.ä.; 8 verschiedene Grafiken für 4 Ecken + 4 Ränder)?
Aber bitte mit variabler Größe in Y- sowie auch X-Richtung.

Meister prm hat nur eine variable Y-Ausdehnung, SelfHTML hat eine mit beiden, die aber in beiden Richtungen durch die Größe der einen Ecke begrenzt ist.

Ich komme immer nur auf entweder variable X-Ausdehnung oder variable Y-Ausdehnung.

Tipps? Links?

Danke,
-Efchen
 
Werbung:
Werbung:
Werbung:
Wenn ich das richtig sehe, ist ein Nachteil der verlinkten Technik, dass sich die Grafiken gegenseitig überdecken können müssen. Das macht Transparenz unmöglich und das Rendern der Grafiken gegen einen bestimmten Hintergrund (etwa die Farbe weiß) erforderlich.

Ich habe mal ein Beispiel mit 9 Bildern (oben links, oben mittig, ..., unten mittig, unten rechts) und Transparenz erstellt (Inline-Grafiken).

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>css demo</title>
    </head>

    <style type="text/css">

body {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQEDLaWLUmUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAYElEQVRo3u3YQQ0AIQxFwbJBAtbwsp6wgQwkIAIVPTSZJ6CZ/GPbv0/kNEfS4fiiYNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NA16nm/zXUtDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDV2uBzfFBPtMSQpBAAAAAElFTkSuQmCC) center;
}

.box {
    width: 300px;
}

.box .left {
    background: left repeat-y;
}

.box .center {
    margin-right: 25px;
}

.box .right {
    margin-left: 25px;
    background: right repeat-y;
}

.box .header .center { height: 25px; }

.box .footer .center { height: 25px; }

.box .content .center { padding: 30px; }

.box .header .left { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABBUlEQVRIx9XVPWvDMBSF4cdqAoaEth4ylZAlY0Lo0P7//1IItHTKEJJAQhe3GCHny/LQs+leS690JZ9byKMST6jwjHEdA0WHhUeYYn7pw3sgFZZ4vHZCcWNJVpi05A/YYIdTvXZAuBbygteW3Cf2GN57kgILzBK5NY4YdClXwFuiPN/Yntt5rIcz8PcE4OPCvKTajrqIADt83bL7uCSpS57lAqQgZeIVdQKkIKvEHQy7ek6I/uRJ9IoGOYytCVlGuW0m8/yDjCIvWucoUwyZRvGjjPqFzCMvGuSGlFFsL7NC3dGadj3sA1I1xhs9KNQ9uWkhvUDGjfGpL0jZseff7F3h30J+ANHoHjJ7G8akAAAAAElFTkSuQmCC); }
.box .header .center { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZCAYAAABD2GxlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAANklEQVRIx+3QAQ0AIRDAsPFBHv4tYONtHEmnoNmqToP7Gt544K6ug4CAgICAgICAgICAgI8Cf9e+AWdzFoz6AAAAAElFTkSuQmCC); }
.box .header .right { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABLUlEQVRIx73VyUoEMRSF4a8nFcduUXBARRF3Ii58C99/5U5QnGjnedrcwhBEWrvigUDdDPXnJDdJA/u+9IhbXKKPq6gbSu0sHosyl9Uf4BB3f4G0sDVAv1msYwHXv3XXwlQMvIpyg+dw2cr6j2IVPVzgdVDIEhpoRtzEOx5iXx4xmY2bwEYs382gkJ/aPyIR7sJ1qsVwdzYMpFIz3PbxgvGkrRvLdxwT+nbwb9QJyGFWP4+9mMifnXw3uX4sVTvZp1GcDuskd3WapfMaluuEpKBUu3Gga4NUoHyPduqGVNfTeZYIvbohcJ/F2yUgHRwl8XRkXK0QeMvilRKQNk6SeLMEBJ7yN6oEpBNPRaWZEhDxPlXqlYKkV023FOQ9+Z4sBUmv/JFSkPS/zf+A+AR2dzPqx/1LHwAAAABJRU5ErkJggg==); }

.box .content .left { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAoCAYAAAALz1FrAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAM0lEQVRIx+3NMRHAIAAAsaf68G8BG4xVAAOXGMioZr/VAV8XSCQSiUQikUgkEolE8n6yAWV7AYOnQLRDAAAAAElFTkSuQmCC); }
.box .content .center { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAOElEQVRYw+3OAQ0AIAzAsIGl+/eGjZO0CnqqabHbcoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCvwYfChsAg9Cm46wAAAAASUVORK5CYII=); }
.box .content .right { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAoCAYAAAALz1FrAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAANElEQVRIx+3NMREAIAwEwQ8u0IF/b1RISApmr7puK8lJT/vNykAQCAQCgUAgEAgEAoH8j1wtCQCcCDjoDAAAAABJRU5ErkJggg==); }

.box .footer .left { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABD0lEQVRIx9WVzU6EMBRGTxmjRFQYMy400ZVbMy8yL+8zmEgyLHAGNQgobm70pgECQ7uYJk34Stpzf1sDbPgfKR5GYOmfo4aUSre+IO8DnjmDvCkd+oLkSl/5guyUPgVq34kHOHMNWSjYtXxfSJ4C133y0gN3CvkA9mr9zmVutMV74EHp2tUNoOOeA5nSK6DxcXc9W/reRdjsBDeSn1urpIs5xdC1sZCDE9Enc0F9mzJgCUQKFB/aP0OWpeJNpNZi4EvmwgWkBV6t0AGcC6wAvsd4NsaabUcxAFwK7BOohs4yE0IbAmvgpud/JQ1dShMb8TIwBxTLEnia8vaYGT0WSbM++oTYoYzFy0Sei7+n/BcAoC9R2R/s0QAAAABJRU5ErkJggg==); }
.box .footer .center { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZCAYAAABD2GxlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAANklEQVRIx+3QAQ3AIADAsPFgAh3493YZENIpaDaq3cV9XR4gICAgICAgICAgIODJZrUcfBn4A+yiAIDmSLssAAAAAElFTkSuQmCC); }
.box .footer .right { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABAklEQVRIx72VuwrCQBBFjxofWFiJoqA/4f9/gYUELW1ErFLEiEIwIdpsYBiiJrrjVnM3jzO7N3vTAlbYjFlZtI0AhRT/gBRWkIeo71YQ+d6rFWQg6rMVZCTq2AKSAT2hEwtIX+nUNyQHpkLvLc5JR+mjb0gGzIW+ADffkKHSW9+xkgNjoSMg9gnJgIWaC30GZAZM1NwGSH1BSoCMkANw0jcGP3iwVHMRsPuUlnW771Z4EAFrFfGNV5K7g7asuHZwK3i8ejio0Xm/onNp8ulTh4H4XRaum7Yzc6TSVG9PqL+id5BZA08u7iTHTYys68nehd3tm09RQ1LgCpxdt0ndLXk3nr0QOuQ8qzWiAAAAAElFTkSuQmCC); }

    </style>


    <body>

        <div class="box">
            <div class="header">
                <div class="left">
                    <div class="right">
                        <div class="center"></div>
                    </div>

                </div>
            </div>

            <div class="content">
                <div class="left">
                    <div class="right">
                        <div class="center">
                            <p>Inhalt</p>
                            <p>Inhalt</p>

                            <p>Inhalt</p>
                            <p>Inhalt</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer">

                <div class="left">
                    <div class="right">
                        <div class="center"></div>
                    </div>
                </div>
            </div>
        </div>

    </body>

</html>

Die Box ist in der Größe ebenfalls frei skalierbar.

Beim Zoomen gibt es bei mir im Firefox Pixel-"Rundungsfehler" (aber ich denke, das ist bei der anderen Technik auch so).
 
Beim Zoomen gibt es bei mir im Firefox Pixel-"Rundungsfehler" (aber ich denke, das ist bei der anderen Technik auch so).
Zum Vergrößern anklicken....
Der Rundungsfelfer in deinem Beispiel kommt bestimmt durch die leeren, ( seperat positionierten ) Elemente. In dem Beispiel von Andreas Kalt gibt es solche Elemente nicht. Jede Breite wird von innen bestimmt.
 
Ja, das klingt schon logisch.

Ich habe gerade ein wenig rumgebastelt und bin auf einen sehr eigenartigen Effekt gestoßen:

firefoxtrans.png


Die Balken in beiden Beispielen bestehen aus drei PNG-Grafiken. Links und rechts je 25*25 Pixel mit no-repeat, in der Mitte eine Grafik mit 25px Höhe und repeat (einmal 40px breit, einmal 25px, aber das scheint keinen Einfluss zu haben -- habe es im unteren Balken mit der 25x25 Grafik probiert mit dem gleichen Effekt). Der Screenshot ist in gezoomter Ansicht im Firefox entstanden.

Die roten Grafiken werden bei mir in jeder Zoomstufe "lückenlos" gerendert, die "grauen" nicht (siehe Screenshot unten rechts).

Das ergibt für mich genau null Sinn. :)

Ich merke allerdings gerade, dass dieser "Fehler" bei mir nur unter Linux (bzw. im Firefox 3.5.8) auftritt. In der Virtual Machine mit Windows XP sieht es im Firefox (3.6) und im IE8 immer sauber und lückenlos aus.

(Das gilt bis auf einen winzigen Fehler im IE8 auch für das weiter oben gepostete erste Beispiel.)

*schulterzuck*

Source:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>css demo</title>
    </head>

    <style type="text/css">

/**
 * new clearfix
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
 */
.clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clear             { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */

body {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQEDLaWLUmUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAYElEQVRo3u3YQQ0AIQxFwbJBAtbwsp6wgQwkIAIVPTSZJ6CZ/GPbv0/kNEfS4fiiYNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NA16nm/zXUtDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDV2uBzfFBPtMSQpBAAAAAElFTkSuQmCC) center;
}

.box {
    width: 300px;
    margin-bottom: 50px;
}

.box .left {
    width: 25px;
    height: inherit;
    float: left;
}

.box .right {
    width: 25px;
    height: inherit;
    float: right;    
}

.box .center {
    height: inherit;
    margin: 0 25px;
}

.box .header {
    height: 25px;
}

/* Rot */
.box .bgimage .left { background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDhAKK5J7KrAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAKElEQVRIx+3NMQEAIBAAodP+bT6gptAJCrBOTY/tPpBIJBKJRCKRdAG2UAHkHvXPgwAAAABJRU5ErkJggg==);}
.box .bgimage .center { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDhAKK5J7KrAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAKElEQVRIx+3NMQEAIBAAodP+bT6gptAJCrBOTY/tPpBIJBKJRCKRdAG2UAHkHvXPgwAAAABJRU5ErkJggg==);}
.box .bgimage .right { background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDhAKK5J7KrAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAKElEQVRIx+3NMQEAIBAAodP+bT6gptAJCrBOTY/tPpBIJBKJRCKRdAG2UAHkHvXPgwAAAABJRU5ErkJggg==);}

/* Transparent */
.box .trans .left { background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABBUlEQVRIx9XVPWvDMBSF4cdqAoaEth4ylZAlY0Lo0P7//1IItHTKEJJAQhe3GCHny/LQs+leS690JZ9byKMST6jwjHEdA0WHhUeYYn7pw3sgFZZ4vHZCcWNJVpi05A/YYIdTvXZAuBbygteW3Cf2GN57kgILzBK5NY4YdClXwFuiPN/Yntt5rIcz8PcE4OPCvKTajrqIADt83bL7uCSpS57lAqQgZeIVdQKkIKvEHQy7ek6I/uRJ9IoGOYytCVlGuW0m8/yDjCIvWucoUwyZRvGjjPqFzCMvGuSGlFFsL7NC3dGadj3sA1I1xhs9KNQ9uWkhvUDGjfGpL0jZseff7F3h30J+ANHoHjJ7G8akAAAAAElFTkSuQmCC);}
.box .trans .center { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZCAYAAABD2GxlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAANklEQVRIx+3QAQ0AIRDAsPFBHv4tYONtHEmnoNmqToP7Gt544K6ug4CAgICAgICAgICAgI8Cf9e+AWdzFoz6AAAAAElFTkSuQmCC);}
.box .trans .right { background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oDDQAzBDm9ls0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABLUlEQVRIx73VyUoEMRSF4a8nFcduUXBARRF3Ii58C99/5U5QnGjnedrcwhBEWrvigUDdDPXnJDdJA/u+9IhbXKKPq6gbSu0sHosyl9Uf4BB3f4G0sDVAv1msYwHXv3XXwlQMvIpyg+dw2cr6j2IVPVzgdVDIEhpoRtzEOx5iXx4xmY2bwEYs382gkJ/aPyIR7sJ1qsVwdzYMpFIz3PbxgvGkrRvLdxwT+nbwb9QJyGFWP4+9mMifnXw3uX4sVTvZp1GcDuskd3WapfMaluuEpKBUu3Gga4NUoHyPduqGVNfTeZYIvbohcJ/F2yUgHRwl8XRkXK0QeMvilRKQNk6SeLMEBJ7yN6oEpBNPRaWZEhDxPlXqlYKkV023FOQ9+Z4sBUmv/JFSkPS/zf+A+AR2dzPqx/1LHwAAAABJRU5ErkJggg==);}

    </style>


    <body>

        <div class="box">
            <div class="header bgimage clear">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center"></div>
            </div>
        </div>

        <div class="box">
            <div class="header trans clear">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center"></div>
            </div>
        </div>

    </body>

</html>
 
Werbung:
mermshaus schrieb:
Ich merke allerdings gerade, dass dieser "Fehler" bei mir nur unter Linux (bzw. im Firefox 3.5.8) auftritt. In der Virtual Machine mit Windows XP sieht es im Firefox (3.6) und im IE8 immer sauber und lückenlos aus.
Zum Vergrößern anklicken....
Mir ist auch schon aufgefallen, dass bei FF 3.5.8 (unter Linux) beim Zoomen manchmal seltsame Lücken entstehen. Das kann eigentlich nur ein Fehler in der Zoom-Funktion sein. Da stimm ich dir voll zu.
 
Ich weiß nicht wofür die Codezeilen in background stehen. Mit background-position: center; positionierte Hintergrundgrafiken liegen aber nicht immer px-genau über zentrierte Elemente.

Efchen schrieb:
...
Aber bitte mit variabler Größe in Y- sowie auch X-Richtung.
Zum Vergrößern anklicken....
Mir ist nicht klar ob sich die Box an der zur Verfügung stehenden Breite oder horizontal am Inhalt anpassen soll.
Transparente, runde Ecken
Transparente, runde Ecken (shrink to fit)

Für IE <7 habe ich auf alphatransparente, runde Ecken verzichtet ( die Box ist hier einfarbig, ich kenne kein png-fix mit background-position).

Die vielen divs um die Box dienen einem fix für min-width im IE6.
 
Zuletzt bearbeitet:
Also die Lösung von Andreas Kalt ist die selbe wie bei SelfHTML und leider unbrauchbar, wenn der Viewport größer wird, als die Grafik.
Dann entstehen Lücken. Das selbe auch bei Sliding Doors.

Und mit "runde Ecken, Schatten o.ä." meinte ich eigentlich eine Lösung für einen Rahmen bestehend aus 8 Grafiken.

Gibt es da überhaupt eine Lösung? neuroleptika, Deine Lösung basiert ja auch "nur" auf einem groooooooßen Image.
 
Werbung:
Efchen schrieb:
Gibt es da überhaupt eine Lösung? neuroleptika, Deine Lösung basiert ja auch "nur" auf einem groooooooßen Image.
Zum Vergrößern anklicken....

Kommentar zu meinem Beispiel in #7, nachdem sich die Rundungs-/Darstellungsfehler wohl mehr oder weniger als Firefox/Linux-verschuldet herausgestellt haben?

Oder ist das zu stumpf? :)
 
Efchen schrieb:
...
Gibt es da überhaupt eine Lösung? neuroleptika, Deine Lösung basiert ja auch "nur" auf einem groooooooßen Image.
Zum Vergrößern anklicken....
Es sind 3 Grafiken. Du kannst die große Grafik auch verkleinern bzw. teilen. Wenn du ein weiteres Element in h2 span und p a einfügst kannst du die Lücken mit einer Hintergrundfarbe oder einer kachelnden Hindergrundgrafik füllen.
Wobei ich aber immer versuche mit möglichst wenigen, einzelnen Grafiken auszukommen.
Code: 
span span,
a span {
background: #000000;
display: block;
margin-right: 8px;
}

mermshaus schrieb:
Kommentar zu meinem Beispiel in #7, nachdem sich die Rundungs-/Darstellungsfehler wohl mehr oder weniger als Firefox/Linux-verschuldet herausgestellt haben?
Zum Vergrößern anklicken....
Das kann ich mir kaum vorstellen.
Magst du Dein Beispiel mal mit Hintergrundgrafiken Hochladen?
 
Zuletzt bearbeitet:
Link zur Demoseite

Edit: Ein Artefakt habe ich im IE8 (Virtual Machine) beim Zoomen wie gesagt noch manchmal:

artefactie8.png


Das bekommt man vielleicht weg, indem man die Elemente nicht verschachtelt, sondern zeilenweise mit Floats und Clearing anordnet und die Background-Images vielleicht left oder right ausrichtet. Habe ich nicht probiert. Könnte auch einfach ein Fehler in meinem VM-Setup sein.
 
Zuletzt bearbeitet:
Werbung:
Unter Linux habe ich nur den ff2.0. Dort gibt es keinen Seitenzoom (nur Textzoom).
Im IE8 (win7) kann ich die Verschiebung nicht provozieren. Allerdings im IE7. Dort hilft scheinbar Layout für .box .right:
Code: 
.box .right {
zoom: 1;
}
Wenn das auch im IE8 hilft stimmt vielleicht etwas an deiner Testumgebung nicht (ab IE8 gibt es kein haslayout mehr).

Edit:
siehst du die Verschiebung auch in meinem Beispiel?
 
Zuletzt bearbeitet:
In der VM (Windows XP) tritt in meinem Beispiel der Effekt aus #15 mit und ohne zoom: 1; im IE8 und im "IE7-Modus" des IE8 auf.

Bei deinem Beispiel sehe ich in der VM keine Probleme. Im Firefox 3.5.8 unter Linux habe ich aber auch manchmal an der linken Seite den Effekt aus #9. (Vermutlich wirklich irgendein Linux-/Grafikkartentreiber-"Bug".)

Im Firefox 3.6 unter Windows sieht alles prima aus.

So lange man nicht zoomt, ist überall alles okay. Ich würde im Zweifel wohl damit leben. Eine andere Wahl habe ich auch nicht, da ich nie weiß, ob die Fehler "echt" sind oder an meinem Setup liegen. :)
 
Manchmal weiß ich bei sowas auch nicht weiter. Im schlimmsten Fall retuschiere ich solche Rundungsfehler mit einer Ziergrafik.
Hier ist es ein kleines Kreutz:
attachment.php


Geht natürlich nur bei Kunden die einem diese Wahl lassen.
 

Anhänge

  • seite-1..jpg
    seite-1..jpg
    9 KB · Aufrufe: 31
Werbung:
mermshaus schrieb:
Kommentar zu meinem Beispiel in #7
Zum Vergrößern anklicken....
Ich hab wohl vom vielen Antworten einen automatischen Filter, der Code ausblendet. Bin ja nur froh, dass ich nicht geantwortet habe "Ich brauche einen Link!" ;-)
Hab ich wohl übersehen...
Das sieht gut aus...im Moment finde ich noch keine Nachteile. Danke Dir!
 
So mal, auch wenn es nicht direkt eine Lösung gibt, wieso möchtest du Grafiken verwenden? Verwende doch CSS3 und eben in älterne Browsern ist das ganze eckig und ohne Schatten.

Man sollte nicht immer für die Browser arbeiten, sondern mit den Browsern. Wenn ein Browser etwas nicht kann, dann wird das eben nicht dargestellt. Es kostet doch immer emenze Zeit und Aufwand für jeden Browser es gleichaussehend zu machen (was auch nicht der Sinn ist, unterschiedliche Browser = unterschiedliche Renderingengines = unterschiedliche Darstelungen).

Zumal es in meinen Augen absolut nicht perfomant ist, wenn man für eine Box 8 Grafiken (waren das soviel?) einbaut und 4x <div> öffnet...ich muss mich da immer an Home: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework erinnern...wuah...<div>-Suppe vom feinsten..


Gruß
Loon3y
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben