[CSS] Runde Ecken; alternativ Lösung?

dersven · 07.03.06

Hallo..

» ich habe ein Layout gestaltet und setze es nun in CSS/HTML um. Folgende Kombination aus <DIVS> und CSS Klassen habe ich runde Ecken mit Bildern realisiert:
HTML:

Code:

         <div class="ro"> 
               <div class="lo">
                    <div class="ru"> 
                         <div class="lu">
                              <div class="inhalt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br>
					</div>
     				</div>
     			</div> 
     		</div>
     	</div>

CSS dazu:

Code:

.ro {
background:url(img/karte_rechtsoben.gif) top right no-repeat;
}

.lo {
background:url(img/karte_linksoben.gif) top left no-repeat;
}

.ru {
background:url(img/karte_rechtsunten.gif) bottom right no-repeat;
}

.lu {
background:url(img/karte_linksunten.gif) bottom left no-repeat;
}

.inhalt{
padding: 15px;
width: 390px;
}

// ist frei skalierbar, und muss es eigentlich nur nach unten weiterlaufen können. / mit einem einfarbigen Hintergrund auch super realisierbar , doch:

» Ich habe nun aber vorgesehen das im <BODY>-Tag eine Hintergrundgrafik (ein Verlauf von weiss (oben) zu grau (unten) horizontal wiederholt wird und nach unten hin in eine feste Farbe läuft. // sieht auch super aus und klappt wunderbar..

Code:

body { 
margin: 0; 
padding: 0;
background-color: #DDE1E3; 
background-image: url("img/bg_verlauf.png"); 
background-repeat: repeat-x; 
}

» Folgendes Problem nun aber: Für mein CSS habe ich transparente Gifs für die runden Ecken gebaut. Dies kollidiert nun ja mit dem CSS-Prinzip weil durch die überlagernden Divs sind eigentlich nur einfache bilder vorgesehn, damit das mit dem überlappen auch klappt.

dazu suche ich nun einen Tipp, eine alternative Lösung.. oder einen anderen ansatz. freue mich auf posts

grusz Sven

stk · 07.03.06

Moin,

Wenn Du eh mit einer fixen Breite arbeitest brauchst ja keine <div>s die horizontal mitwachsen. Für Standardkonforme Browser machst

Code:

<div class="rundeEckenBox">Lorem Ipsum … </div>

und im CSS

Code:

.rundeEckenBox {
width: 390px
padding: 10px;
background: #f90;
}
.rundeEckenBox:before {
background: url(oberekante.gif) no-repeat top left;
height: 20px;
}
.rundeEckenBox:after {
background: url(unterekante.gif) no-repeat bottom left;
height: 20px;
}

wobei die beiden Bilder dann 20 x 390 px groß sind, die Hintergrundfarbe des <div>s aufnehmen und die runden Ecken rechts und links bereits enthalten.

Macht auch 'nen schlanken Fuß. Für IE-Kompatibilität mußt ein etwas andere Konstrukt wählen, da dieser mit den Pseudoklassen :before und :after nix anfangen kann.

Alternativ kannst auch CSS3 abwarten - da werden Eckenrundungen in der Definition voraussichtlich enthalten sein: http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius

Gruß Stefan

svn · 08.03.06

gibts schon, [SIZE=-1]-moz-border-radius
leider kanns mal wieder der ie nicht, persönlich is mir das egal aber 50% nutzen ihn ja leider
[/SIZE]

duderino · 08.03.06

Wie siehts mit der Kompatibilität zu anderen Browsern aus? Gehen die Runden Ecken auch mit Safari, Netscape, Opera, etc.?

dersven · 08.03.06

also in meiner version laufen die runden ecken in den gängigen browsern.

die idee mit -moz-border-radius werde ich mal testen, eigentlich sieht mein layout noch kleine graue schattenränder um die box mit runden ecken drumrum vor.

svn · 08.03.06

bis jetzt hab ich FF & Safari & IE mit moz... getestet.
Und wie erwartet konnten es FF & SF nur der IE nicht... wobei ich mich langsam echt frage was er überhaupt kann...

dersven · 08.03.06

hmm. bei mir funktioniert es wohl mit moz; aber das ist von mir letzendlich layouttechnisch nicht gewollt.. ich muss mir mal was mit 3 divs ausdenken, 1. oben, 2. in der mitte was sich veertikal wiederholt, und das 3. unten.. alle mit fester breite.

.nur wie kriege ich meinen content dadrin positioniert..

dersven · 08.03.06

so. neuer versuch

Hallo..

folgendes habe ich nun geschrieben. Es sieht auch schonmal so aus, wie ich wollte.. // das mit der transparenz in png fürs ie ist ne extra sache, wegen dem verlauf im body. *hintergrund-png //, aber jetzt gehts mir um mein 4.tes div.

Folgendes Schema:

1. Div ist mein Kopfbild, feste höhe, und ein png bild oben ausgerichtet.
2. div darunter feste breite, wie bei den anderen divs auch, mit einem hintergundbild das vertikal wiederholt wird.
3. div ist mein fussbild, feste höhe und ein png unten ausgerichtet..

das 4. div ist mein inhalts-container.. da steht der text drin.

html-code:

Code:

<div class="karteoben"></div>
      <div class="kartemitte">
         <div class="inhalt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat</div>
	   </div>
	<div class="karteunten"></div>

css-code:

Code:

.karteoben  { 
background: url("img/karte_oben.png") no-repeat 50% top;
width: 419px;
height: 25px;
 }

.kartemitte   { 
background-color: transparent; 
background-image: url("img/karte_mitte.png"); 
background-repeat: repeat-y; 
background-attachment: scroll;
width: 419px;
 }

.karteunten  { background: url("img/karte_unten.png") no-repeat 50% bottom;
height: 42px;
width: 419px;
 }

.inhalt{
padding: 15px;
z-index: auto;
width: 390px;
}

nun möchte ich mein 4 div nach oben verschieben, damit der text weiter höher anfängt. dies ist momentan nicht so, da das vierte div im 2. div liegt.
nur wenn ich das mit einem neg.-margin (-25px z.B. nach oben verschiebe, verdeckt das 2. div den ersten.

gibt es da ne verschachtelungs lösung.. oder wie muss ich das mit z-index anstellen?
grusz Sven.

stk · 08.03.06

Moin,

spar dir das 4. div und richte den Inhalt darin mit padding passend aus. Wenn Du allen divs nochmal explizit margin:0 mitgibst sollte sich der Inhalt nach oben bewegen.

Gruß Stefan

dersven · 08.03.06

danke..
ja.. ich habs jetzt sogar mit 1. und 2. hinbekommen. alles prima.
sehr gut.. hoffentlich ist das was für weitere leser hier..

hab mir soviel mühe gemacht

KayHH · 08.03.06

Moin dersven,

gibt's schon: http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken
Ähnlichkeiten sind rein zufällig.

Gruss KayHH

dersven · 08.03.06

naja, nej Kay..hab' zu anfang drauf hingewiesen, das meine Basis das selbe Prinzip ist. Will ja auch nix neues erfinden.

Nur das Schema von 4 Divs, die ineinander verschachtelt sind, geht es nicht mit transparenten gifs/pngs. Das war ja das problem!

...aber jetzt mit 2 divs & fester breite, und nur einem png (mein letzer post), klappt es sehr gut!

Hilarious · 19.03.06

Ich mache das auch schon recht lange so wie dersven es beschrieben hat (sorry, jetzt erst gesehen, sonst hätte ich mich gern schon früher gemeldet). Es ist kein Wunder, wenn man für gleiche Probleme zu ähnlichen Lösungen kommt.

Kaischo · 31.10.08

Hallo Leute,

Ich habe das gleiche Problem mit den Runden Ecken. Ich suche aber vorallem nach einer Lösung bei dem ich hinten dran eine Transparenz haben kann, sprich dass ich hinter meiner Box mit runden Ecken auch ein Foto zum Beispiel haben könnte! Wenn ich die .gif so anlege dass sie Transparenz haben geht das oft nur in der oberen Rechten ecke da in allen anderen jeweils die anderen .gif darunter oder darüber liegen und dann wieder normale ecken entstehen. hat jemand eine IDee ?? Grüße, Kaisch0

Suche

Suche

[CSS] Runde Ecken; alternativ Lösung?

dersven

Fuji

stk

Grünapfel

svn

Prinzenapfel

duderino

Prinzenapfel

dersven

Fuji

svn

Prinzenapfel

dersven

Fuji

dersven

Fuji

stk

Grünapfel

dersven

Fuji

KayHH

Gast

dersven

Fuji

Hilarious

Gelbe Schleswiger Reinette

Kaischo

Becks Apfel (Emstaler Champagner)

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)