Seltsamer Abstand rechts des Main-Bereichs

  • Hallo zusammen!
    Ich bin gerade dabei, eine Website zu erstellen. Da hat allerdings unterhalb des Hero-images, wo der Main-bereich angrenzt, rechts davon eine art "margin". Auf jeden Fall ist der Main-Bereich linksbündig am Bildschirm (was ja standard ist) und hat rechts noch einen Abstand (Siehe Bild im Anhang, der grüne Rahmen ist der Main-Bereich)
    [Blockierte Grafik: http://fs5.directupload.net/images/160613/i7xb9gcg.png]


    Ich habe versucht, die width von der main auf 100% zu stellen, aber dann schaut die (warum auch immer) rechts über den Header usw raus.
    Hier wäre der entsprechende Code:





    Vielen Dank euch für die Hilfe!

  • Hallo


    Deine Quellcodeschnipsel sind nicht aussagekräftig. Wie sollen wir zum Beispiel die Breite von header und main vergleichen wenn du uns den header vorenthälst? Am besten wäre ein Link zu der Seite.


    Insgesamt enthält der Quelltext viele Fehler, sachliche und technische, die ein vernünftiges Gestalten verhindern. Die Fehler sollten zunächst korrigiert werden.


    header und main müssen im Prinzip die gleiche Breite und die gleichen Abstände zugewiesen werden.


    Gruss


    MrMurphy

  • Du solltest die gesamte Seite in einen Div mit der class container packen und ein feste Breite festlegen. Durch margin auto wird der container immer zentriert


    CSS
    .container{
     width: 1170px;
     margin-left:auto;
     margin-right:auto;
    }
  • Hallo


    In der verlinkten Datei gibt es nur einen leeren header der deshalb auch nicht angezeigt wird. Wie sollen da die Breiten von header und main verglichen werden?


    Zitat

    Was für Fehler meinst du denn z.B.?


    Zum Beispiel:


    - die erste h3-Überschrift im main ist sachlich falsch


    - Abstände werden nicht mittels br erstellt


    - span-Elemente dürfen keine Block-Elemente wie h1 enthalten


    - Text (Text Text Text ... oder Inhalt) dürfen nur in geeigneten Elementen wie h1 bis h6, p, li, dt, dd, ... stehen


    - Klassennamen (links, rechts) sollten nicht aus Lagebezeichnungen bestehen, sondern den Inhalt beschreiben


    und so weiter


    Korrekt könnte der Quelltext im main-Bereich zum Beispiel folgendermaßen erstellt werden:



    Gruss


    MrMurphy

  • Hallo


    erstmal Danke für deine Antwort!


    In der verlinkten Datei gibt es nur einen leeren header der deshalb auch nicht angezeigt wird. Wie sollen da die Breiten von header und main verglichen werden?


    Der header ist leer, das stimmt, allerdings werden ihm im CSS höhe und Breite zugewiesen. Hier der direkte Link in die CSS


    Danke für deinen ausgebesserten Quellcode, ich werd mich da mal durcharbeiten, finde ich die "Regeln" irgendwo im w3c oder auf selfhtml?


    Vielen Dank und einen schönen Tag noch!
    MrMurphy


    Also ich hab mal teil für teil die Seite zerlegt, es liegt nicht am header! wenn der weg ist, ist es immer noch so. Ich vermute, dass es an der eigenschaft inline-block liegt, aber ich hab momentan keine Ahnung wie ich das hinbekommen soll, wenn width nicht funktioniert.
    Hast du noch eine Lösung?


    Vielen Dank schon mal!

  • Hallo


    Zitat

    Hast du noch eine Lösung?


    Sobald ich dein Problem kenne - ja.


    Bislang hast du nur geschrieben, dass der main-Bereich rechts über einen (offensichtlich gar nicht vorhandenen) header-Bereich herausragt.


    Was willst du erreichen? Soll der main-Bereich zum Beispiel 80 Prozent breit und zentriert sein, was ich allmählich vermute?


    Dann gib ihm eine Breite von 80%, ein display: block und seitliche margin: auto. Also zum Beispiel


    Code
    main {
        display: block;
        width: 80%;
        margin: 1rem auto;
    }


    Ansonsten musst du dein Problem etwas verständlicher beschreiben.


    Gruss


    MrMurphy

  • MrMurphy


    Okay, tut mir leid wenn das unverständlich war.


    Was willst du erreichen? Soll der main-Bereich zum Beispiel 80 Prozent breit und zentriert sein, was ich allmählich vermute?


    In dem oben genannten Link ist das grüne Feld der Header (Siehe CSS).


    Der Main-Bereich (unterhalb des headers) ist mit einem roten Rahmen versehen und soll über die ganze Bildschirmbreite gehen.
    Im Normalfall geht das ja mit width: 100%. So aber nicht hier - dann ist die Main zu groß und ich habe eine vertikale Scrollbar.


    Zudem passt sich der Main-Bereich an den Inhalt an, obwohl ich den beiden sections innerhalb der main jeweils Breiten zugeteilt habe (leitspruch: 60% und kontakt 30%).


    Wenn ich der Main display: block zuweise, verschiebt sich seltsamerweise alles, und der Inhalt der Main geht über die main hinaus.


    Ich hoffe das war verständlicher.


    Danke wirklich für deine Mühe!

  • Hallo


    Jetzt lichtet sich der Nebel.


    Als grundsätzliches Problem steht über allem: Kein funktionierendes Layout ohne sauberen korrekten HTML-Quellcode.


    Darüber habe ich bereits einiges geschrieben und dir konkrete Beispiele genannt.


    Konkret zu deinen Problemen: Du hast drei Baustellen.


    1. Breite auf 100% bringen


    main benötigt zunächst eine Breite von 100% und die Anweisung display: block. Ohne CSS-Angaben ist main bereits ein Block-Element und hat eine Breite von 100%.


    Zusätzlich hat dein main ein seitliches padding von 120px (2 x 60px) und ein seitliches border von 2px (2 x 1px). Da du als Box-Modell die Vorgabe (Content-Modell) belassen hast werden die 122px der Breite hinzugefügt. Das main-Element ist also 100% + 122px breit und kann damit nicht mehr in das Fenster passen. Du musst also entweder ein anderes Box-Modell wählen oder die Breite so ändern, dass width, padding und border sowie gegebenenfalls margin zusammen nicht mehr als 100% ergeben.


    2. Elemente nebeneinander anordnen


    Zum Nebeneinanderstellen der beiden inneren Container hast du dich für float entschieden, ohne dich über die korrekte Anwendung und damit die Nebenwirkungen zu informieren.


    Der wichtigste Grundsatz lautet: Kein float ohne clear.


    Wobei es verschiedene Möglichkeiten des Clearens gibt, das ist eine Wissenschaft für sich. Informationen dazu findest du zum Beispiel unter


    http://www.andreas-kalt.de/webdesign/tutorials/float-theorie


    Für deine Seite ist dabei ein sogenannter Clearfix sinnvoll. Wobei das wiederum ein Oberbegriff für verschiedene Lösungen ist.


    Eine technisch einwandfreie und bewährte Anweisung lautet:


    Code
    .clearfix::before,
          .clearfix::after {
             content: " "; /*Leerstelle ist wichtig*/
             display: table;
          }
          .clearfix::after {
             clear: both;
          }


    Das kannst du deinem CSS hinzufügen und dem main-Element die Klasse clearfix zuweisen.


    Auf großen Bildschirmen sollten die beiden Container jetzt nebeneinander angezeigt werden. Wobei dein fröhliches hin- und herfloaten (left, right) zusätzliche Probleme erzeugen kann, auf die ich aber nicht weiter eingehe, das ist nur ein Hinweis für die Zukunft.


    3. Breitenangaben mit unterschiedlichen Einheiten


    Eher wird das Layout dir in den Rücken fallen, wenn du das Browser-Fenster schmaler ziehst. Dann rutschen die beiden Container nämlich relativ schnell untereinander. Und zwar bei einem Zoom von 100% bei etwa 710px Fensterbreite.


    Das wiederum liegt an deinen Breitenangaben von width in Prozent und margin in px. Sobald die in Summe breiter als 100 Prozent wird passen die beiden Container nicht mehr nebeneinander. Das ähnelt also deinem ersten Problem.


    Gruss


    MrMurphy


    Edith: Ich habe meinen Beitrag nachträglich ergänzt.

  • Welche Elemente wie verschachtelt werden dürfen, regeln die Content Modelle.


    Hier findest du Informationen über die verschiedenen Typen und eine Grafik, was wo vorkommen darf. Du findest auch in jeder Kategorie die betroffenen Elemente.

  • Zitat

    kann ich irgendwo im w3c oder so nachlesen, welche Elemente ich nicht wo reinpacken darf?

    Hilfreich ist auch ein Editor, der solche Fehler gleich im Quelltext einschl. Erläuterung anzeigt. Ich benutze daher MS Webmatrix, der dieses Feature besitzt. Das erspart ständiges Nachlesen.

Jetzt mitmachen!

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