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

Box mit runden Ecken und variabler Höhe und Breite

Status
Für weitere Antworten geschlossen.
Mario348

Mario348

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


oben.html

Code: 
<html>
<head>
<body>

<link rel="stylesheet" type="text/css" href="box.css">


<div class="box">
<div id="ecken">

  <img src="image/ol.gif" alt="" class="ol" />
  <img src="image/or.gif" alt="" class="or" />
  <img src="image/ul.gif" alt="" class="ul" />
  <img src="image/ur.gif" alt="" class="ur" />
<div class="header">
<img src="image/bookmark__plus.png" widht="16px" height="16px" alt="Bookmark" align="left">
Titel
</div>
<div class="inhalt">

Text

</div>



</body>
</head>
</html>


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;

}
 
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.
 
Mario348 schrieb:
...
Dann hilft mir das leider nicht weiter.
Zum Vergrößern anklicken....
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: 
<div id="box1">
<h1>
<span>
<span>
Runde Ecken
</span>
</span>
</h1>
<p>
<span>
Lorem Ipsum.
</span>
<a href="#">Ein Link</a>
</p>
</div>
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;
}
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.
 
Zuletzt bearbeitet:
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:

Stu Nicholls | CSSplay | Krazy Korners
Stu Nicholls | CSSplay | More snazzy borders
Stu Nicholls | CSSplay | A snazzy menu

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
 
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?
 
Wieso klappt das nicht?

HTML

Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="box2.css">
</head>
<body>

<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="inhalt">
<p>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</p>
</div>
</div>
</div>
 </div>
</div>

</body>
</html>
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;
}
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
 
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.
 
Aber damit Ecken entstehen, müssen diese ja transparent sein?

Ich habe die Grössen der oben genannten Seite übernommen...
 
Mario348 schrieb:
Aber damit Ecken entstehen, müssen diese ja transparent sein?

Ich habe die Grössen der oben genannten Seite übernommen...
Zum Vergrößern anklicken....
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.
 
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...
 
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.
 
newlord schrieb:
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....
Zum Vergrößern anklicken....
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?
 
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!"
 
Efchen schrieb:
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!"
Zum Vergrößern anklicken....
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.
 
Also, ich habe nun die Transparenz der Ecken durch meine Hintergrundfarbe ersetzt. Das ergebnis stellt mich jedoch immer noch nicht zufrieden...
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben