Wieso ist das div inside größer als div header?

[BuchwaldM]

Hallo Leute

Kann mir jemand erklären, warum bei mir das inside div größer ist, als das div header selbst?
Header hat die Höhe 199px, wie ich es im layout festgelegt habe. Inside hingegen hat 253px. Ich weiß nicht wie das zusammenhängt.

http://www.nenno-architektur.de/konzept.html

Vielen Dank

[Xamanoth]

Also auf einen ersten kurzen Blick hab ichs noch nicht rausgefunden.
Allerdings hat das obere Menü die Höhe 54px, was mit den 199px zusammen auf 253px kommen würde. Aber es steht ja von der Anzeige noch im 199px-Bereich des Headers.

Vielleicht hilft dir oder jemand anders das bei der Suche.

[lucina]

Ich kann nicht sehen, wo Du für .inside eine Höhe angegeben hättest - insofern bestimmt sich das vermutlich aus der Berechung von 177 (SignaturLO) plus 9 (architekturbanner) plus 2 (topline) plus der Höhe, die Deine Navigation gemeinhin hat (was sich aus der Schrifthöe von 16 Pixeln, einer berechneten Zeilenhöhe von 20 Pixeln, einem TopMargin von 16 Pixeln und einem BootomMargin von ebenfalls 16 Pixeln ergibt und dann insgesamt 66 Pixel ergibt).

Was mit 256 Px Deinem Ergebnis erstaunlich nahe kommt und sich vermutlich dadurch erklären lässt, dass ich wahrscheinlich ein paar negative margins & paddings übersehen habe. Berechnet werden mir dabei auch so nette Angaben wie eine Höhe von 21.5 Pixeln für ul .level_1 .... ;-)

(An der Höhe ändert sich ja nix wenn Du den Inhalt relativ dazu positionierst)

Carolina.

[BuchwaldM]

Mein ganzes css scheint schrott zu sein. Hab gerade realisiert, daß ich durch die relative Positionierung des Menüs nur die Position geändert habe, der Ursprungsplatz aber an der Stelle weiterhin "reserviert" bleibt.
Genau das war der Grund.

Danke

Edit: Danke auch dir Carolina. Hab gerade in einem anderen Forum erst gelesen, daß die Positionierung per position:relative totaler Unfug sein soll.
Naja, muß ich wohl weiter im Buch lesen.

Machts gut

[Nina]

Hab gerade in einem anderen Forum erst gelesen, daß die Positionierung per position:relative totaler Unfug sein soll.

Kein Unfug. Es hängt einfach davon ab, was du erreichen möchtest. Ich habe dazu vor ewigen Zeiten mal für eine kleine Schulung eine grobe Zusammenfassung geschrieben. Vielleicht hilft dir das dabei den Unterschied etwas zu verstehen.

//Korrektur: die Basis-Demos dazu habe ich auch noch gefunden und beigelegt (einfach jeweils in den Quelltext schauen und im Browser öffnen um zu sehen wie die verschiedenen Dinge funktionieren). Hat natürlich beides nix explizit mit Contao zu tun, sondern ist allgemeines Lehrmaterial zu CSS.

[wotank]

Kein Unfug.

so wie er sie einsetzt leider doch.

Ich verlinke mal zum entsprechenden Fred im anderen Forum

@BuchwaldM Du solltest dich erst mal auf den Hosenboden setzen und die empfohlene Grundlagenlektüre erst mal durcharbeiten.
Es macht wenig Sinn wenn du Fred um Fred mit jeweils anderen Problemen öffnest, deren Lösung du (noch) nicht verstehst.

[andreasisaak]

Na ja ich finde dein ganzes Konzept für den Headbereich etwas fragwürdig. Es geht um einiges einfacher und mit weniger Quellcode wenn du dich mal konkret damit auseinander setzt

1. Du brauchst den Tag "hr" nicht.
2. Pack die 2 Links am besten in ein "p" oder in ein "div" und positioniere sie nicht. damit haben sie erstmal "position:static" und gib dem Element einen weißen Hintergrund ...
3. Das Menü kannst du nun entweder mit "position:absolute" oder mit einem "float:right" nach rechts schieben, schau aber bitte erstmal im Netz nach welche Vorteile und Nachteile beide Befehle haben!

Und zum Schluss gibst du dem ".inside" oder dem "#header" eine kleine Grafik (auf der der Strich zu sehen ist) mit, die knapp am unteren Bereich platzierst.

Durch den weißen Hintergrund des Logos hast den den selben Effekt erzielt, bist aber auch Browsertechnisch auf der sicheren Seite. Ansonsten läufst du Gefahr es jetzt für einen bestimmten Browser zu optimieren und am Ende kann der IE nichts mit dem "hr" anfangen

[Nina]

so wie er sie einsetzt leider doch.

Ich verlinke mal zum entsprechenden Fred im anderen Forum

Ah, verstehe. Ich meinte ja auch nur, dass diese CSS-Anweisung nicht generell Unfug ist, sondern halt davon abhängt wofür man sie nutzt

[wotank]

Ah, verstehe. Ich meinte ja auch nur, dass diese CSS-Anweisung nicht generell Unfug ist, sondern halt davon abhängt wofür man sie nutzt

naja, ist schon klar.
Ich wollte bloß verhindern, das der Fredersteller in die falsche Richtung prescht (je nach Kenntnisstand hört man da manchmal sehr selektiv).

Deiner PDF-Datei fehlte noch eine kleine Notiz als Ergänzung.

[Nina]

Deiner PDF-Datei fehlte noch eine kleine Notiz als Ergänzung.

Danke, da ist wirklich ein kleiner Fehler reingerutscht

[BuchwaldM]

Hallo Leute

Hab mich nochmal mit css auseinandergesetzt. Habe mein externes css mal aufgeräumt und die meisten redundanten Sachen rausgeschmissen. Habe ebenso die Schriftgrößen von Pixel in relative Angaben gewechselt. Habe die Sachen im Kopfbereich in absolute Positionen relativ zum #header .inside positioniert.

Na ja ich finde dein ganzes Konzept für den Headbereich etwas fragwürdig. Es geht um einiges einfacher und mit weniger Quellcode wenn du dich mal konkret damit auseinander setzt

1. Du brauchst den Tag "hr" nicht.
2. Pack die 2 Links am besten in ein "p" oder in ein "div" und positioniere sie nicht. damit haben sie erstmal "position:static" und gib dem Element einen weißen Hintergrund ...
3. Das Menü kannst du nun entweder mit "position:absolute" oder mit einem "float:right" nach rechts schieben, schau aber bitte erstmal im Netz nach welche Vorteile und Nachteile beide Befehle haben!

Und zum Schluss gibst du dem ".inside" oder dem "#header" eine kleine Grafik (auf der der Strich zu sehen ist) mit, die knapp am unteren Bereich platzierst.

Durch den weißen Hintergrund des Logos hast den den selben Effekt erzielt, bist aber auch Browsertechnisch auf der sicheren Seite. Ansonsten läufst du Gefahr es jetzt für einen bestimmten Browser zu optimieren und am Ende kann der IE nichts mit dem "hr" anfangen

1. Was mach ich stattdessen? Einfach den Strich als Grafik einfügen?
2. Weiß nicht, welche 2 Links du meinst. Die im Footer?
Insgesamt weiß ich nicht so ganz was du meinst.
Vielleicht kannst du ja nochmal kurz auf die überarbeitete Seite gucken und was dazu sagen.

Vielen Dank euch allen