✔ Abstand zwischen 2 DIVS`?

[cille]

Hi ho, finde den fehler nicht.
Bei der Hintergrundgrafik bei "Hier wird gelogt GRRRRR"
und darunter darf keine freie Zeile stehen,
aber ich kriege diese Zeile einfach nicht weg.

Hier der link:
KLICK MICH

Hier der HTML-Code vom bereich:

	<div id="content">
		<div id="login">Hier wird gelogt GRRRRR</div>
		<img src="images/45.jpg" width="27" height="26" />
	</div>
	<div id="header02">
		<img src="images/46.jpg" width="309" height="24" />
		<div id="contentgraf"></div>
	</div>

Und hier der dazugehörige Teil der style.css Datei:

#content {
	vertical-align: top;
	margin-left: 269px;
	margin-top: 0px;
	padding: 0 0 0 0;
}
#contentgraf {
	background-image: url(images/47.jpg);
	width: 86px;
	height: 24px;
	background-position: center;
	float: left;
	background-repeat: no-repeat;
}
#login {
	background-image: url(images/44.jpg);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	width: 694px;
	height: 17px;
	padding-top: 8px;
	padding-left: 10px;
	padding-bottom: 0px;
	padding-right: 0px;
	float: left;
}

Würde mich auf Hilfe freuen.

PS: Mist muste ich doch wieder vor Sylvester hier was fragen ^^

 

[Maik]

Der Grund für die Lücke zwischen den DIVs ist die padding-top:8px-Angabe für das DIV #login.

An dieser Stelle möchte ich dich darauf hinweisen, daß eine ID in einem Dokument eindeutig sein muß, d.h. sie darf darin nur einmal vergeben werden.

Die ID #header02 kommt im Quellcode aber derzeit 14 mal vor

In diesem Fall mußt du sie in die Klasse .header02 umwandeln, da diese unbegrenzt vergeben werden darf.

<div class="header02">...</div>

Gleiches gilt auch für die IDs #navigraf04 - 08.

 

[cille]

ist das nicht eigentlich irelevant wieviel mal ich die ID nutze, weil ich diese namen ja nur zur grafischen gestaltung nehme daher ist das doch egal?.
Bei der programmierung muss ich diese meist einzigartig machen so wie ich es gemerkt hatte. Es funktioniert ja alles obwohl ich mehrere DIV's mit einer ID habe.

Warum sollte ich eine ID nicht mehrmals vergeb in sachen DESIGN?
Es klappt doch alles

 

[Maik]

Nein, das ist eben nicht irrelevant!

Schau dir einfach mal an, was der w3c-Validator zu deinem Markup sagt -> http://validator.w3.org/check?uri=http://www.plugin-gaming.net/projekte/pg-ohne-tabelle/

Error Line 35 column 10: ID "header02" already defined.

<div id="header02">

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Und wenn nun Javascript ins Spiel kommen würde, Stichwort: getElementById()-Methode, wären die nächsten Probleme vorprogrammiert, da der Browser beim Ausführen des Scripts dann nicht weiß, welche der 14 gleichlautenden IDs gemeint ist.

Daher sollst du auch die CSS-Klasse einsetzen, wenn ein Element mit derselben Formatierung in einem Dokument mehrmals enthalten ist.


P.S. Deine ID-Card (Personalausweis) gibt es ja auch nur einmal

 

[cille]

Ah alles klar,
danke für die schöne Antwort, ich werde meine Homepage soweit wie möglich umbasteln und werde es mir merken das Design mit Klassen zu erstellen.

mfg,
cille