[HTML/CSS] Probleme bei der Positionierung

mh1001 · 19. Februar 2005

Hallo zusammen,

ich bin gerade am Einbau eines neuen Designs auf meiner Homepage. Neben diesen wollte ich auch sogleich einen Umstieg von der tabellarischen Grundstruktur auf eine Positionierung mittels CSS umsteigen.

Dies führte jedoch zu folgendem Problem:
Die Seite verfügt im Content-Bereich über 4 nebeneinander angeordnete DIV-Container, welche auch korrekt dargestellt werden. Jedoch wird Zwecks mangelder Unterstützung im Internet-Explorer das Attribut "min-height" nicht beachtet, woraus eine Verschiebung des Footers in den Content-Bereich resultiert und die rechte Menü-Leiste verschwindet.
Dies wäre jetzt nicht so schlimm, wenn ich nur um dieses Attribut herumkommen würde. Jedoch bin ich selbst nach langem Probieren zu keinem vernünftigem Ergebnis gekommen, ohne dass mindestens einer der Container total deplatziert wurde oder der Footer in den Content-Bereich geriet.

Deswegen bitte ich einmal euch um Hilfe.

Hier noch das Stylesheet und der Link zur Seite: *klick* (Der Content-Bereich ist zur besseren Darstellung des Problems schwarz hervorgehoben)

Vielen Dank im Vorraus

mh1001

mh1001 · 20. Februar 2005

Weiß denn niemand Rat?
Ich habe heute auch nochmals nach Lösungsansetzen gesucht und einiges probiert doch bin ich absolut zu keinem Ergebnis gekommen ohne auf irgendwelche Tabellen oder JavaScript-Varianten zurückzugreifen, welche ich aber nach Möglichkeit vermeinden würde und nur im äußersten Notfall anwenden würde.
Aber dies kann doch nicht sein, dass soetwas extra wegen diesem sich an nahezu keinen Standard haltenden Browser anders nicht möglich ist.

Hier noch einmal der betroffene Quelltext der entsprechenden Datei zur besseren Übersicht:

PHP:

// Die ein oder andere PHP-Funktion....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>RazorBladeGaming - Startseite
<?php include("../daten/#meta.php"); ?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php
include("../daten/#navigation_preload.php");
?>
<link href="../daten/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="navigation">
  <?php include("../navigation/navigation.php"); ?>
  </div>

	<div id="inhalt">
	  <div id="menue_links">
	  <?php include("../menue/menue_information.php"); ?>

	  <?php include("../menue/menue_neuigkeiten.php"); ?>

	  <?php include("../menue/menue_community.php"); ?>

	  <?php include("../menue/menue_media.php"); ?>

	  <?php include("../menue/menue_clan.php"); ?>

	  <?php include("../menue/menue_impressum.php"); ?>
	  </div>

	  <div id="startseite_links">
	  <?php include("../startseite/startseite_links.php"); ?>
	  </div>

	  <div id="startseite_rechts">
	  <?php include("../startseite/startseite_rechts.php"); ?>
	  </div>

	  <div id="menue_rechts">
	  <?php include("../menue/menue_potm.php"); ?>

	  <?php include("../menue/menue_neue_downloads.php"); ?>

	  <?php include("../menue/menue_neue_threads.php"); ?>
	  </div>
	</div>

  <div id="footer">
  <?php include("../footer/footer.php"); ?>
  </div>
</body>
</html>

Ich hoffe es wird jemand eine Möglichkeit dazu einfallen. Ich bin auf jeden Fall für jeden Tipp dankbar.

MfG mh1001

gimmebytes · 21. Februar 2005

Verlager mal den CSS Teil direkt in das Dokument. Könnte helfen.

sverebom · 21. Februar 2005

@merv
Selbst wenn dies funktioniert, ist dies keine anstrebenswerte Lösung, das sie den Vorteil der globalen Seitendefinierung aufhebt.

@mh1001
Ich schnall noch nicht so ganz, was du genau gemacht hast (obwohl du dir mit deiner Beschreibung Mühe gegeben hast). Also, wenn ich das richtig sehe, dann hast du einen Header, der über die ganze Breite der Seite geht und der ja ohne Probleme oben zu positionieren ist. Darunter hast du vier "Spaltencontainer", die, der Reije nach, eine Navi, Werbung, den COntent und noch eine Navi enthalten? Darunter der Footer, der ebenfalls über die gesamte Breite geht., Richtig soweit?

Falls ja, dann würde ich einfach de, ersten Spaltencontainer ein float: left geben. Die anderen drei Container reihen sich dann brav hinter dem ersten Container, sofern genug Platz vorhanden ist. Den Footer setzt du mit einem clear: both einfach drunter und da bleibt er dann auch. Wofür du min-height und die ganzen absoluten Positionierungen brauchst ist mir noch schleierhaft.

mh1001 · 21. Februar 2005

@merv

Ob das Sylesheet nun extern oder intern liegt macht leider keinen Unterschied. Trotzdem vielen Dank für den Tipp.

