Frage von jakonator, 24

HTML Margin bei Display:Inline?

Hey, ich bin Anfänger aslo net böse sein ... ich würde ekine im heder die navigation haben aber nicht mit dem fußanfang gleichbündig. ich hatte es mit margin bei div menu probiert aber ich denke das bei display:inline margin net mehr geht [macht auch sinn]. Wie mache ich dann

Die farben von den bereichen ist zur hilfe das fertige design wir besser ;)

Bitte um hilfe

HTML :

<!DOCTYPE html>

Homewoker - mach was du kannst <link href="https://fonts.googleapis.com/css?family=Open+Sans:300:800" rel="stylesheet">

  <header>
    <div class="header">
      <h1>HomeWorker<h1>

        <div class="menu">
          <p>Fächer</p>
          <p>Kontakt</p>
          <p>Impressum</p>
        </div>

    </div>


  </header>

  <section></section>
  <footer></footer>

</div>

CSS :

*{ margin: 0; padding: 0; }

.site { width: auto; margin-left: auto; margin-right: auto; font-family: "Open Sans"; }

header{ width: auto; height: 50px; background-color: lightgreen; }

.header{ width: 1000px; height: 50px; background-color: green; margin-left: auto; margin-right: auto;

}

.header h1 { color: white; display: inline; }

.header p { color: grey; display: inline; margin-left: 3px; margin-right: 3px; font-size: 20px; }

.menu { display: inline; margin-left: 30px; margin-top: -15px; }

section{ height: 1000px; background-color: lightblue; }

footer { height: 50px; background-color: lightgrey; }

Antwort
von medmonk, 9

Vergiss dein bisheriges Markup mal wieder ganz schnell. Den da stimmt einiges nicht. Unter anderem sind unnötige Elemente enthalten, sind falsch verschachtelt bzw. sind die schließenden Tags an falscher Stelle. Für Navigationen verwendet man eigentlich immer unsortierte Listen, die man anschließend über CSS formatiert. Ich habe dein Markup mal kurz umgeschrieben.

header(role='banner').header
  nav(role='navigation')
    h1.logo HomeWorker
    ul.menu
      li: a(href='#') Fächer
      li: a(href='#') Kontakt
li: a(href='#') Impressum
main(role='main') //// primary-content here!
footer(role='contentinfo')
<header class="header" role="banner">
  <nav role="navigation">
    <h1 class="logo">HomeWorker</h1>
    <ul class="menu">
      <li><a href="#">Fächer</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Impressum</a></li>
  </nav>
</header>

<main role="main">
  <!--// primary-content here!
</main>

<footer class="footer" role="contentinfo">
</footer>

Was dein CSS-Reset angeht, ist der Universal-Selektor eine ganz schlechte Wahl. Für mal eben »quick and dirty« kann man es so machen. Für den produktiven Einsatz man allein der Performance wegen besser auf bessere (umfangreichere) Resets zurückgreift. Deis es Meyer's Reset oder Normalize. 

Bei der Formatierung von Texten solltest bei Schriften immer mehrere Fallbacks angeben. Wenigstens einen Schriftsatz + Typ (serif oder sans-serif). Auch dir viel Schreibarbeit sparen kannst, wenn du für padding und margin die Kurzschreibweise angewöhnst. Selbe gilt auch für background und einige weitere Elemente bzw. Eigenschaften. 

LG medmonk 



Kommentar von medmonk ,

Oh sorry, versehentlich beim Kopieren auch den Sourcecode erwischt habe. Der erste Teil ist in Jade (HTML Preprocessor) geschrieben. Für dich eigentlich nur der kompelierte Part relevant sein sollte. 

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten