DIV-Element nimmt nicht größe des Content an

[ToXXiN]

Hallo, ich bin ziemlich am Anfang des Website schreibens, und schon bin ich auf ein Problem gestoßen, dass ich mir nicht erklären kann. Ich habe für meine Website zwei spalten mit float und DIV-Objekten angelegt. Ich wollte beide mit der gleichen Hintergrundfarbe hinterlegen, die aber nicht genau die selbe ist, die die Allgemeine meiner Website (also, content soll leicht grau Hinterlegt sein, Hintergrund vom restlichen Fenster ist weiß).

Mein Code sieht dazu so aus:

HTML:

  
		<div id="content_2">  
		  
		<div id="content">  
			  
			<div id="articles">  
			  
				<h3>Eine einfache Überschrift für einen Artikel</h3>  
				  
				<p>Hier steht irgend ein Text</p>  
			  
			</div>  
			  
			<div id="sidebar">  
			  
				<h4>ToDo: </h4>  
				<ul>  
					<li>1</li>  
					<li>2</li>  
					<li>3</li>  
					<li>4</li>  
				</ul>  
			  
			</div>  
			  
		</div>  
		  
		</div>  

Und das ist die passende CSS:

  
		#content {  
		  
				margin: auto;  
				background-image: url(recources/page_back.gif);  
				background-repeat: repeat;  
				width: 960px;  
				  
				}  
				  
		#content_2 {  
		  
				margin: auto;  
				background-color: #e6e6e6;  
				width: 964px;  
				  
				}  
  
		#articles {  
		  
				float: left;  
				margin-left: 20px;  
				width: 630;  
				text-align: justify;  
				  
				}  
				  
		#sidebar {  
		  
				float: left;  
				margin-left: 30px;  
				width: 260px;  
				  
				}  

So, ich hofe ihr könnt mir helfen, ich weis nämlich nicht mehr weiter. Also, es ist, als ob die beiden boxen, die eigentlich einfarbig sein sollten, einfach keine Höhe haben, obwohl sie eigentlich die Höhe der beiden Elemente (also, immer des höheren) annehmen sollten, oder?

-MfG ToXXiN

[MrMurphy]

Hallo,

aus deinen Quellcodeschnipseln kann niemand deine Seite nachbauen, weil z. B. das Background-Image fehlt. Von Hintergrundfarben ist im CSS-Teil auch nichts zu sehen. Da das Problem häufig in dem weggelassenen Teil liegt machen sich viele Hilfswillige auch gar nicht erst die Mühe aus solchen Quellcodeschnipseln Seiten nachzubauen.

Am sinnvollsten ist es, wenn du deine bisherigen Bemühungen bei einem Freehoster bereitstellen und den Link mitteilen würdest. Dann hätten alle einschließlich dir den gleichen Wissensstand über deine Seite.

So kann man dir nur allgemein antworten.

Dir fehlt offensichtlich ein grundsätzliches Verständnisproblem, da du wohl beim Lernen die Grundlagen von HTML / CSS übersprungen hast. Deshalb wirst du immer wieder auf solche Probleme stossen.

1. Du musst die Grundlagen von HTML / CSS lernen und beherrschen. In deinem Beispiel floatest du zwar fröhlich vor dich hin, das Clearen, das schlicht dazu gehört, hast du aber in der Schublade gelassen.

2. Ohne Grundlagenkenntnisse kann dir nur schwierig geholfen werden, da du die Antworten wahrscheinlich gar nicht verstehst.

3. Das schwierigste überhaupt, damit sind die meisten Webseitenersteller schlicht überfordert und das kann man auch nicht lernen: Webseiten sind ein spezielles Medium. Sie haben keine Begrenzungen, an denen sich die Webseitenersteller entlanghangeln können. Die reine Information steht im Vordergrund.

4. Für dein Problem gibt es keine vorgesehene Lösung.

Das heißt, du must auf Hilfkrücken ausweichen, wie z. B. die "Faux Columns" (googeln hilft).

