CSS: Zwei Div-Container gleich lang?

hawkeye78 · 12. Mai 2008

Hallo zusammen,

ich stehe schon seit ein paar Tagen vor dem Problem das ich gerne auf einer Seite zwei Div Container gleich lang hätte, aber im moment scheitere ich recht erfolgreich an diesem Problem.

Mein erster Entwurf schaut im moment so[1] aus (ja ich weiß das die Farben grausam sind ). Nun hätte ich aber ganz gerne den grünen div-Container genauso lang wie den organen. Meine dazu passende CSS datei schaut im moment so aus


body

{

	background: #662c2c;

/*	background: #662c2c url(./line.gif) repeat-y 50% 0;*/

}


#main

{

	width: 700px;

/*	margin-left: auto;

	margin-right: auto;*/

	border-right: 1px #999 solid;

	margin: 10px auto 10px auto;


}


#header

{

	background-color: #FF0000; /*fff7da*/

	margin:0 auto;

	text-indent: 20px;

}


#navi

{

	width: 200px;

	float: right;

	background-color: #00FF00; /*fff7da*/

}


#content

{

	background-color: #FF8000; /*fff7da*/

	width: 500px;

	float: left;

}


#footer

{

	background-color: #FFFF00; /*fff7da*/

	text-indent: 20px;

	clear: both;

}

Nun habe ich bereits gestern Nacht ein bißchen mit faux coloums herumprobiert (siehe auskommentierte Zeile im body-Abschnitt) allerdings führte das dazu das die Linie deutlich länger war als der ganze Abschnitt, was auch nicht so wirklich im Sinne des Erfinders ist.

Ich muß leider zugeben das was so etwas betrifft ich blutiger Anfänger bin und darum über jeden Tipp der mir weiterhilft extrem dankbar wäre.

Viele Grüsse

Dan

[1] ImageShack - Hosting :: bildschirmfoto1ub6.png

thomas0 · 12. Mai 2008

Bin mir da gerad nicht sooo sicher, aber was ist wenn du ein min-height in den container packst?

geloescht_JesterDay · 12. Mai 2008

Ein Div is immer so hoch wie der Inhalt, oder wie die angegebene Höhe. 100% bezieht sich dabei auf das Parent Element. Der Body selbst ist aber ein Parentelement ohne Höhe. Es gibt zwar den Hack mit HTML und Body Height 100%, aber der hat andere nachteile (beim Scrollen etc).

Was du machen kannst:

Einen Container um beide Divs und dann die Divs height 100%. Dann sollten beide eigentlich so hoch sein wie der Container außenrum. Und der höchste bestimmt jeweils die Höhe.

Ach ja, hab mit dein CSS jetzt nicht angesehen Aber falls du mit Floats oder Position arbeitest, dann denke daran, dass das jeweils eigene Ebenen sind.

Nachtrag:

Das was du vorhast geht. Ich weiß das weil ich eine Seite die genauso aussieht selbst schon gemacht hab. Leider bei meinem alten AG und die Seite selbst ist noch in der alten Version (mit Tabellen wegen genau dem Problem). Aber ich hatte einen Skin gemacht der das nur mit CSS erreicht hat.

Falls du größere Probleme hast kann ich mal versuchen das zu bekommen. Aber mach dir da nicht so viel Hoffnung, das war eine Entwicklung von mir die aber nur auf dem Entwicklungsserver lief und nie wirklich online ging oder so (Never change a running system). Weiß nicht ob es das noch gibt.

Bearbeitet 12. Mai 2008 von JesterDay

hawkeye78 · 12. Mai 2008

Hallo JesterDay,

erst einmal vielen Dank für deine Antwort, das Grundgerüst der Seite schaut im moment so aus:


<html>

	<head>

		<link rel="stylesheet" type="text/css" media="screen" href="./stylesheet.css">

		<title>Test-Page</title>

	</head>

	<body>

		<div id="main">

			<div id="header">Kopfzeile</div>

			<div id="navi">

				<br>

				<a class="link" href="http://www.google.de">google</a>

				<a class="link" href="http://www.google.de">google</a>

			</div>

			<div id="content">

				<div class="entry">

					blabla blabla blabla					

				</div>

			</div>

			<div id="footer">Fusszeile</div>

		</div>

	</body>

