Positionierung von DIVs

  • Hallo zusammen,


    ich bin gerade dabei mir selbständig html und css beizubringen. Also versuche ich gerade erste Experimente.


    Ich möchte ein ganz simples Website Layout aufbauen und mithilfe von divs und befehlen display: inline zu positionieren. Hier der Code dazu:




    In der Praxis sieht es im Browser so aus:

    html-seminar.de/woltlab/attachment/2137/





    Was mache ich falsch, dass das weiße Rechteck (div=content) mit schwarzer Border und dem Text nicht bündig beginnt wie das vertikale Menü (div=verticalmenue)?

    Wenn ich es richtig verstanden habe, muss ich für die Positionierung von divs nebeneinander "nur" den Befehl display: inline nutzen, oder?


    Viele Grüße,

    Lisa



  • Zitat

    Wenn ich es richtig verstanden habe, muss ich für die Positionierung von divs nebeneinander "nur" den Befehl display: inline nutzen, oder?

    Das stimmt im Prinzip, es gibt jedoch (mindestens) einen Fallstrick bei der Sache:

    padding und border werden der Breite zugeschlagen. Z. B. wenn Du zwei Container mit der Breite 50% hast, 10px padding und 2px border und der Platz beträgt 1000px, dann ergibt sich für einen Container jeweils ein Breite von 524px, so dass sie nicht mehr nebeneinander in die verfügbare Breite von 1000px nebeneinander passen.

    Lösung 1:

    Die Breite berechnen, indem padding und border von den 50% subtrahiert werden.

    Lösung 2 (besser):

    box-sizing: border-box; verwenden, siehe hier:

    https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing

    Lösung 3 (am besten):

    Flexlayout verwenden, siehe z. B. hier:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Damit hast Du noch viele weitere Möglichkeiten, die Anordnung der Element zu steuern.


    Der Hauptgrund für deine Probleme mit dem Layout ist jedoch, dass Du float verwendest. Auch darauf kannst Du verzichten, wenn Du Flex nimmst.

  • Moin,

    ich habe mir mal erlaubt deinen code aufzuräumen. (ist nicht ganz fertig) Hoffe das man es jetzt besser lesen kann. Habe mich bemüht deinen code nicht all zu viel zu verändern. Für die zukunft trenne deinen code strikt: HTML und CSS. Denke das du auch probleme hast mit der "ordnung" (wo du was abspeicherst, pfad zum bild ist weit) zb.: Projekt -> Src -> img, css, js,... (Ordner). Habe dir alle div einen rahmen gegeben somit werden die div sichtbar.


    Wie soll die Seite aussehen? Kann nicht ganz so nachvollziehen wo was positioniert werden soll.


    Vorlage als hilfestellung beim coden (so mach ich es):


    html-seminar.de/woltlab/attachment/2141/


    TIPP:

    #content löschen: margin-left: 300px;

    #contenttext löschen: margin-left: 50px;

    Dann solltest du noch so 1px links luft haben, denke das du: Groß box in der eine kleiner box ist, die kleine box größer formatiert hast als die kleine.


    HTML:

    CSS:

    Ich würde dir empfehlen alles nochmal zu schreiben, step by step. (ein container nach dem anderen aufbauen)


    Hoffe das ich etwas helfen konnte. Gn8 =)

Jetzt mitmachen!

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