Einen Spaltensatz wie in Textverarbeitungen gibt es HTML / CSS nicht, da er für das Medium nicht erforderlich ist.

Da wie schon geschrieben viele Webseitenersteller, und noch schlimmer, Webseitendesigner, damit überfordert sind, versuchen sie grade einen Standard dafür durchzusetzen. Für die Leute, die die Webseitenerstellung können, ist das natürlich ein Horror. Im Endeffekt würde das ähnlich nervig werden wie Tabellenlayouts oder nachgebaute Tabellenlayouts mit DIVs.

"...obwohl sie eigentlich die Höhe der beiden Elemente (also, immer des höheren) annehmen sollten, oder?"

Die Aussage ist schlicht verkehrt, keine Ahnung wo du die herhast. Das gilt für Textverarbeitungen, Tabellenzellen und ähnlich begrenzten Medien, aber nicht für Webseiten.

Gruss

MrMurphy

[ToXXiN]

Hi, erstmal Danke, für deine ausführliche Antwort.

aus deinen Quellcodeschnipseln kann niemand deine Seite nachbauen, weil z. B. das Background-Image fehlt. Von Hintergrundfarben ist im CSS-Teil auch nichts zu sehen. Da das Problem häufig in dem weggelassenen Teil liegt machen sich viele Hilfswillige auch gar nicht erst die Mühe aus solchen Quellcodeschnipseln Seiten nachzubauen.

Okay, ich dachte, das gezeigte währe ausreichend. Natürlich stelle ich gerne das ganze Dokument zur verfügung, ich dachte nur, dass noch weniger Leute die Datei herunter laden, als sich die Codesegmente direkt anzusehen. Link zu ZIP-Archiv ist ganz unten von meiner Antwort. Ja, der Grund, dass ich ein Bild als Hintergrund verwende, ist der, dass es mit einer einfachen Farbgebung eben nicht funtkioniert hat, und ich dachte, wenn ich ein Bild nehme, und es auf repeat setze, geht es, tat es aber nicht.

Dir fehlt offensichtlich ein grundsätzliches Verständnisproblem, da du wohl beim Lernen die Grundlagen von HTML / CSS übersprungen hast. Deshalb wirst du immer wieder auf solche Probleme stossen.

Ja, das stimmt, wie gesagt, ich bin noch ziemlich am Anfang und habe mich direkt auf CSS gestürtzt, anscheinend ein Fehler.

1. Du musst die Grundlagen von HTML / CSS lernen und beherrschen. In deinem Beispiel floatest du zwar fröhlich vor dich hin, das Clearen, das schlicht dazu gehört, hast du aber in der Schublade gelassen.

Nicht ganz, Clear kommt später bei meinem Footer zum Einsatz. Den kann man aber in meinem Beispiel nicht sehen, im Archiv, also im vollständigen code, ist clear durchaus vorhanden.

3. Das schwierigste überhaupt, damit sind die meisten Webseitenersteller schlicht überfordert und das kann man auch nicht lernen: Webseiten sind ein spezielles Medium. Sie haben keine Begrenzungen, an denen sich die Webseitenersteller entlanghangeln können. Die reine Information steht im Vordergrund.

Du hast recht, das verstehe ich nicht. Klar, es gibt sozusagen unendlich Platz auf einer Website, aber ich kann mir ja einen Auschnitt schaffen, indem ich in z.B. mit DIV-Elementen festlege, oder? Sry, aber ich bin eher Grafiker, von daher ;)

4. Für dein Problem gibt es keine vorgesehene Lösung.

Das heißt, du must auf Hilfkrücken ausweichen, wie z. B. die "Faux Columns" (googeln hilft).

Werde ich gleich googlen. Das komische ist ja, auf einer Testseite vorher hat es genau so funktioniert, wie ich wollte. Obwohl ich (soweit ich das sehen kann) nichts anders gemacht habe.

