CSS [+Images?] Variable Breite und Länge eines Containers

dreamcatcher · 02.05.2011, 20:09

Guuuuten Abend

Ich habe mir zur Aufgabe gemacht, ein Seitendesign zu erstellen worin man zwei Container sieht.

Dies sieht in etwa so aus:

Zitat:

Edit:// Siehe Anhang

Das Design an sich wird nach meiner Überlegung aus 3 Containern bestehen.

Einmal ganz links mit fester Breite, variabler Länge.
Dann der rote Container, mit variabler Länge und Breite.
Und zum Schluss natürlich der Wrapper um alles herum.

Nun soll aber Div2 abgerundete Ecken haben, Div1 ebenfalls.

Die Methoden für die Runden Ecken sind mir größtenteils bekannt.

Ich hatte zu erst daran gedacht, es wie sonst auch mit einem 1px Bild zu machen und dieses dann zu wiederholen.

Diese Methode fällt aufgrund der variablen Höhe UND Breite jedoch flach (Beide würden sich überlagern).

Dann fand ich per Google diesen Vorschlag:

(http://www.andreas-kalt.de/webdesign...ls/runde-ecken)

Den ich aber als suboptimal betrachte, da ich entweder riesen Bilder auf den Server packen muss oder Gefahr laufe z.B. bei einer Auflösung von 25xx X xxxx ein defektes Design zu liefern.

Daher meine Frage, wie setzt man so etwas um ?

Ich hatte mir überlegt auf CSS3 auszuweichen... jedoch hat der IE8 keine Kompatibilität für border-radius (Und der IE8 gilt als unterste Kompatibilitätsversion).

Trainmaster · 02.05.2011, 21:44

In deinem Fall wirst du um die verschachtelten Boxen nicht herumkommen. Die Grafiken haben zwar eine große Auflösung, jedoch nur wenige kB. Demnach würde ich das nicht so tragisch sehen.

nikosch · 02.05.2011, 22:17

Zitat:

Ich hatte mir überlegt auf CSS3 auszuweichen... jedoch hat der IE8 keine Kompatibilität für border-radius (Und der IE8 gilt als unterste Kompatibilitätsversion).

Sorry, aber „runde Ecken“ sind nun wirklich kein Kompatibilitätskriterium bei einer guten Website. Im größten Notfall rüste es mit Javascriip nach. Das ganze vorgeschlagene Pixelgeschiebe würde ich mir im Jahr 2011 wirklich sparen.

mermshaus · 03.05.2011, 12:40

Ich seh's wie nikosch. Nimm CSS oder JavaScript, falls es da irgendwas gibt. Clients, die es nicht unterstützen, unterstützen es dann eben nicht.

Vom Dachboden:

HTML-Code:

<!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>

BlackScorp · 03.05.2011, 13:57

hier mal eine alternative für runde ecken

http://www.phpied.com/a-rounded-corner/

manche leute sind zu kreativ für diese welt

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] feste länge variable	FreddyS	PHP Tipps 2010	4	03.09.2010 11:59
[Erledigt] fixierte Breite von Divs über 100% Breite	Julian	HTML, Usability und Barrierefreiheit	3	05.07.2009 15:43
Problem Undefined variable:	banbanban	PHP Tipps 2009	5	04.03.2009 17:55
[Erledigt] 3 div's, variable und fixe breite	aNkh	HTML, Usability und Barrierefreiheit	4	12.12.2008 14:07
Undefined variable Undefined property: block	xxJJxx	PHP Tipps 2008	16	05.08.2008 15:30
variable Breite bei display:block unmöglich?	HStev	HTML, Usability und Barrierefreiheit	15	26.04.2006 15:56
breite und länge eines Bildes		PHP Tipps 2005	3	08.03.2005 21:16
Warum wird Variable nicht übergeben???	Anuschka	PHP Tipps 2005	2	06.01.2005 13:22
länge einer variable bestimmten		PHP Tipps 2004	5	15.07.2004 14:55


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.05.2011, 21:44
Trainmaster Erfahrener Benutzer Registriert seit: 25.05.2010 Beiträge: 852 PHP-Kenntnisse: Anfänger	In deinem Fall wirst du um die verschachtelten Boxen nicht herumkommen. Die Grafiken haben zwar eine große Auflösung, jedoch nur wenige kB. Demnach würde ich das nicht so tragisch sehen.

03.05.2011, 13:57
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	hier mal eine alternative für runde ecken http://www.phpied.com/a-rounded-corner/ manche leute sind zu kreativ für diese welt __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen