Positionierung von Divs

danihue · 05.02.2008, 22:11

Hallo,

ich habe jetzt hier im Forum einige Beiträge durchgelesen, da hier sehr viele Fragen zu einzelnen Divs gestellt werden, aber ich habe die richtige Lösung nicht finden können.

Es geht um folgende Seite http://www.walking.huechtemann.com

Bei der Darstellung im FF wird ein leerer Balken vor dem Footer angezeigt und ich weiß nicht warum.

Bin für Hilfe dankbar

Boris · 05.02.2008, 22:29

Du solltest immer zuerst alle Standardabstände der Elemente auf 0 zurücksetzen, die sind nämlich teilweise sehr unterschiedlich. Das geht ganz einfach so:

*
{
margin: 0;
padding: 0;
border: 0 none;
}

Wenn der Fehler noch immer da ist, liegt es am leeren DIV - was ohnehin nicht wirklich so gut ist vom Aufbau, weil es "sinnfrei" ist (unsemantisch).

danihue · 06.02.2008, 11:06

Hallo Boris,

vielen Dank erstmal für deine Antwort. Ich habe deine Ratschläge berücksichtigt. Leider besteht das Problem immer noch.

Wie meinst du das mit den leeren Divs?

Ich wollte erstmal das Grundlayout der Seite stehen haben (3 Teile: Header, Mittelteil, Footer) und dann die Inhalte einfügen.

Hier ist der jetzige Quelltext:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="walking_1_rl.css" rel="stylesheet" type="text/css">
</head>

<body>
<div style="margin:20px">

<div id="header">&nbsp;</div>
<div class="bg">&nbsp;
  <p>&nbsp;</p>
  <p>&nbsp;</p>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>
<div class="bg_unten">&nbsp;</div>
</div>
</body>
</html>

Und hier der CSS Code:

Code:

#header{
	background-image: url(grafiken/body_bg_header.jpg);
	background-repeat:no-repeat;
	height: 147px;
	width: 800px;
	margin: 0;
	padding: 0;
	border: 0 none;
	
}

.bg{
	background-image: url(grafiken/body_bg_mitte.jpg);
	background-repeat:repeat-y;
		width: 800px;
	margin: 0;
	padding: 0;
	border: 0 none;
}

.bg_unten{
	background-image: url(grafiken/body_bg_unten.jpg);
	background-repeat:no-repeat;
	height:40px;
	width: 800px;
	margin: 0;
	padding: 0;
	border: 0 none;
}

Boris · 06.02.2008, 11:11

Zitat:

Das ist ein leeres DIV. Elemente ohne Inhalt ergeben keinen Sinn und sind auch nicht semantisch. Siehe auch: http://www.vorsprungdurchwebstandard.../retro-coding/

Dein "Problem" entsteht übrigens durch das unsichtbare Leerzeichen. Man kann es zwar nicht sehen, dennoch benötigt es ein "Zeichen" Platz - was sich dann als leerer Balken bemerkbar macht. Raus damit

danihue · 06.02.2008, 18:02

Zitat:

Dein "Problem" entsteht übrigens durch das unsichtbare Leerzeichen. Man kann es zwar nicht sehen, dennoch benötigt es ein "Zeichen" Platz - was sich dann als leerer Balken bemerkbar macht. Raus damit

Da muss ich dir leider widersprechen

- das kann nicht der Grund sein, weil ich gestern noch kein unsichtbares Leerzeichen drin hatte. Das habe ich heute erst nach deiner Antwort eingefügt.

Ich habe es wieder entfernt, und wie du siehst: http://www.walking.huechtemann.com ist der weiße Balken immer noch da.

Wenn ein Div nicht leer sein darf, wie kann ich denn sonst den Footer positionieren?

Boris · 06.02.2008, 18:12

In dem du etwas sinnvolles an Inhalt einträgst. Zum Beispiel beim Header:

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

