zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Runde Ecken! Problem bei der Darstellung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.09.2006, 12:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2006
Beiträge: 16
SKVler befindet sich auf einem aufstrebenden Ast
Frage 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&uuml;</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-->
CSS:

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;
	}
Angehängte Grafiken
Dateityp: jpg runde_ecken.jpg (34,4 KB, 31x aufgerufen)

Geändert von SKVler (19.09.2006 um 13:25 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.09.2006, 05:06
doppel-e is scho recht
neuer user
 
Registriert seit: 04.09.2006
Beiträge: 42
britneyfreek befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2006, 11:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2006
Beiträge: 16
SKVler befindet sich auf einem aufstrebenden Ast
Standard

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>&nbsp;</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>
Noch kurz zum Layout, das sind bis jetzt nur ein paar Spielereien, Farben usw. werden erst bei stehendem Grundgerüst adaptiert.
Angehängte Grafiken
Dateityp: jpg hp.jpg (37,6 KB, 9x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 20.09.2006, 14:50
purist
XHTMLforum-Mitglied
 
Registriert seit: 02.08.2005
Ort: luzern (schweiz)
Beiträge: 294
andip wird schon bald berühmt werden
Standard

kannst du ein live-beispiel ins netz stellen? wie hier schon angerissen wurde könnte ein transparentes gif für die fehldarstellung verantwortlich sein.

gruss maccaroni
Mit Zitat antworten
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:31 Uhr.