2 IDs lassen sich nicht sepparat anordnen

  • Hallo Leute,
    bin ziemlich neu hier und hab auch gleich direkt das erste Problem. Ich bin gerade dabei die Navigation richtig auf meiner Homepage zu platzieren, allerdings will das nicht so funktionieren :/


    Ich habe zwei ID Container erstellt die miteinander verschachtelt sind, der eine nennt sich "id=header" und in diesem Container befindet sich noch der "id=navi", der eine UL beinhaltet. Nun habe ich dem #header eine fixe height gegeben sowie auch einen blauen Hintergrund festgelegt. Auf diesem blauen Hintergrund will ich dann die Navigation mittig platzieren, sprich #navi. Nun hab ich das Problem dass wenn ich den Abstand von #navi nach oben hin mit margin-top ändern will, dass sich der Komplette #header nach unten hin verschiebt. Sobald ich aber auf den #header einen border lege, springt der wieder nach oben und alles würde passen so wie ichs gern hätte(bis auf den border eben). Jetzt quäle ich mich schon stundenlang durch den Code und versuche 1000e Varianten, aber ich bekomms einfach nicht hin. Habs dann mal mit float versucht, dann lässt sich zwar die #navi von oben her schön positionieren, allerdings die Abstände von links nach rechts nicht.


    Mal mein Code:



    Ich hoffe ihr versteht so halbwegs mein Problem und könnte mich behilflich sein :)


    lg Markus

  • Hallo


    Das ist ein gewolltes Verhalten. Informationen findest du unter dem Stichwort "Collapsing Margins". Zum Beispiel


    https://developer.mozilla.org/…enabst%C3%A4nden_meistern


    oder


    http://www.thestyleworks.de/basics/margins.shtml


    Eine der Lösungen hast du bereits selbst gefunden. Du kannst dem umgebenden Element ein border geben. Dazu reicht eine Breite von 1px. Dem Border kannst du auch eine Farbe geben, zum Beispiel die Hintergrundfarbe des Containers, dann ist der Rahmen nicht mehr sichtbar. Mit "transparent" kannst du den Rahmen auch durchsichtig machen.


    Oder du gibst dem umgebenden Element ein padding, dabei reicht auch 1px.


    Es darf nur nicht direkt margin auf margin treffen.


    Unabhängig von deinem Problem solltest du grundsätzlich einen Doctype (aktuell sinnvollerweise für HTML5) und ein charset angeben.


    Gruss


    MrMurphy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!