Antworten zum Thema „equal high colums und abgerundete Ecken“

[Rici_]

Hi Leute!!

Ich hab das Grundgerüst mit "equal high colums" realisiert und möchte nun der mittleren Spalte abgerundete Ecken geben. Nur leider werden diese nur am rechten Ende der Spalte dargestellt und ich möchte sie natürlich gerne auf beiden Seiten haben .
Kann mir vielleicht jemand sagen wie ich das Problem lösen kann?
Oder mich darauf hinweisen, dass ich es auf diesem Weg nicht schaffen werde und anders an die Sache ran gehen muss..
(Anmerkung dazu: Ich bin noch nicht so sicher auf dem Gebiet... )

Danke schon mal für eure Hilfe...

Hier der HTML-Code:

    <div id="container3">
        <div id="container2">
            <div id="container1">
                <div id="spalte1"></div>
                <div id="spalte2"></div>
                <div id="spalte3"></div>
            </div>
        </div>
    </div>

Hier das CSS:

#container3 {
    float:left;
    width:100%;
    min-height:400px;
    background-color:blue;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    min-height:400px;
    position:relative;
    right:5%;
    background: -moz-linear-gradient(top, #b6c0c6, #e3e9ec);
    -moz-border-radius:10px;
}
#container1 {
    float:left;
    width:100%;
    min-height:400px;
    position:relative;
    right:75%;
    background-color:blue;
}
#Spalte1 {
    float:left;
    width:21%;
    position:relative;
    left:77%;
    overfow:hidden;
}
#Spalte2 {
    float:left;
    width:66%;
    position:relative;
    left:81%;
    overflow:hidden;
    border-radius:10px;
}
#Spalte3 {
    float:left;
    width:1%;
    position:relative;
    left:85%;
    overflow:hidden;
}

 

[Tr3icio]

AW: equal high colums und abgerundete Ecken

Also als erstes: border-radius würde ich vorsichtshalber noch mit Präfixen versehen, weil es halt eine neuere Eigenschaft ist.
2. Warum so viele verschachtelte Container und die ganzen IDs?
Wenn du schon CSS3 nutzt (Verläufe) kannst du auch auf :first-child (erstes Element) und :last-child setzen (letztes Element). So kannst du alle 3 Spalten ansprechen.
3. Du kannst auch > benutzen um direkte Kindelemente anzusprechen.
4. Warum bei nur -moz- ? Damit schleißt du IE, Opera und Webkit (Chrome, Safari) komplett aus und diese haben zusammen wohl doch eine größere Zahl an Nutzern.
5. Warum immer float? Du kannst display auf inline-block setzen, dann sind alle in einer Reihe und man hat keine typischen float-Probleme.
6. Warum überall position: relative? Du kannst auch transforms oder einfache margins verwenden, vor allem da viele %-Angaben bei unterschiedlichen Auflösungen Probleme verursachen können. Und das overflow: hidden überall kann auch noch extra dafür sorgen, dass Elemente nicht sichtbar sind.

Und zum border-radius: Versuch mal einen border anzugeben und schau dann, was angezeigt wird.

 

[Rici_]

AW: equal high colums und abgerundete Ecken

Die ganzen verschachtelungen habe ich eingesetzt damit die drei spalten, unabhängig von ihrem Inhalt, immer gleich hoch sind.
Diese Eigenschaft erreiche ich doch nicht mehr wenn ich sie als kindelemente einsetze und mit :first- bzw. :last-child anspreche oder seh ich das grad falsch??
Dass die verläufe usw. Noch auf weitere browser angepasst werden müssen,hatte ich im hinterkopf, hab ich bis zu diesem punkt noch nicht umgesetzt. Aber danke für den hinweis!
Wie meinst du das mit dem border angeben? Das definiert doch nur eine kontur?! Oder um überhaupt zu sehn ob er die komplett darstellt?

Dank dir für deine Mühe!!

 

[Waegi]

AW: equal high colums und abgerundete Ecken

Also um kurz das anzusprechen, was du eigentlich erreichen möchtest, probier mal den Code hier für die Rundung:

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

Die HTML5 / CSS3 Box ist da ne Hilfe.

Mfg Waegi

 

[Rici_]

AW: equal high colums und abgerundete Ecken

Danke erstmal für eure Hilfe, aber es hat leider nicht funktioniert.

Ich hab jetzt das gesamte Gerüst umgebaut und habs jetzt so wie ich es wollte... Auf ne andere Art und Weise zwar, aber es gibt längst nich mehr so viele Verschachtelungen usw... Is sehr viel übersichtilicher geworden...

 

[NocturnalDeath]

AW: equal high colums und abgerundete Ecken

Wäre nett, wenn du den neuen Code nun noch posten würdest, da es für andere sicher hilfreich sein kann, wen sie vor dem gleichen Problem stehen.