|
|||
Runde Ecken! Problem bei der Darstellung
Ich habe mich jetzt mal über das Thema Runde Boxen hinübergestürzt. Dabei habe ich mir das Box-Beispiel von Dan Cederholm's Bulletproof als Vorlage benutzt.
Hierbei werden zwei Grafiken für oben bzw. für unten verwendet. Die Grafik für den Oberen Teil ist etwas dunkler und soll sich eigentlich nur soweit ausdehnen wie das <h3> Element. Die Untere Grafik sollte die Box schließen. Jedoch passen die Runden Ecken leider nicht wirklich. Leider hab ich überhaupt keine Ahnung woran das liegen könnte. XHTML CODE: Code:
<div id="main-body">Main-body <div id="content">Hier werden die Inhaltlich verschiedenen Themen hineinkommen. Hier soll der wichtige Teil stehen. <div class="box2"> <p>Wichtige Themen</p> <p>Hier werden wichtige Themen stehen.</p> </div> </div><!-- end Content --> <div id="sidebar-left"> <div class="box1"> <h3>Menü</h3> <ul> <li><a href="/">Zufahrtsplan</a></li> <li><a href="/">Versteigerung</a></li> </ul> </div><!-- end box1--> </div><!-- end Sidebar-left --> </div><!-- end Main-body --> <div id="sidebar-right"> <div class="box3"> <h3>Onlineshop</h3> <ul> <li><a href="/">Bild1</a></li> <li><a href="/">Bild2</a></li> <li><a href="/">Bild3</a></li> </ul> </div> </div><!-- end Sidebar-right--> Code:
#main-body { float: left; width: 76%; } #content { float: right; width: 68%; text-align: left; } .box2 { width: 100%; } #sidebar-left { float: left; width: 32%; padding: 0 5% 0 5%; text-align: left; } .box1, .box3 { width: 150px; background: url(images/box_unten.gif) no-repeat bottom left; } .box1 h3, .box3 h3 { margin: 0; padding: 6px 8px 4px 10px; font-size 130%; color: #333; background: url(images/box_oben.gif) no-repeat top left; } #sidebar-right { float: right; width: 24%; padding: 15 px 5% 0 5%; text-align: left; } Geändert von SKVler (19.09.2006 um 13:25 Uhr) |
Sponsored Links |
|
|||
dein h3 liegt innerhalb der box.
also wird der hintergrund der box auch hinter der h3 angezeigt. deine eck-grafiken scheinen transparent zu sein, darum siehst du an den ecken der h3 den hintergrund des div... versuch's mal so (mit variabler box-größe): http://aktuell.de.selfhtml.org/artik...cken/index.htm works well for me btw: was is das fürne seite? sieht ja grässlich aus...
__________________
. Bierspiel - mitmachen! Geändert von britneyfreek (20.09.2006 um 05:11 Uhr) |
Sponsored Links |
|
|||
So ich hab mir jetzt das beispiel von Andreas Kalt angesehen und auch nachgemacht, leider komme ich wieder auf das selbe Ergebniss, woran könnte das liegen???
Code:
<div id="main-body">Main-body <div id="content">Hier werden die Inhaltlich verschiedenen Themen hineinkommen. Hier soll der wichtige Teil stehen. <div class="box2"> <p>Wichtige Themen</p> </div> </div><!-- end Content --> <div id="sidebar-left"> <div class="ro"> <div class="lo"> <div class="ru"> <div class="lu"> <div class="inhalt"> <p>Lorem ipst augue duis dolore te feugait nulla facilisi.</p> <p> </p> <p>Li Europan lingues es membres del sam familie. Lor separat existentie </p> </div> </div> </div> </div> </div> </div><!-- end Sidebar-left --> </div><!-- end Main-body --> Code:
#main-body { float: left; width: 76%; } #content { float: right; width: 68%; text-align: left; } .box2 { width: 100%; } #sidebar-left { float: left; width: 32%; padding: 0 5% 0 5%; text-align: left; } .ro { background:url(images/ro.gif) top right no-repeat; margin:0; padding:0; } .lo { background:url(images/lo.gif) top left no-repeat; margin:0; padding:0; } .ru { background:url(images/ru.gif) bottom right no-repeat; margin:0; padding:0; } .lu { background:url(images/lu.gif) bottom left no-repeat; margin:0; padding:0; } .inhalt { padding: 5px; } #sidebar-right { float: right; width: 24%; padding: 15 px 5% 0 5%; text-align: left; } #footer { clear: both; background: #cc9; } </style> </head> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Runde Rahmen (nicht Ecken) für den IE ? | mrpellepelle | CSS | 1 | 11.09.2010 14:06 |
Runde Ecken mit CSS oder Bildern? | Cu Chullain | CSS | 3 | 16.04.2009 19:18 |
css abgerundete Ecken Problem mit Safari | -=ED=- | CSS | 2 | 09.03.2009 16:10 |
runde ecken - anzeige fehler | kampfgnom | CSS | 1 | 22.06.2008 21:00 |
Problem mit abgerundeten Ecken | sky-frog | CSS | 9 | 10.10.2007 16:24 |