Was ist mit der div-Box passiert?

[Horus]

Hallo,
mein Problem ist, dass ich versuche einen Text in einer div-Box auszugeben, dies aber darin resultiert, dass die div-Box bis zu einem mir unverständlichen Maß verschandelt wird.
Folgender Code wird mit Start der Seite ausgeführt:

  
<div align="center" id="allgemein" style="display:inline;padding:5px 10px;border:dashed #EE0000 1px;background-color:#FFD0D0">  
<font color=#EE0000>Name der Mission: Gelegenheitsarbeit<br />Dauer: 0h 30min</font>  
</div>  

Und was dabei herauskommt ist das hier:

Vorher habe ich versucht den selben Text mit einer Tabelle auszugeben, aber das Ergebnis war noch merkwürdiger.

Ich bin mit meinem Latein hier wirklich am Ende, ich kann mir nichtmal erklären was hier überhaupt passiert.

[Gunnar Bittersmann]

@@Horus:

nuqneH

<div align="center" id="allgemein" style="display:inline;padding:5px 10px;border:dashed #EE0000 1px;background-color:#FFD0D0">
<font color=#EE0000>Name der Mission: Gelegenheitsarbeit<br />Dauer: 0h 30min</font>
</div>

Räumen wir da mal auf und verzichten auf das missbilligte 'font'-Element (die Farbe geben wir auch per CSS an) und das missbilligte @align-Attribut (die Ausrichtung geben wir auch per CSS an). Anstelle des 'div' mit 'display: inline' könnte man genausogut ein 'span' notieren. Und die Styleangaben notieren wir nicht inline im @style-Attribut! Das sähe also so aus:

im Markup:
<span id="allgemein">Name der Mission: Gelegenheitsarbeit<br />Dauer: 0h 30min</span>

im Stylesheet:

#allgemein  
{  
  background-color: #FFD0D0;  
  border: dashed #EE0000 1px;  
  color: #EE0000;  
  padding: 5px 10px;  
  text-align: center;  
}

Und was dabei herauskommt ist das hier:

Und was genau überrascht dich jetzt daran?

Ich bin mit meinem Latein hier wirklich am Ende, ich kann mir nichtmal erklären was hier überhaupt passiert.

Ich kann mir nicht mal erklären, was du überhaupt möchtest.

Qapla'

[Horus]

Räumen wir da mal auf und verzichten auf das missbilligte 'font'-Element (die Farbe geben wir auch per CSS an) und das missbilligte @align-Attribut (die Ausrichtung geben wir auch per CSS an). Anstelle des 'div' mit 'display: inline' könnte man genausogut ein 'span' notieren. Und die Styleangaben notieren wir nicht inline im @style-Attribut! Das sähe also so aus:

im Markup:
<span id="allgemein">Name der Mission: Gelegenheitsarbeit<br />Dauer: 0h 30min</span>

im Stylesheet:

#allgemein

{
  background-color: #FFD0D0;
  border: dashed #EE0000 1px;
  color: #EE0000;
  padding: 5px 10px;
  text-align: center;
}

  
Dafür, dass mein Code noch ein bisschen stark unordentlich und bestimmt nicht korrekt ist an einigen Stellen möchte ich mich entschuldigen. Das Aufräumen mit allem was fehl am Platz ist wollte ich mir für später aufheben und mich im Moment mehr darauf konzentrieren, dass es überhaupt funktioniert. Deshalb auch das display:inline. Eigentlich wäre es nicht notwendig, aber normalerweise steht es auch auf none und soll durch Javascriptanweisungen auf inline gesetzt werden, aber der Umständlichkeit wegen habe ich die Javascriptanweisungen übersprungen und die div-Box gleich auf inline gesetzt um sofort zu sehen was nun passiert.  
Aber vielen Dank für die Hilfe an dieser Stelle. Ich habe es bereits übernommen und werde meine Seite dementsprechend umstellen  
  