Einen Spaltensatz wie in Textverarbeitungen gibt es HTML / CSS nicht, da er für das Medium nicht erforderlich ist.

Da wie schon geschrieben viele Webseitenersteller, und noch schlimmer, Webseitendesigner, damit überfordert sind, versuchen sie grade einen Standard dafür durchzusetzen. Für die Leute, die die Webseitenerstellung können, ist das natürlich ein Horror. Im Endeffekt würde das ähnlich nervig werden wie Tabellenlayouts oder nachgebaute Tabellenlayouts mit DIVs.

"...obwohl sie eigentlich die Höhe der beiden Elemente (also, immer des höheren) annehmen sollten, oder?"

Die Aussage ist schlicht verkehrt, keine Ahnung wo du die herhast. Das gilt für Textverarbeitungen, Tabellenzellen und ähnlich begrenzten Medien, aber nicht für Webseiten.

Wie gesagt, ich hatte in einem DIV-Element, das eine Hintergrundfarbe hatte, ein Weiters DIV-Element, welches Text beinhaltete, aber keine Hintergrundfarbe. Je nach dem, wie lang der Text war, war auch der Hintergrund des ersten Elements entsprechend groß. Somit habe ich eben den Umkehrschluss gezogen, dass Div-Elemente ohne feste Höhe, so hoch sind, wie ihr Inhalt.

Gruss

MrMurphy

Ich freue mich schon auf deine nächste Antwort. Hier ist der Link zur Zip-Datei:

https://www.dropbox.com/s/sdf4cj2lv8ektxe/JurassicParkWebsite.zip

Es kann gut sein, dass alles sehr amateurmäßig geschrieben wurde, und wahrscheinlich denkst du, wieder so ein Trottel, der meint, er könnte Websiten schreiben. Aber, ich will es wirklich lernen, ich gebe mir auch Mühe. Versprochen ;)

-MfG

[Klawischnigg]

Hi there,

Du hast recht, das verstehe ich nicht. Klar, es gibt sozusagen unendlich Platz auf einer Website, aber ich kann mir ja einen Auschnitt schaffen, indem ich in z.B. mit DIV-Elementen festlege, oder?

Sorry, das ich mich einmische, aber genau hier haben wir das Problem: Natürlich kannst Du Dir einen Ausschnitt schaffen, aber wenn Du verstanden hättest, worum es geht, dann hättest Du auch verstanden, daß genau das keinen Sinn macht. Denn erstens schaffst Du Dir keinen Ausschnitt, sondern dem Betrachter und zweitens, und das ist ein Folge von 'erstens" hast Du absolut keine Ahnung, mit welchem Gerät oder mit welcher Software sich der Betrachter "Deinen" Ausschnitt anschaut.
Zum Abgrenzen von Inhalten machen verschieden *gestaltete*  Abschnitte durchaus Sinn, das aber mit festen Längen oder Grenzen erreichen zu wollen ist schlichtweg Unfug. Wie mein geschätzter Vorposter schon darauf hingewiesen hat: eine Webseite ist kein Plakat oder keine Katalogseite, die man sich einfach auf dem Bildschirm betrachtet. In dem Zusammenhang sei ein Klassiker erwähnt:

Warum können Werbeagenturen keine guten WWW-Seiten schreiben?

[Matthias Apsel]

Om nah hoo pez nyeetz, ToXXiN!

Hallo, ich bin ziemlich am Anfang des Website schreibens,

Dann kannst du dich gleich auf HTML5 und CSS3 (flexbox für deinen gewünschten Anwendungsfall) konzentrieren.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Dann kannst du dich gleich auf HTML5 und CSS3 (flexbox für deinen gewünschten Anwendungsfall) konzentrieren.

Und vor allem auf Responsive Web Design. 'width: 960px' hat auf einer 2013 erstellten Webseite nichts zu suchen.

Viele Nutzer haben ein deutlich schmaleres Browserfenster. Und die vielen werden immer mehr.

Qapla'