Problem mit overflow

Frezl · 10. November 2010

Salü allerseits,

ich habe ein Problem mit der CSS-Eigenschaft overflow. Wie man im Beispiel sieht, hat meine Seite einen Header. Dieser soll keine feste Höhe haben, da die Anzahl der Boxen rechts variiert. Sobald ich den Elementen im Header float-Eigenschaften zuweise, schrumpft der Header jedoch zu height:0 zusammen und die nachfolgende Box rutscht nach oben. Das kann ich verhindern, wenn ich ihm die Eigenschaft overflow:hidden gebe. Damit bekomme ich aber wiederum das Problem, dass die Schatten beim Hovern am Rand abgeschnitten werden.

Lösen könnte man das Problem evtl., indem ich dem Header ein Padding gebe und ihn um diesen Wert breiter mache. Das hätte aber Einfluss auf das restliche Layout und würde spätere Änderungen verkomplizieren. Deshalb suche ich einen anderen Weg aus dem Dilemma.

Kann mir dabei jemand helfen?

Hab die entsprechenden Dateien angehängt.

Viele Grüße,
Frezl

P.S.: HTML geht leider nicht in den Anhang, daher gibts den Code hier:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" height="101%">
  <head>
		
    <title>Beispiel</title>
		
		<style type="text/css">
		<!--
		
			/* GENERAL */
			
			* {
				padding:0;
				margin:0; }
				
			body {
				background:#ccf; }
	
			img {
				border:none; }
				
				
			/* CONTAINERS */
				
			#container_site {
				width:900px;
				margin:auto;
				margin-top:30px;
				margin-bottom:30px; }
		
			#container_header {
				/* ==> */ overflow:hidden; /* <== Um diese Formatierung hier gehts! */
				margin-bottom:30px;

				/* DEBUG */ border:1px dashed red; }
				
			#container_content {
				padding:20px;				
				background:#fff; }
				
				
			/* LAYOUT ELEMENTS */
	
			#logo {
				float:left;
				
				background:#fff;
						
				border-width:3px;
				border-style:solid;
				border-color:#000; }
				
			#logo:hover {
				box-shadow:0px 0px 25px f00;
				-moz-box-shadow:0px 0px 25px #f00;
				-webkit-box-shadow:0px 0px 25px f00; }
		
			#logo img {
				height:70px;
				padding:12px 12px 8px 12px; }
				
			#main_menu {
				float:right;
				display:block;
				max-width:650px; }
				
				#main_menu li {
					display:inline;
					float:right; }
					
					#main_menu li a {
						margin-left:10px;
						padding:3px 5px;
						
						background:#fff;
						
						border-width:3px;
						border-style:solid;
						border-color:#000;
						
						font-family:Arial, sans serif;
						font-size:22px;
						font-weight:bold;
						text-decoration:none;
						
						line-height:50px;
						vertical-align:top; }
						
					#main_menu li a:hover {
						box-shadow:0px 0px 25px #f00;
						-moz-box-shadow:0px 0px 25px #f00;
						-webkit-box-shadow:0px 0px 25px #f00; }
		
		//-->
		</style>
		
	</head>
	
	<body margin="0" padding="0">
		<div id="container_site">
		
			<div id="container_header">
				
				<a href="#" id="logo">
					<img src="http://www.openclipart.org/image/800px/svg_to_png/Andy_Tools_Hammer_Spanner.png">
				</a>
				
				<ul id="main_menu">
					<li><a href="#">Dieses</a></li>
					<li><a href="#">Jenes</a></li>
					<li><a href="#">Ein anderes</a></li>
					<li><a href="#">Dieses</a></li>
					<li><a href="#">Jenes</a></li>
					<li><a href="#">Ein anderes</a></li>
					<li><a href="#">Dieses</a></li>
					<li><a href="#">Jenes</a></li>
					<li><a href="#">Ein anderes</a></li>
					<li><a href="#">Dieses</a></li>
					<li><a href="#">Jenes</a></li>
					<li><a href="#">Ein anderes</a></li>
				</ul>
			
			
			</div>
			
			<div id="container_content">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
				<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
				<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
				<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
				<p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
				<p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
				<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
				<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
				<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
				<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
				<p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
				<p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
				<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui.</p>
			</div>
			
		</div>
		
	</body>
</html>

SpiceLab · 10. November 2010

Neben overflow:hidden gibt's mit der clear-Eigenschaft eine weitere Möglichkeit, den Umfluß der Elemente per float-Regeln zu beenden.

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Frezl · 10. November 2010

Hey spicelab,

vielen Dank für den Tipp! Warum hab ich daran blos net gedacht *****?* Das clear war zwar nicht des Rätsels Lösung, hat mich aber auf die Idee gebracht, alle Boxen floaten zu lassen. Siehe da, es klappt

Viele Grüße,
Frezl

Frezl · 11. November 2010

Hab noch ne Frage:

wenn ich einen div mit id definiert hab, z.B.:

HTML:

<div id="foo">Inhalt</div>

,
wo liegt dann der Unterschied, ob ich ihn mit

CSS:

#foo { ... }

oder mit

CSS:

div#foo { ... }

anspreche?

Einen Unterschied gibt es auf jeden Fall, das hab ich sowohl in FF, als auch in Safari schon festgestellt.

Viele Grüße,
Fred

SpiceLab · 11. November 2010

Deine neu aufgekommene Frage hat mit dem längst gelösten Ausgangsproblem im Themenbetreff aber herzlich wenig gemeinsam, und ein eigenes Thema verdient.