</html>

Ich habe darauf hin den Tag für "main" um den Eintrag "height: 100%" erweitert aber leidet tut sich da nix

Viele Grüsse

Dan

geloescht_JesterDay · 13. Mai 2008

Ich habe darauf hin den Tag für "main" um den Eintrag "height: 100%" erweitert aber leidet tut sich da nix

Wie angesprochen verwendest du floats. Floats sind nicht im selben Textfluß wie Nichtfloats. außerdem habe ich auch nicht die id main gemeint Ich meinte, dass die Inhalte in main so hoch sind wie main. Daher sollten die 100% bekommen.

Das wird aber wegen den floats nicht einfach so funktionieren.

Ich glaube das war damals eher ein Trick bei mir und zwar so, dass ich nicht wirklich die Navigation in der Höhe angepasst habe, sondern mit einem Container drumrum es so aussehen hab lassen wie wenn die Navi genausohoch wäre. (In deinem Fall also einen grünen Hintergrund um Content und Navi. (Ganz so einfach war es aber AFAIR nicht)

Desweiteren solltest du einen DTD in dein HTML aufnehmen. Sonst wird das nichts mit CSS. Ohne DTD ist der Browser immer im Quirks-Mode und rendert sonst was.

Nachtrag:

Du kannst dir allerdings ein funktionierendes Beispiel hier basteln:

http://builder.yaml.de/

Entweder verwendest du das dann einfach, oder du analysierst den Quelltext da und baust deinen um

Bearbeitet 13. Mai 2008 von JesterDay

Guybrush Threepwood · 14. Mai 2008

Mach aus den 4 Divs eine Tabelle wo die Kopf und Fusszeile jeweils colspan="2" gesetzt hat und die mittlere Zeile zwei Spalten hat. Dann passts und ist auch immer gleich lang.

geloescht_JesterDay · 14. Mai 2008

Mach aus den 4 Divs eine Tabelle wo die Kopf und Fusszeile jeweils colspan="2" gesetzt hat und die mittlere Zeile zwei Spalten hat. Dann passts und ist auch immer gleich lang.

Öm... :rolleyes:

Als Lehrer würde ich jetzt sagen: "Thema verfehlt. Setzen, 6."

Guybrush Threepwood · 14. Mai 2008

Joa wir wissen ja bestimmt beide wie weit die Erfahrung von Lehreren bei sowas meistens reicht

Aber man kann sich natürlich auch einen abbrechen eine Tabelle mit Divs und Css nachzubauen und dabei die ganzen unerwünschten Randeffekte zu umgehen :rolleyes:

geloescht_JesterDay · 14. Mai 2008

Joa wir wissen ja bestimmt beide wie weit die Erfahrung von Lehreren bei sowas meistens reicht

In dem Fall würde ich dem Lehrer aber zugutehalten dass da nicht was nach dem Motto "Das haben wir schon immer so gemacht" kam

Es geht nicht darum eine Tabelle nachzubauen. Denn eine Tabelle ist etwas ganz anderes und nicht dazu da um Inhalte zu layouten. Aber stimmt, haben wir ja schon immer so gemacht
Dass es "recht einfach" geht zeigt ja YAML. Ich hatte das wie gesagt auch schonmal gemacht, vor YAML. Die unerwünschten Randeffekte kommen eher von der Tabellenkonditionierung. Denn eigentlich sind sie keine Randeffekte.
Aber das ist wirklich schon sehr OT jetzt.

Guybrush Threepwood · 14. Mai 2008

Gibts außer Polemik eigentlich auch ein sinnvolles Argument dazu?

Ich hab schon mehr als genug Webseiten erstellt um entscheiden zu können wofür ich tables und wofür ich divs nehme. Das hat nichts mit der von dir in jedem Thread dazu beschriebenen "Machen alle so muss ich nicht selber Nachdenken" Mentalität zu tun, was nämlich irgendwie viel mehr zu dem "nie Tabellen zum Layouten nehmen" Geschrei vieler passt.

Aber um mal zum direkten Thema zurückzukommen. Das was auf dem Screenshot im ersten Thread zu sehen ist ist ganz klar eine Tabelle. Es hat ne Kopfzeile, eine Datenreihe mit zwei Spalten und eine Fusszeile. Wenn das keine Tabelle ist was dann?

Natürlich kann man das mit divs machen wie es der Threadersteller probiert hat und auch so das es funktioniert und gut aussieht wenn man die entsprechenden Styles verwendet. Mit einer Tabelle muss man das aber gar nicht erst weil es direkt von Haus aus schon so funktioniert wie gewollt.

Nämlich so das der Kopf immer über beiden Spalten ist, beide Spalten gleich lang sind und der Fuss unter beiden Spalten ist. Egal wie ich das Fenster vergrößere oder verkleinere.

PS: Ich finde schon das es ein unerwünschter Nebeneffekt ist wenn die Divs aufeinamal untereinander statt nebeneinander stehen wenn man die Fenstergröße ändert, oder der Inhalt sich aus dem Div herausverschiebt oder Divs sich ineinander verschieben, aber da bin ich wohl zu pingelig...

geloescht_JesterDay · 14. Mai 2008

Aber um mal zum direkten Thema zurückzukommen. Das was auf dem Screenshot im ersten Thread zu sehen ist ist ganz klar eine Tabelle. Es hat ne Kopfzeile, eine Datenreihe mit zwei Spalten und eine Fusszeile. Wenn das keine Tabelle ist was dann?

Nein, das ist keine Tabelle. Eine Tabelle beinhaltet tabellarische Daten, und ist kein Layout-Element.

Bearbeitet 14. Mai 2008 von JesterDay

Guybrush Threepwood · 14. Mai 2008

denn deine beschriebenen Effekte treten so nicht zwangsläufig auf, wenn man CSS anstelle von Layouttabellen benutzt. Du stellst das aber so hin als seien das zwangsläufig Seiteneffekte von CSS.

Nein wie ich oben schon geschrieben habe kann man das natürlich mit divs machen und auch so das das gut funktioniert. Man muss aber dabei aufpassen das solche Nebeneffekte wie die die ich genannt habe nicht auftauchen.

Das Endergebnis bleibt aber das Selbe. Eine Kopfzeile, eine Reihe mit zwei Spalten und eine Fusszeile. Egal ob man das jetzt mit ner Reihe Divs und lauter Css Styles gemacht hat oder einfach mit einer Tabelle.

Aber da es wie bei eigentlich allen fundamentalistisch Geführten Diskussion:

...Man kann immer irgendwelche gestellten Gegenargumente finden...
...Aber das ändert nichts daran, dass CSS Layouts gewollt (im Gegensatz zum Tabellenlayouts) und quasi State-of-the-Art sind...
...Layouttabellen gibt es offiziell gar nicht...

recht wenig Sinn macht da weiter rum zu diskutieren belassen wirs wohl besser dabei.

geloescht_JesterDay · 15. Mai 2008

Das Endergebnis bleibt aber das Selbe. Eine Kopfzeile, eine Reihe mit zwei Spalten und eine Fusszeile. Egal ob man das jetzt mit ner Reihe Divs und lauter Css Styles gemacht hat oder einfach mit einer Tabelle.

Optisch gesehen ja, semantisch gesehen nein.

Aiun · 15. Mai 2008

sagt mal, muss das sein das jeder der Hilfe bei einem Layout oder einer Webstruktur braucht in seinem Thema die gleiche immer wiederkehrende Diskussion geliefert bekommt ?

Da kommen vermutlich leute irgendwann nicht wieder, weil es hilft nicht.

Wenn jemand eine CSS Lösung für ihn hat, posten, eine Lösung mit einer Tabelle ist auch schon angesprochen, aber diskutiert doch nicht "schon wieder", denn hilf keinem. Und mitlerweile sind die gleichen Argumente wohl in 30 Beiträgen wieder und wieder und wieder im Forum, solange bis niemand mehr die eigentliche Frage findet und qualifizierte Antworten aus dem Thema herauspicken kann.

geloescht_JesterDay · 15. Mai 2008

Wenn jemand eine CSS Lösung für ihn hat, posten...

Siehe Link oben.

Anmelden

CSS: Zwei Div-Container gleich lang?

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte