zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden runde ecken - anzeige fehler

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2008, 16:27
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard runde ecken - anzeige fehler

Hi,
ich arbeite gerade an nem layout und steh vor nem Problem:
ich hab teaserboxen, die runde ecken bekommen sollen.
Die rechte Ecke wird der Teaserbox selbst zugewiesen und die linke der h2.
sieht am ende so aus:
Code:
<div id="main">
        <div id="teaser-left">
            <h2>Lorem ipsum</h2>
            <p>dolor sit amet, consectetuer adipiscing elit. Fusce tempus pellentesque est. Vivamus suscipit luctus libero. Donec faucibus erat in massa varius hendrerit. Proin at sapien. Quisque arcu dolor, posuere sit amet, lacinia id, convallis sed, pede. Phasellus nisi. Nunc dui. Aliquam odio risus, euismod nec, tincidunt sit amet, molestie a, lorem. Integer risus libero, dapibus faucibus, porttitor eget, pulvinar et, magna. Praesent iaculis. Aenean imperdiet risus ut nisl. Curabitur ullamcorper ligula faucibus purus. Proin ac mi. Morbi aliquam est et ipsum. In congue tellus non lorem. Fusce gravida. Pellentesque urna diam, bibendum nec, dictum et, sagittis vitae, diam. 
            </p>
        </div>
        <div id="teaser-middle">
            <h2>Lorem ipsum</h2>
            <p>dolor sit amet, consectetuer adipiscing elit. Fusce tempus pellentesque est. Vivamus suscipit luctus libero. Donec faucibus erat in massa varius hendrerit. Proin at sapien. Quisque arcu dolor, posuere sit amet, lacinia id, convallis sed, pede. Phasellus nisi. Nunc dui. Aliquam odio risus, euismod nec, tincidunt sit amet, molestie a, lorem. Integer risus libero, dapibus faucibus, porttitor eget, pulvinar et, magna. Praesent iaculis. Aenean imperdiet risus ut nisl. Curabitur ullamcorper ligula faucibus purus. Proin ac mi. Morbi aliquam est et ipsum. In congue tellus non lorem. Fusce gravida. Pellentesque urna diam, bibendum nec, dictum et, sagittis vitae, diam. 
            </p>
        </div>
        <div id="teaser-right">
            <h2>Lorem ipsum</h2>
            <p>dolor sit amet, consectetuer adipiscing elit. Fusce tempus pellentesque est. Vivamus suscipit luctus libero. Donec faucibus erat in massa varius hendrerit. Proin at sapien. Quisque arcu dolor, posuere sit amet, lacinia id, convallis sed, pede. Phasellus nisi. Nunc dui. Aliquam odio risus, euismod nec, tincidunt sit amet, molestie a, lorem. Integer risus libero, dapibus faucibus, porttitor eget, pulvinar et, magna. Praesent iaculis. Aenean imperdiet risus ut nisl. Curabitur ullamcorper ligula faucibus purus. Proin ac mi. Morbi aliquam est et ipsum. In congue tellus non lorem. Fusce gravida. Pellentesque urna diam, bibendum nec, dictum et, sagittis vitae, diam. 
            </p>
        </div>
    </div>
der CSS Code:
Code:
div#main {
    width:100%;
    float:left;
    clear:both;
}

div#main div#teaser-left {
    width:30%;
    float:left;
    margin: 0 2px;
    background:#c3bb1f url(teaser-left-corner-right.png) top right no-repeat;
}

div#main div#teaser-left h2 {
    background:#c3bb1f url(teaser-left-corner-left.png) top left no-repeat;
}
div#main div#teaser-middle {
    width:30%;
    float:left;
    padding: 5px 10px;
}
Das Beispiel könt ihr hier sehen. Da wird allerdings nur die linke ecke angezeigt. die rechte wird überdeckt
wenn man das BG für h2 weglässt wird die rechte allerdings korrekt angezeigt:
Kanedo CMS

ich bin planlos...
__________________
Meine Spielwiese: http://blog.kanedo.net
Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt
Für open Source Liebhaber: open Com

Auch ich Zwitschere als @kanedo
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2008, 21:00
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,
ich hab mal mit Firebug für div#main div#teaser-left h2 noch
margin-right:0.5em; zugefügt, dann waren beide Ecken zu sehen.
Die rechte sah aber nicht so schön aus.

Meine Erfahrung mit runden Ecken ist:
Erstmal alle margins/paddings der beteiligten Elemente auf null setzen und dann vorsichtig ein bißchen mit margin/padding für die Elemente experimentieren.

Irgendwann hab ichs dann.

Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
IE - runde Ecken mit Transparenz ohne Grafiken? freshUser CSS 19 17.03.2011 21:55
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Runde Ecken mit Hintergrund Phil2812 CSS 0 04.09.2010 18:14
Runde Box (bzw. runde Ecken) l2107 CSS 3 08.02.2004 04:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:58 Uhr.