Schön, dass in der Grafik "running synergy" steht. Aber das ist eine Grafik, Google kann daraus überhaupt keine Informationen entnehmen, geschweige denn Menschen ohne Grafiken, ohne CSS oder mit Screenreader.

Sinnvoller wäre z.B.

<h1 id="header">Running Synergy</h1>

Hier ist Inhalt drin. Mit CSS kannst du nun in das H1 deine Grafik legen und den Text an sich "verschwinden" lassen. So sieht es aus wie vorher auch und Google & Co freuen sich auch über Inhalt.

Wie das genau geht, steht in diversen Beispielen hier (mit Vor/Nachteilen): http://meiert.com/de/publications/articles/20050513/

danihue · 06.02.2008, 18:33

Ich les mir das dann mal erst durch ... gar nicht so einfach das Ganze

danihue · 06.02.2008, 19:08

Ok, das habe ich verstanden und umgesetzt. ... Aber mein Problem mit dem weißen Balken ist dadurch leider immer noch nicht gelöst

So sieht es jetzt aus:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="walking_1_rl.css" rel="stylesheet" type="text/css">
</head>

<body>
<div style="margin:20px">

<h1><span>Running Synergy</span></h1>

<div class="bg">&nbsp;
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>
<h1 class="bg_unten"><span>Running Synergy</span></h1>

</div>
</body>
</html>

Das Stylesheet:

Code:

h1{
	background-image: url(grafiken/body_bg_header.jpg);
	background-repeat:no-repeat;
	height: 155px;
	width: 800px;
	margin: 0;
	padding: 0;
	border: 0 none;
	font-size: 1px;


}

h1 span {
	visibility: hidden;
}


.bg{
	background-image: url(grafiken/body_bg_mitte.jpg);
	background-repeat:repeat-y;
	width: 800px;
	margin: 0;
	padding: 0;
	border: 0 none;
}

.bg_unten{
	background-image: url(grafiken/body_bg_unten.jpg);
	background-repeat:no-repeat;
	height:40px;
	width: 800px;
	margin: 0;
	padding: 0;
	border: 0 none;
}

Was mache ich falsch????

Boris · 06.02.2008, 19:26

Gib zum Test mal jedem Element einen Rahmen (border: 1px solid red, 1px solid green, 1px solid blue) ... so kann man schonmal "sehen", wer der Übeltäter ist.

danihue · 06.02.2008, 19:46

Wennich dem mittleren Element einen Rahmen zuweise wird der Footer direkt unten angedockt, so wie es eigentlich sein sollte. Wenn ich den Rahmen aber wieder weg mache rutscht auch der Footer weider runter.

Boris · 06.02.2008, 19:52

Das ist komisch. Kannst du das mal online stellen?

Im übrigen, du sollst nicht jedem Element einzeln die Abstände zurücksetzen, sondern für alle Elemente - so, wie in meinem Beispiel oben (mit * Sternchen).

danihue · 06.02.2008, 20:00

Ich dachte das * steht nur als Platzhalter für die einzelnen Klassen da

Habe das im Stylesheet geändert und siehe da, der Balken ist verschwunden

Zwar verstehe ich das alles noch nicht so ganz aber hauptsache es ist nun alles so, wie ich es will.

Vielen, vielen Dank für deine Bemühungen

http://www.walking.huechtemann.com

Boris · 06.02.2008, 20:20

Ne, das * steht für "alles"

So richtig nachvollziehen konnte ich dein Problem auch nicht, aber wenn es jetzt geht

His.Master's.Voice · 06.02.2008, 23:28

Jetzt erst gelesen, aber ich hatte auch mal das gleiche Problem.
Dani hatte wie ich einen umschließenden Container in dem 2 oder mehrere Container lagen. Zwischen dem untersten und dem mittleren hatte ich dann auch diesen Abstand.

Die Lösung: den oberen hatte ich ein float:left dem unteren ein clear:both verpasst.
Eine weitere Variante wäre gewesen, dem Content Container einen Rahmen zu spendieren, dann wurde auch dieser scheinbare Abstand aufgefüllt bzw. verschwand.