SECTION NAVIGATION und LINE HEIGHT

Billbos

Hallo ihr Lieben,

ich habe gleich drei Fragen auf einmal.
Ich komme einfach nicht drauf.

Hier vorab der Link zum Geschehen:

Wieso muss ich bei

Code

section {	margin: -20px auto;
	padding: 0;
	width: 100%;
}

margin -20px nehmen, damit der Abstand zwischen meinen Sektionen 0 wird (ist gewollt), aber hat es einen Grund wieso standart 20px sind?

Frage zwei, wieso rutscht meine Navigation nicht nach rechts neben dem Logo?
Es ist von mir gewollt, dass das Logo und die Navigation in einer Reihe sind und nicht versetzt nach unten.
Bei 960px Gesamtbreite gehen 240px für das Logo drauf und 720px für die Navigation.

Frage III:

Bei meiner Navigation geht beim hoovern die rote Hintergrundfarbe etwa fünf Pixel nach unten, sprich sie füllt nicht die 60px line-height, das hätte ich gerne anders.

Lieben Gruß, Daniel

MrMurphy

Hallo,

mach's einfacher. Verzichte auf unnötige Container wie die mit der Klasse section-inner, die braucht kein Mensch und kein Browser.

Wenn du floatest solltest du dich mit dem richtigen clearen beschäftigen. Sinnvoller und aktueller ist aber heutzutage das Flexbox-Modell.

Nach aktuellem Stand sollte dein Quelltext zum Beispiel so aussehen:

Code

<body>
   <header role="banner">
      <figure>
         <img src="http://www.placehold.it/150x100/ffefd5/000080.jpg" alt="Logo" />
      </figure>
      <nav role="navigation">
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#aktuelles">Aktuelles</a></li>
            <li><a href="#kurse">Kurse</a></li>
            <li><a href="#galerie">Galerie</a></li>
            <li><a href="#kontakt">Kontakt</a></li>
         </ul>
      </nav>
   </header>
   <main role="main">
      <h1>Hauptüberschrift</h1>
      <section>
         <h2>Home</h2>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </section>
      <section>
         <h2>Aktuelles</h2>
         <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
      </section>
      <section>
         <h2>Kurse</h2>
         <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </section>
      <section>
         <h2>Galerie</h2>
         <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
         <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </section>
      <section>
         <h2>Kontakt</h2>
         <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </section>
   </main>
   <footer role="contentinfo">
      <h2>Footer</h2>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
   </footer>
</body>

Alles anzeigen

Der Rest dann über CSS.

MrMurphy

Zitat

Hallo,
danke für deine schnelle Rückmeldung, leider kann ich in dem Threat nicht antworten. Komisch!
Doch wie bekomme ich nun in die Mitte meinen 960px breiten Container mit dem Inhalt?

Hallo,

davon würde ich stark abraten. Warum verbietest du deinen Besuchern mit größeren Fenstern das gesamte Fenster zu nutzen? Und Besucher mit kleineren Fenstern müssen dann seitlich scrollen - ein absolutes NoGo.

Wenn du das doch machst wirst du dafür immer wieder negative Kritik ernten - und zwar zu Recht. Feste Seitenbreiten sind bereits seit 15 Jahren veraltet - nur haben das viele Webseitenersteller bis heute immer noch nicht mitbekommen. Seine bevorzugte Seitenbreite sollte jeder Besucher selbst bestimmen dürfen.

Die Breite der gesamten Seite bestimmst du, indem du dem body-Element eine Breite (width) mit auf den Weg gibst, z. B. 98% oder auch deine unsinnigen 980px. Dazu einen seitlichen Abstand (margin) links und rechts mit dem Wert auto.

Gruss

MrMurphy

Tags