1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

[CSS] Runde Ecken; alternativ Lösung?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von dersven, 07.03.06.

  1. dersven

    dersven Fuji

    Dabei seit:
    17.05.05
    Beiträge:
    38
    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
     
  2. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  3. svn

    svn Prinzenapfel

    Dabei seit:
    20.01.06
    Beiträge:
    553
    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]
     
  4. duderino

    duderino Goldparmäne

    Dabei seit:
    26.01.06
    Beiträge:
    556
    Wie siehts mit der Kompatibilität zu anderen Browsern aus? Gehen die Runden Ecken auch mit Safari, Netscape, Opera, etc.?
     
  5. dersven

    dersven Fuji

    Dabei seit:
    17.05.05
    Beiträge:
    38
    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.
     
  6. svn

    svn Prinzenapfel

    Dabei seit:
    20.01.06
    Beiträge:
    553
    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...
     
  7. dersven

    dersven Fuji

    Dabei seit:
    17.05.05
    Beiträge:
    38
    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..
     
  8. dersven

    dersven Fuji

    Dabei seit:
    17.05.05
    Beiträge:
    38
    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:
    [​IMG]

    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.
     
  9. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  10. dersven

    dersven Fuji

    Dabei seit:
    17.05.05
    Beiträge:
    38
    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 :)
     
  11. KayHH

    KayHH Gast

  12. dersven

    dersven Fuji

    Dabei seit:
    17.05.05
    Beiträge:
    38
    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!
     
  13. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    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. ;)
     
  14. Kaischo

    Kaischo Becks Apfel (Emstaler Champagner)

    Dabei seit:
    06.01.07
    Beiträge:
    338
    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
     

Diese Seite empfehlen