Runde Ecken, wo genau die divs platzieren?

Hallo alle zusammen,

ich habe bereits Designs mit curvy corners umgesetzt, allerdings stört mich, dass es für alte Browser nicht funktioniert.

ich habe mir den Beitrag zu runde Ecken durchgelesen, allerdings verstehe ich nicth ganz, wo die divs festgelegt werden sollen, nach Nils vorschlag.

HTML-Code:

---

<div class="bg_main">
<div class="oben_links">
<div class="oben_rechts">
<div class="unten_links">
<div class="unten_rechts">
<div>
<div>
<div>
<div>
<div>

---

Wird der im fe_page.tpl eingefügt? Wenn ja wo? Ich habe es versucht, indem ich die div's "oben_links" und "oben_rechts" im header platziert und die beiden unteren im Footer.

Allerdings klappt das nicht so recht.
Viele Grüße
rantaplan

Hi,

normal brauchst du gar nicht so viele divs für runde Ecken.

Meistens reicht es ja aus wenn die Box beim Vergrößern nur vertikal wächst. In diesem Fall brauchst du i.d.R. kein zusätzliches div. Die vorhandenen Elemente reichen aus.

Für den Fall einer in jeder Hinsicht flexiblen Box brauchst du normal nur zwei zusätzliche divs.

Zu drei Arten von runden Ecken hab ich mal was geschrieben.
Vielleicht hilft dir das bei der Umsetzung. ;)

Peter Müller hat das in seinem Buch Little Boxes 2 auch sehr schön erklärt.

Hi,

ich dachte um möglichst geringe Ladezeiten zu erreichen wäre es am sinnvollsten für jede ecke ein div zu erstellen, da eine Grafik mit verlauf, schatten etc. schon recht groß werden kann.

Wo würde ich denn in Contao die divs einfügen, wenn ich einen Fall habe, in dem ich gerne diese Methode anwenden würde?

Zitat:

---

Zitat von rantaplan

Wo würde ich denn in Contao die divs einfügen, wenn ich einen Fall habe, in dem ich gerne diese Methode anwenden würde?

---

Warum solltest du eine Methode anwenden wollen die mehr Elemente erfordert, wenn es doch meistens ohne zusätzliche Elemente mit nur ein bißchen CSS + zwei Grafiken geht?? ;)

Ist die Ladezeit kein Argument, dass dafür spricht?

Angenommen mein Header, mein Wrapper etc. haben alle schon hintergrundbilder. Ich benötige jetzt runde ecken. Dann bleibt mir ja nur die Möglichkeit divs festzulegen. Oder?

Ich denke, dass eine 900 x 150 px große Grafik mit akzeptabler Qualität längere Ladezeiten hat, als 4 Ecken, die jeweils 10 x 10 px groß sind, oder vertue ich mich da ?

Ich habs bisher auch mit Images umgesetzt, (bei dynamischer Breite mit 4 divs) Dazu sind dann aber immer viele eigene Templates erforderlich, was bei updates unter Umständern Mehraufwand bedeutet. Einfache runde Ecken müssten aber mit den aktuellen Browsern auch mittels css umsetzbar sein.
Gruß
ChrMue

die Methode von Helmschrot

Zitat:

---

Zu drei Arten von runden Ecken hab ich mal was geschrieben.
Vielleicht hilft dir das bei der Umsetzung.

---

funktionert immer und ist sicher.

Dein Argument

Zitat:

---

Ist die Ladezeit kein Argument, dass dafür spricht?

---

Ist im Zeitalter von DSL wohl eher zweitrangig, es sei denn, du schreibst für`s Handy.

Zu ChrMue

Zitat:

---

Einfache runde Ecken müssten aber mit den aktuellen Browsern auch mittels css umsetzbar sein.

---

Genau richtig, aber noch nicht unterstützt. CSS3 gibt es offiziell noch nicht, einige Browser unterstützen aber einige Features schon.

Nur ein Beispiel bei der Suche bei g... http://www.css4you.de/trickkiste/tr00012.html

Viel Spass Nils

Alle modernen Browser unterstützen runde Ecken via CSS3. Da Page Speed inzwischen ein Ranking-Kriterium ist, würde ich die CSS3-Lösung wählen.

Gruß
hafenmeister