Frezl hat gesagt.:
Einen Unterschied gibt es auf jeden Fall, das hab ich sowohl in FF, als auch in Safari schon festgestellt.

Der da wäre?

Die Formatierung unmittelbar / ausschließlich auf dieses <div>-Element bezogen, ergeben die beiden Schreibweisen im CSS keinen Unterschied.

Die Tatsache außen vor gelassen, dass grundsätzlich ID-Bezeichner im XHTML-Doc einmalig vorkommen dürfen, mit dem Selektor #foo besteht bei jedem HTML-Elementtyp, der diesen ID-Bezeichner trägt, eine Übereinstimmung, also <h1 id="foo">, <table id="foo">; mit div#foo hingegen ausschließlich beim <div>-Element.

Frezl · 11. November 2010

Wenn wir ehrlich sind, hatte letztendlich nicht mal das gelöste Anfangsproblem mit dem Themenbetreff zu tun ;-) Vielen Dank, dass du mir trotzdem hilfst!

Im vorliegenden Fall handelt es sich um ein einzelnes Listenelement, das ich über die ID anspreche. Wenn ich li#dingsbums angebe, floatet das element wie gewünscht nach links. Wenn ich nur #dingsbums angebe, bleibt es rechts stehen. Dass es rechts steht hängt damit zusammen, dass die Elemente dieser Liste allgemein auf float:right gestellt sind.

Ich habe die ID auf der Seite nur ein einziges Mal verwendet, daran dürfte es also nicht liegen

Eigentlich war ich auch der Meinung, dass es keinen Unterschied macht und es sich mit den Bezeichnern so verhält, wie dus beschrieben hast. Aber in diesem Fall ist das unterschiedliche Ergebnis leider offensichtlich

Viele Grüße,
Frezl

SpiceLab · 11. November 2010

Sorry, nach Diskussionen mit der Goldwaage ist mir hier nicht, und was du letztlich alternativ zu meiner praxisüblichen Empfehlung für dich als Lösung für dein "Problem mit overflow" entdeckt hast, spielt die untergeordnete Nebenrolle. Fakt ist unbestreitbar, dass deine heutige nachgereichte Frage nichts mehr mit deinem eingangs geschilderten Problem zu tun hat.

Ich hab dir hier in keinster Weise unterstellt, dass du den ID-Bezeichner "XYZ" mehrfach deklarierst, daher auch meine bewußt gewählte Formulierung zu Satzbeginn "Die Tatsache außen vor gelassen, ..." was einem "unbeachtet" gleichkommt, um lediglich den grundsätzlichen Unterschied und die Auswirkung dieser beiden Schreibweisen zu erläutern, denn worauf sich deine Frage nun im wahren Sinne bezog, ging aus deiner allgemein gehaltenen Formulierung überhaupt nicht hervor. Mit dem konkreten Hintergrund / Sachverhalt bist du ja auch erst jetzt hinterm Ofen hervorgekommen, also gibt's für dich überhaupt keinen Anlaß, mir im letzten Absatz mittels "" zweimal die Zunge zu zeigen! Respekt ist dir wohl ein Fremdwort! Setzen, sechs!

Um zu deiner Frage noch abschließend Stellung zu nehmen: Eine Frage der Kaskade und Spezifität deiner formulierten CSS-Selektoren - fertitsch!

Frezl · 11. November 2010

Ja gut, is halt so eine Sache mit den Emoticons. Der eine interpretiert sie so, der andere anders. Aber so wie du das

interpretierst hab ich das noch nie gesehen. Für mich hat das die Bedeutung von "irgendwie blöd", oder "dumm gelaufen". Wenn ich im echten Leben jemandem böswillig die Zunge rausstreck mach ich das ja auch gradeaus und nicht im Mundwinkel. Naja, falls ich dir zu nahe getreten sein sollte, bitte ich, das zu entschuldigen.

Arbeiten wir morgen weiter an dem Problem, wenn wir beide ausgeschlafen sind... Vielleicht hab ich bis dahin ja auch ne Lösung gefunden.

Gn8,
Frezl

SpiceLab · 11. November 2010

Frezl hat gesagt.:
so wie du das interpretierst hab ich das noch nie gesehen.

Dann überprüf bzw. vergleich mal in der hiesigen Smiley-Liste (http://www.tutorials.de/misc.php?do=getsmilies&editorid=vB_Editor_001) die Syntax für besagtes Smiley

Frezl hat gesagt.:
Naja, falls ich dir zu nahe getreten sein sollte, bitte ich, das zu entschuldigen.

Angenommen

Frezl hat gesagt.:
Arbeiten wir morgen weiter an dem Problem, wenn wir beide ausgeschlafen sind... Vielleicht hab ich bis dahin ja auch ne Lösung gefunden.

Ich bin voll ausgeschlafen ;-)

Und die Lösung hast du doch schon gefunden und hier genannt: den Selektor mit dem vorne angestellten HTML-Element li#foobar formulieren, anstelle von #foobar, was die Spezifität des Selektors erhöht.

Ein weiterer Versuch wäre die Möglichkeit, die !important-Regel zu deklarieren:

CSS:

#foobar { float:left !important; }

Problem mit overflow

Frezl

Erfahrenes Mitglied

Anhänge

SpiceLab

ZENmechanic

Frezl

Erfahrenes Mitglied

Frezl

Erfahrenes Mitglied

SpiceLab

ZENmechanic

Frezl

Erfahrenes Mitglied

SpiceLab

ZENmechanic

Frezl

Erfahrenes Mitglied

SpiceLab

ZENmechanic

Neue Beiträge