Box mit runden Ecken und variabler Höhe und Breite

Mario348 · 17. Juli 2008 um 19:29

Ich möchte gerne eine Box mit runden Ecken, welche sich in Höhe und Breite dem Inhalt anpasst.

oben.html

[CODE]

Titel

Text

[/CODE]

box.css

[CODE].box {

  width:200px;
  height:200px;

#ecken img { position:absolute; }
#ecken img.ol { top:0; left:0; }
#ecken img.or { top:0; right:0; }
#ecken img.ul { bottom:0; left:0; }
#ecken img.ur { bottom:0; right:0; }

}

.header {

  background-image:url(image/ecken_oben.gif);
  border-bottom:1px solid #000000;
  height:25px;
  font-family:Verdana, Arial, Times New Roman, Helvetica, sans-serif;
  font-weight:bold;
  text-align:center;
  color:#FFFFFF;

}

.inhalt {

  height:175px;
  padding:0em;
  font-family:Verdana, Arial, Times New Roman, Helvetica, sans-serif;
  background-color:orange;
  border-width:1px;
  border-color:black;

}[/CODE]

Maxi · 17. Juli 2008 um 19:34

Vielleicht hilft dir diese Seite zu den runden Ecken weiter:

http://www.spiffycorners.com/

prm · 17. Juli 2008 um 19:36

In Breite und Höhe dynamisch hab ich selbst noch nicht ausprobiert, müsste aber danach gehen:
Runde und andere Ecken (Webdesign) | andreas-kalt.de

Bei fixer Breite ist es etwas einfacher:
Abgerundete Ecken

Mario348 · 17. Juli 2008 um 19:37

Ich möchte jedoch eine Box, die sich in der Höhe und der Breite anpasst und für die Ecken verwende ich Bilder und kein corner-radius.

Dann hilft mir das leider nicht weiter.

neuroleptika · 17. Juli 2008 um 22:52

Natürlich hilft so etwas weiter. Du solltest dir ruhig alle Alternativen ansehen und versuchen zu verstehen. Es gibt etliche Möglichkeiten. Alle haben ihre vor und Nachteile.
Die meisten Beispielvorlagen für flexible Breiten verwenden Grafiken und Sliding Doors.
„Sliding Doors“ ist das, was du in deiner Navigation verwendest.

Hier eine Methode ohne Sliding Door:

html

[code]

Runde Ecken

Lorem Ipsum. Ein Link

[/code]css [code] #box1 { width: 400px; /*optional, jede erlaubte Einheit möglich*/ background-color: #CFCFCF; }

#box1 h1 {
background-image: url(image/linke-ecke-oben.gif);
background-repeat: no-repeat;
border-bottom: 1px solid #B0B0B0;
padding-left: 8px;
font-size: 1.2em;
}

#box1 h1 span {
background-image: url(image/rechte-ecke-oben.gif);
background-repeat: no-repeat;
background-position: top right;
display: block;
}

#box1 h1 span span {
padding-right: 10px;
}

#box1 p {
padding-left: 10px;
background-image: url(image/linke-ecke-unten.gif);
background-repeat: no-repeat;
background-position: bottom left;
}

#box1 p span {
padding-right: 10px;
display: block;
}

#box1 p a {
display: block;
background-image: url(image/rechte-ecke-unten.gif);
background-repeat: no-repeat;
background-position: bottom right;
padding-bottom: 5px;
}
[/code]Die Grafiken sind Viertelkreise, die innen transparent und außen hintergrundfarben sind. Je nach Einsatz geht das natürlich auch umgekehrt.

Ein Beispiel:
Runde Ecken ohne sliding doors
(Ab IE5.0)
Ich mag diese Methode sehr gerne da ich mich beim Erstellen noch nicht für eine Hintergrundfarbe der Box entscheiden muss. Farbverläufe innerhalb der Box kann ich später leicht zufügen/ändern ohne die Ecken-Grafiken auszutauschen.

newlord · 17. Juli 2008 um 23:55

Mal so in den Raum gefragt - warum nutzt ihr für die Runden Ecken Bilder? Gut - Bei der Lösung mit den Bildern ist man dahingehend variabel was den Radius der Ecken angeht, es kann aber auch sein, dass die Grafiken evtl. nicht geladen werden können (zb. Serverseitig bedingt) bzw. auch die Ladezeit weiter in die Höhe treiben. Es geht aber auch mit ein bisschen mehr HTML und CSS.

Siehe hier:

Ich persönlich favorisiere bei solchen Angelegenheiten immer Lösungen welchen keine Grafiken zu Grunde liegen. Wer derartiges auch noch mit nem Anti-Aliasing-Effekt haben will, sollte hier schauen:

Spiffy Corners - Purely CSS Rounded Corners

MfG

NewLord

Mario348 · 18. Juli 2008 um 10:17

Da die Ecken mit Corner-Radius von einigen Browsern nicht unterstützt wird, war es mir am sichersten, auf Bilder zurückzugreifen, denn die werden sicherlich grösstenteils angezeigt.

Ich habe mir nun die Boxen der vorgeschlagenene Seiten mal angeschaut.