@BurningStar4

Zuerst einmal auch dir vielen Dank für die Tipps!

Ich schnall noch nicht so ganz, was du genau gemacht hast (obwohl du dir mit deiner Beschreibung Mühe gegeben hast). Also, wenn ich das richtig sehe, dann hast du einen Header, der über die ganze Breite der Seite geht und der ja ohne Probleme oben zu positionieren ist. Darunter hast du vier "Spaltencontainer", die, der Reije nach, eine Navi, Werbung, den COntent und noch eine Navi enthalten? Darunter der Footer, der ebenfalls über die gesamte Breite geht., Richtig soweit? [...]

Ganz genau richtig.

[...] Falls ja, dann würde ich einfach de, ersten Spaltencontainer ein float: left geben. Die anderen drei Container reihen sich dann brav hinter dem ersten Container, sofern genug Platz vorhanden ist. Den Footer setzt du mit einem clear: both einfach drunter und da bleibt er dann auch. [...]

Gesagt getan.

Der zweite Container folgt jetzt auch der Anweisung und ordnet sich in allen gängigen Browsern brav neben dem ersten an.

Allerdings bereitet mir jetzt der Container mit den Neuigkeiten einige Probleme, da in diesem eine Tabelle mit einer relativen Breitenangabe von 100% enthalten ist. Deswegen hatte ich diesen auch bei der vorherigen Positionierung mit den Attributen "padding-left" und "padding-right" entsprechend angepasst.
Doch wie stelle ich dies jetzt am vernünftigsten an? Wenn ich die Angaben entferne rutscht der Container natürlich sofort in die nächste Zeile und erstreckt sich über die gesamte Breite, woraus eine weitere Verschiebung des rechten Containers resultiert. Anderfalls, wenn ich die Attribute da lasse, füllt dieser - in diesem Fall zusammen mit dem angebenen Innenabstand - ebenfalls die gesamte Seitenbreite.
Doch wie passe ich diesen Container jetzt an?

MfG mh1001

sverebom · 21. Februar 2005

ah, das sehe ich ja jetzt erst. Du kannst doch keine Tabellen mit Div-Container mischen du unheilige Kreatur

Außer natürlich, du listest etwas tabellarisch auf (einen Stundenplan oder so). Vor allem bei der Struktur solltest du aber durchweg zu DIV-Container greifen. Und dem Container, der skalieren soll, solltest du eigentlich garkeine Weitenangabe geben müssen. Die Container skalieren nämlich von alleine in der Breite.

By the way, der Content einer Webseite sollte ca. 60% der Fläche einnehmen. Dies ist bei dir sicher nicht der Fall. Irgeneine Spalte (rechte Navi oder Werbespalte) solltest du anders positionieren.

mh1001 · 21. Februar 2005

Gut, dann werde ich unheilige Kreatur mal versuchen dies nachzuholen und mich wieder heilig zu machen.

Nein, zum Thema, dann werde ich wirklich einmal versuchen die gesamte Seite auf ein Layout mit Container umzustellen.
Sollten irgendwelche unerwarteten Probleme auftauchen werde ich mich noch einmal melden.

Bezüglich des recht geringen Content-Bereichs auf der Startseite wurde ich auch schon öfters angesprochen. Aber so wie es aussieht naht ein Sponsor und die Google-Anzeigen werden verschwinden und es wird nur noch ein kleines Werbebanner eingeblendet werden, was einiges an Platz hervorbringen würde.

(Da diese sich an keinen Standard halten haben diese mich sowieso schon immer gestört

)

Auf jeden Fall noch einmal besten Dank!

MfG mh1001

mh1001 · 25. Februar 2005

So, da bin ich wieder.

Nach einigem Überlegen habe ich mich jetzt für ein dreispaltiges Layout auf der Startseite entschieden: *klick*.
Jedoch scheint der Internet-Explorer mich schon wieder ärgern zu wollen.

Im Firefox-Browser wird die Seite jetzt korrekt angezeigt. Der Internet-Explorer verschiebt aber das rechte Menü nach links, so dass dieses direkt am Content-Bereich anliegt. Wie bringe ich diesen jetzt dazu das Menü korrekt zu positionieren? Ich habe schon einiges an den padding- und margin-Einstellungen probiert, doch blieben meine Bemühungen bisher erfolglos.

Hier auch noch einmal der Link zum Stylesheet: *klick*

MfG mh1001

/Edit:

Nach langem Probieren ist es mir nun endlich gelungen eine korrekte Darstellung auch im Internet-Explorer zu ermöglichen.
Noch einmal vielen Dank an alle, die mir geholfen haben oder es versucht haben.

Suche

[HTML/CSS] Probleme bei der Positionierung

mh1001

Lt. Commander

mh1001

Lt. Commander

gimmebytes

Lt. Commander

sverebom

Vice Admiral

mh1001

Lt. Commander

sverebom

Vice Admiral

mh1001

Lt. Commander

mh1001

Lt. Commander

Ähnliche Themen