> > Und was dabei herauskommt ist das hier:  
> > ![](http://img192.imageshack.us/img192/2305/divp.png)  
>   
> Und was genau überrascht dich jetzt daran?  
>   
> > Ich bin mit meinem Latein hier wirklich am Ende, ich kann mir nichtmal erklären was hier überhaupt passiert.  
>   
> Ich kann mir nicht mal erklären, was du überhaupt möchtest.  
  
Naja, eigentlich wollte ich den ganzen Text in einem einzigen rechteckigen Kasten angezeigt haben und wenn möglich auch noch mit einer Tabelle optisch schön positioniert. Deshalb dachte ich, das würde problemlos mit einer div-Box klappen, schließlich hat es das auch schon in früheren Projekten. Stattdessen bekomme ich das was in dem Bild zu sehen ist. Etwas, das aussieht als lägen 2 div-Boxen übereinander. Wie es dazu kommt weiß ich leider nicht, deshalb ist es mir auch nicht möglich von alleine eine Lösung zu finden

[Gunnar Bittersmann]

@@Horus:

nuqneH

Das Aufräumen mit allem was fehl am Platz ist wollte ich mir für später aufheben und mich im Moment mehr darauf konzentrieren, dass es überhaupt funktioniert.

Es gleich richtig[tm] (d.h. aufgeräumt) zu machen spart später doppelte Arbeit.

Deshalb auch das display:inline. Eigentlich wäre es nicht notwendig, aber normalerweise steht es auch auf none und soll durch Javascriptanweisungen auf inline gesetzt werden

Warum auf inline?

habe ich […] die div-Box gleich auf inline gesetzt um sofort zu sehen was nun passiert.

Nun siehst du, was passiert: Ein Inline-Element ist nur so groß wie der Text (hat also auch nur dort die Hintergrundfarbe), zuzüglich Padding oben und unten und Padding links vom Textanfang (also nur in der ersten Zeile) und Padding rechts vom Textende (also nur in der letzten Zeile).

Naja, eigentlich wollte ich den ganzen Text in einem einzigen rechteckigen Kasten angezeigt haben

Du willst also nicht 'display: inline', sondern 'display: block'.

» und wenn möglich auch noch mit einer Tabelle optisch schön positioniert.

_Das_ willst du *ganz* *bestimmt* *nicht*!!

Qapla'

PS: BTW, bist du *sicher*, dass "allgemein" ein sinnvoller ID-Bezeichner ist?

[Horus]

Das Aufräumen mit allem was fehl am Platz ist wollte ich mir für später aufheben und mich im Moment mehr darauf konzentrieren, dass es überhaupt funktioniert.

Es gleich richtig[tm] (d.h. aufgeräumt) zu machen spart später doppelte Arbeit.

Mag schon sein, aber ich hab in der Vergangenheit schon mehr als ein Projekt in Rekordzeit in den Sand gesetzt, nur weil ich mir zuviel auf einmal vorgenommen habe. Das klingt jetzt vielleicht so, als ob ich nicht in der Lage bin größere Projekte zu organisieren, aber aus der Erfahrung heraus nehme ich mir lieber die Zeit vieles Schritt für Schritt zu bearbeiten.

Deshalb auch das display:inline. Eigentlich wäre es nicht notwendig, aber normalerweise steht es auch auf none und soll durch Javascriptanweisungen auf inline gesetzt werden

Warum auf inline?

Naja, bis heute waren mir nur "none" und "inline" als Optionen für display bekannt. Ich hab scheinbar missverstanden was das display-Attribut macht und hab gedacht es beschränkt sich auf "sichtbar" und "nicht sichtbar".

habe ich […] die div-Box gleich auf inline gesetzt um sofort zu sehen was nun passiert.

Nun siehst du, was passiert: Ein Inline-Element ist nur so groß wie der Text (hat also auch nur dort die Hintergrundfarbe), zuzüglich Padding oben und unten und Padding links vom Textanfang (also nur in der ersten Zeile) und Padding rechts vom Textende (also nur in der letzten Zeile).

Achso, dann verstehe ich warum die div-Box so merkwürdig ausgesehen hat.

Naja, eigentlich wollte ich den ganzen Text in einem einzigen rechteckigen Kasten angezeigt haben

Du willst also nicht 'display: inline', sondern 'display: block'.

Ja, vielen Dank, genau das wollte ich. Jetzt kann ich mein Projekt zu Ende führen

» und wenn möglich auch noch mit einer Tabelle optisch schön positioniert.

_Das_ willst du *ganz* *bestimmt* *nicht*!!

Mmh, wenn du das sagst, wird wohl was dran sein. Dann lasse ich die Tabelle lieber weg

PS: BTW, bist du *sicher*, dass "allgemein" ein sinnvoller ID-Bezeichner ist?

In diesem Fall schon. Zum einen folgen "allgemein" noch 7 weitere Objekte, die genauere ID's haben und detailiertere Informationen enthalten und zum anderen leide ich gelegentlich an Fantasielosigkeit^^

[Gunnar Bittersmann]

@@Horus:

nuqneH

Es gleich richtig[tm] (d.h. aufgeräumt) zu machen spart später doppelte Arbeit.

Mag schon sein, aber ich hab in der Vergangenheit schon mehr als ein Projekt in Rekordzeit in den Sand gesetzt, nur weil ich mir zuviel auf einmal vorgenommen habe.

Es ist ja nicht so, dass man anfangs mehr Arbeit hätte, wenn man es gleich richtig[tm] macht. Man hat sie nur an anderer Stelle. Und zwar gleich an der richtigen, was späteres Aufräumen spart.

Naja, bis heute waren mir nur "none" und "inline" als Optionen für display bekannt.

Dagegen hilft nachlesen: [CSS2 §9.2.5, http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=SELFHTML]

das display-Attribut

die 'display'-_Eigenschaft_ [CSS2 §4.1.8]

Qapla'

[Horus]

@Gunnar Bittersmann:
Ja, das Nachlesen habe ich heute auch vor, da es wohl scheinbar nötig ist

Und irgendwie hatte ich schon geahnt, dass ich mir mit dem display-"Attribut" selbst ein Loch grabe^^
Aber vielen Dank für die Korrektur, ich werds mir merken.

@Matze:
Auch dir vielen Dank für das tolle Beispiel.
Ich werds mir auf jeden Fall einprägen und versuchen mich zu bessern

[Matze]

Hallo,

Mag schon sein, aber ich hab in der Vergangenheit schon mehr als ein Projekt in Rekordzeit in den Sand gesetzt, nur weil ich mir zuviel auf einmal vorgenommen habe. Das klingt jetzt vielleicht so, als ob ich nicht in der Lage bin größere Projekte zu organisieren, aber aus der Erfahrung heraus nehme ich mir lieber die Zeit vieles Schritt für Schritt zu bearbeiten.

Es mag dir am Anfang einfacher erscheinen so zu arbeiten, ist es aber nicht.

Ich möchte dir deshalb ein Beispiel zeigen.
Wir erstellen uns ein Menü:

1. Ein Menü gehört semantisch in eine Liste. Wir nehmen dazu <ul>:
<ul id="menu">
  <li><a href="">Punkt1</a></li>
  <li><a href="">Punkt2</a></li>
<ul>

Das sieht sehr übersichtlich aus oder?
Viel zu warten gibts da in der Regel nicht. Nur wenn ein neuer Menüpunkt hinzukommt, muss man an den HTML-Code.

2. Jetzt gehen wir in die CSS-Datei und passen die Liste an unser Layout an.
Wir gehen mal davon aus, dass das Menü horizontal angeordnet sein soll:

#menu {
  list-style-type:none; /* wir entfernen die Punkte vor den Listenpunkten */
  padding:0; /* wir entfernen Aussen- und Innenabstände der Liste */
  margin:0;
}

Jetzt stehen die Menüpunkte aber noch untereinander. Das können wir beheben.
Wir legen auch gleich das Layout der Menüpunkte fest.

#menu li {
  float:left; /* wir richten die Punkte links aus */
  width:5em;  /* Breitenangabe und andere Angaben... */
  background-color:#CCC;
  border:1px solid black;
  margin-right:1px;
  text-align:center;
}

Wenn du jetzt einen Menüpunkt hinzufügen möchtest brauchst du dich nicht mehr um das Layout kümmern. Wenn du das Layout anpassen möchtest, brauchst du nur ein paar Angaben in der CSS-Datei ändern oder hinzufügen.

Zuerst den CSS-Teil inline zu "testen" ist absolut überflüssig.
Es erspart dir viel Zeit nicht hinterher deinen Code nach auszulagernden CSS-Stücken zu durchsuchen. Mal ganz abgesehen von "Star-Hacks" oder ähnlichem was inline unmöglich ist.

Grüße, Matze