Eigentlich habe ich nicht viel davon verstanden, da ich nicht aus dem Code herauslesen konnte, da ich nie wusste, wo jetz der Header und so war…

Könnt Ihr mir nicht eine einfache Variante einer Box zeigen, bei der die Ecken mit Bildern dargestellt werden und wo sich die Box in der Höhe und der Breite dem Inhalt anpasst?

ky_fr34k · 18. Juli 2008 um 11:14

Runde und andere Ecken mit Sliding Doors

Mario348 · 18. Juli 2008 um 16:36

Wieso klappt das nicht?

HTML

[code]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis no

[/code]CSS:

[code].ro {
background:url(„image/ro.gif“) top right no-repeat;
margin:0;
padding:0;
}

.lo {
background:url(„image/lo.gif“) top left no-repeat;
margin:0;

padding:0;
}

.ru {
background:url(„image/ru.gif“) bottom right no-repeat;
margin:0;
padding:0;
}

.lu {
background:url(„image/lu.gif“) bottom left no-repeat;
margin:0;

padding:0;
}

.inhalt p {
margin:0;
padding:0;
}[/code]Bilder:

http://www.arudc.ch/image/lo.gif
http://www.arudc.ch/image/ro.gif
http://www.arudc.ch/image/ru.gif
http://www.arudc.ch/image/lu.gif

neuroleptika · 18. Juli 2008 um 17:38

Weil deine Grafiken Transparenz enthalten und so riesig sind, daß sie sich gegenseitig überlagern.

Wenn nur eine Grafik flächendeckend ist und du anstelle der Transparenz die gewünschte Eckenfarbe einfügst funktioniert es.

Mario348 · 18. Juli 2008 um 17:49

Aber damit Ecken entstehen, müssen diese ja transparent sein?

Ich habe die Grössen der oben genannten Seite übernommen…

neuroleptika · 18. Juli 2008 um 18:37

Die Grafiken in aus dem oben genannten Beispiel enthalten keine Transparenz.
Wenn Grafiken mit background-image übereinanderschiebst mußt du auf die Reihenfolge achten.
In deinem Beispiel ist bis auf die kleinen Eckchen alles orange. Also reicht eine Orange Grafik mit einer Ecke. Die anderen Grafiken brauchen nur die jeweilige Ecke enthalten:
Runde Ecken
Am besten du übst erstmal mit Grafiken die komplett andere Farben haben.
Dann kannst du sofort sehen wie die Grafiken übereinanderliegen.
So habe ich das auch gelernt.

Mario348 · 18. Juli 2008 um 19:07

Aber die Ecken müssen doch transparent sein?! Wenn alles orange wäre, hätte ich ja einfach alles orange Quader…

Zudem habe ich ja den Code aus dem Beispiel kopiert, also ist ja auch die Reihenfolge identisch…

Maxi · 18. Juli 2008 um 19:10

Warum transparent, du kannst dem, was nicht orange sein soll ja auch einfach ne andere Farbe geben, die, die der Hintergrund der Seite eben hat.

neuroleptika · 18. Juli 2008 um 19:27

Es ist eine Menge css und nicht besonders schönes html.
Wenn ich die Grafiken erstelle sehe ich das grobe Ergebnis schon im Grafikprogramm. Dieses mit border, background-color und etlichen position:absolute nachzubauen macht bestimmt sehr viel Arbeit.
Und das alles nur für runde Ecken?

So wichtig sind sie mir dann auch nicht.

@mario
Hast du dir die Grafiken aus meinem Beispiel überhaupt angesehen?

system · 18. Juli 2008 um 20:22

So gesehen könnte ich dann auch proprietäre CSS-Eigenschaften für runde Ecken nehmen und die Browser, die das nicht können, einfach vernachlässigen. Es geht ja kein Deut Nutzbarkeit verloren. Und spätestens, wenn die runden Ecken mit CSS3 Einzug halten, werden sie auch benutzt und jeder wird sagen „Dein Browser kann halt kein CSS3, da musst Du Dich mit eckigen Ecken zufrieden geben!“

neuroleptika · 18. Juli 2008 um 20:48

Die Ecken mit border-radius (css3) können Mozilla-proprietär quasi schon genutzt werden (moz-border-radius). Der Vergleich hingt aber ein wenig.
Wer das Laden von Grafiken deaktiviert, tut dies meist bewusst und hat seine Gründe. Er wird auf ein grafisch aufgearbeitet Design keinen Wert legen.
Mit background-image kann ich für die meisten Besucher ein ansprechendes Design erstellen. Übrig bleiben hauptsächlich die, die keinen Wert darauf legen.
Gut lesbar sollen die Seiten natürlich auch ohne Hintergrundbildern sein.

Die Beispiele auf der Seite haben eine riesen css-Aufwand für einen recht kleinen Effekt.

Ich wollte nicht falsch verstanden werden.
Mich beeindrucken diese Beispiele wirklich. Ich wollte nur newlords Frage beantworten warum ich Grafiken verwende.

Mario348 · 19. Juli 2008 um 15:44

Also, ich habe nun die Transparenz der Ecken durch meine Hintergrundfarbe ersetzt. Das ergebnis stellt mich jedoch immer noch nicht zufrieden…