Ergebnis 1 bis 3 von 3

Thema: SECTION NAVIGATION und LINE HEIGHT

  1. #1
    Meister(in)
    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard SECTION NAVIGATION und LINE HEIGHT

    Hallo ihr Lieben,

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

    Hier vorab der Link zum Geschehen:

    http://danielsfotos.com/gym/

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    571
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: SECTION NAVIGATION und LINE HEIGHT

    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>
    Der Rest dann über CSS.
    Geändert von MrMurphy (21.03.2015 um 09:07 Uhr)

  3. Folgende User finden die Antwort von MrMurphy gut:


  4. #3
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    571
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: SECTION NAVIGATION und LINE HEIGHT

    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

Ähnliche Themen

  1. Anregung: Line-height für code-Blöcke erhöhen
    Von SinnlosS im Forum Forum-Hilfe.de intern
    Antworten: 0
    Letzter Beitrag: 20.03.2013, 20:31
  2. Versteh Problem mit ?section
    Von Martin279 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 16.05.2007, 16:39
  3. Alternative zu Switch abfrage für $_GET['section']
    Von nobi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 02.07.2006, 15:16
  4. Traffic section
    Von Hulk im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.10.2005, 12:51

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •