zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIVs wollen nicht in Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.02.2012, 07:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2012
Ort: Berlin
Beiträge: 2
Echnotron befindet sich auf einem aufstrebenden Ast
Standard DIVs wollen nicht in Container

Hallo liebe Leser!

Ich habe mich eben in diesem Forum angemeldet, um Hilfe bei einem Problem zu einem Problem erhalten zu dürfen. Vorweg gesagt: ich bin in Sachen CSS noch unerfahren. Das heißt aber nicht, dass ich nicht versucht habe mein Problem selbst zu lösen. Jedoch hat tagelanges herum- und ausprobieren nicht wirklich geholfen.

Mein Wunsch ist es, mehrer DIVs nebeneinander darzustellen, um ein tabellenloses Design zu verwirklichen. Die DIVs nebeneinander zu bekommen habe ich realisieren können. Nun möchte ich aber die DIVs in einem großen Container "verpacken", um eine zentrierte Anzeige zu erreichen. Hier hapert es aber. Zwar habe ich den Container zentriert bekommen, jedoch werden die anderes DIVs nicht im, sondern unter dem Container platziert, obwohl die DIVs von <div class="container"> ... weitere DIVs ... </div> umschlossen sind.

Code:
body {
	padding: 0px;
	background-color: #0080c0;
	margin: 0px;
}

.container {
	width: 900px;
	background-color: #FF0000;
	padding: 1px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	text-align: center;
            }

#links {
	background-color: #00FFFF;
	text-align: left;
	height: 250px;
	width: 120px;
	padding: 2px;
	margin: 3px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-decoration: underline;
	font-size: 14px;
	float: left;
}
#inhalt {
	text-align: left;
	width: 500px;
	height: 250px;
	padding: 2px;
	margin: 3px;
	background-color: #00FF66;
	float: left;
}
#rechts {
	text-align: left;
	width: 120px;
	height: 250px;
	padding: 2px;
	margin: 3px;
	background-color: #00FF66;
	float: left;
}
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="container">
			<div id="links">Links</div>
			<div id="inhalt">Inhalt</div>
			<div id="rechts">Recht</div>
	</div>
</body>
</html>
Mit diesem HTML und CSS erhalte ich folgendes Ergebnis:



Auf dem Bild sieht man am oberen Rand einen roten Balken, welcher der Container ist und in diesem die darunter liegenden DIVs sein sollen.

Ich würde mich sehr freuen, wenn mir jemand weiterhelfen könnte.

Viele Grüße!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.02.2012, 07:37
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

Moin,

CSS muss man lernen, man kann es nicht durch probieren verstehen.
Little Boxes hilft dir dabei

Wer floatet muss auch clearen, sag ich jetzt mal.
Ein kleiner Tip noch: Ein Link zum Problem ist immer am besten um dir zu helfen.
Es gibt auch Freehoster (googeln!), wo man das mal hochladen kann.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.02.2012, 08:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2012
Ort: Berlin
Beiträge: 2
Echnotron befindet sich auf einem aufstrebenden Ast
Standard

Hallo hubspe,

natürlich ist es meine Absicht CSS zu erlernen. Nicht nur, aber auch durch, probieren.

Ich habe habe Deinen Rat befolgt und die Dateien hochgeladen.

HTML: HTML
CSS: CSS

Deinen angegebenen Link habe ich besucht, aber irgendwie sehe ich den Wald vor lauter Bäumen nicht mehr Mit Clear habe ich mich auch schon beschäftigt, aber ich scheinbar stehe ich echt auf dem Schlauch ...

Lieber Gruß,

Echnotron
Mit Zitat antworten
  #4 (permalink)  
Alt 22.02.2012, 08:32
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Floates werden aus dem Elementenfluss genommen und können sich so anderes verhalten. Das hat aber auch den Effekt, dass andere Elemente sie nicht mehr sehen. Das steht sicherlich auch in dem von Klaus verlinkten Buch.

Das heißt im Klartext: .container hat keine Höhe, weil keinen Inhalt. Willst du, dass sich .container an die hohe der drei enthaltenen Elemente anpasst, dann musst du ihm entweder eine feste Höhe (>250 Pixel) geben, was aber eine sehr schlechte Lösung ist, oder du clearst den Float. Letztere ist die Alternative, die du bevorzugen solltest. Dazu kannst du einen sogenannten "Clearfix" nutzen. Du musst jedoch trotzdem CSS lernen um es anzuwenden.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 22.02.2012, 08:46
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

Zitat:
Zitat von Echnotron Beitrag anzeigen
Deinen angegebenen Link habe ich besucht, aber irgendwie sehe ich den Wald vor lauter Bäumen nicht mehr Mit Clear habe ich mich auch schon beschäftigt, aber ich scheinbar stehe ich echt auf dem Schlauch ...
das wundert mich nicht wirklich, denn bevor du float/clear verstehen kannst solltest du die Grundbegriffe lernen.
D.h. nicht mal eben bei Little Boxes reinschauen sondern vorne anfangen und ganz durcharbeiten. CSS ist nicht ganz so einfach wie es ausschaut. Wir reden hier von Wochen nicht nur von Tagen!
Little Boxes macht es einem da aber ziemlich leicht, weil man beim Lernen direkt ne Site zusammenbaut.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (22.02.2012 um 08:51 Uhr)
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
Fullscreen Container mit internen divs purewhite (X)HTML 1 02.11.2009 15:24
divs mit position:absolute zentrieren Karas CSS 3 12.09.2009 20:05
Floatende DIVs fallen aus Container raus mimii CSS 3 13.01.2009 11:48
Container geht nicht über alle anderen divs Hurrican CSS 1 10.08.2008 10:12
Zwei DIV's mit float in anderem DIV Container mnitsch CSS 2 09.05.2007 16:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:27 Uhr.