• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Header = links Titel , mitte Navi, Rechts a-Tag Problem

N

newpower001

Mitglied
Guten Tag,

Habe hier ein kleines Problem. Bitte um Hilfe.

Wie die Überschrift schon sagt, würde gerne im Header links ne Überschrift und in der Mitte eine Navigation einrichten doch da klappt es schon nicht, obwohl ich noch rechts ein a-Tag einfügen möchte.

Schaut es euch an im Bild wie es ist wenn ich nur links die Überschrift(h2-Tag) und in der Mitte die Navigation einstelle.
Da könnt ihr sehen das der h2-Tag unten einfach "raus geschoben" wird.

Wollte Fragen welchen Code ich wie verwenden muss damit alles in einer Linie bleibt und ohne verschiebung.

Mein Code:

HTML
HTML: 
<header>
<nav>
<ul>
<h2 style="font-weight:lighter;"> H2-TAG</h2>
<li><a href="#">tag1</a></li>
<li><a href="#">tag2</a></li>
<li><a href="#">tag3</a></li>
</ul>
</nav>
</header>


Code: 
header { display:block; width:100%; background:#333; }
nav { margin:0px auto; width:100%; height:auto; text-align:center;  }
nav ul { display:block; }
nav a { text-decoration:none; color:#fff; }
nav li { display:inline; }
h2 { color:#aaa; padding:5px;  font-family:tahoma; float:left;}
 

Anhänge

  • h2.PNG
    h2.PNG
    3,8 KB · Aufrufe: 10
Werbung:
Werbung:
Das ist normal, denn h2 ist ein Blockelement und li hast du zum Inlineelement degradiert.
 
Hallo,

ich würde das folgendermaßen lösen, wobei ein Problem noch deine theoretischen Texte sein könnten:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
  <title>Header 01</title>
  <meta name="description" content="HTML5, CSS3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Um alte IE HTML5-tauglich zu machen -->
  <!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
  <style>
  @media all {
  /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
  header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
  display: block;
  }
  * {
  box-sizing: border-box;
  }
  html {
  font-size: 120%;
  }
  body {
  padding: 0;
  }
  header {
  display: flex;
  justify-content: space-between;
  }
  header>* {
  padding: 0;
  margin: 0;
  }
  header nav ul {
  padding: 0;
  margin: 0;
  }
  header nav li {
  list-style-type: none;
  }
  a {
  color: black;
  text-decoration: none;
  }
  }
  </style>
</head>
<body>
  <header>
  <h2>H2-TAG</h2>
  <nav>
  <ul>
  <li><a href="#">tag1</a></li>
  <li><a href="#">tag2</a></li>
  <li><a href="#">tag3</a></li>
  </ul>
  </nav>
  <a href="#">a-Tag</a>
  </header>
</body>
</html>

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Nur weil es fertig war. Hier mit display:table; Wobei Flexbox eine gute Wahl ist.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>

<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}

header {
 display:table;
 width:100%;
}

header h1 {
 display:table-cell;
 width:33.3%;
 background:#aaa;
 padding:10px;
}

header nav {
 display:table-cell;
 width:33.3%;
 background:#bbb;
}
header ul {
 text-align:center;
}
header li {
 display:inline-block;
}

header a {
 display:block;
 padding:20px;
}

header p {
 display:table-cell;
 width:33.3%;
 background:#ccc;
 text-align:right;
}
</style>
</head>
<body>
<header>
<h1>Meine Websites</h1>
<nav>
<ul>
 <li><a href="#">Blog </a></li>
 <li><a href="#">Kontakt </a>
 <li><a href="#">Impressum </a></li>
</ul>
</nav>
 <p><a href="#">Anmelden</a></p>
</header>
</body>
</html>
 
Werbung:
Danke aufjedenfall an euch! Jedoch möchte ich es auch lernen. Kann jemand nen kurzen Text läutern , wo das problem lag. Keine Links oder weiteres. Nur 1-2 Sätze worauf ich achten muss. Danke!
 
Hallo,

für das von dir gewünschte Layout musst du zunächst drei nicht in sich verschachtelte Blockelemente in den header schreiben, z. B. h1, nav und p.

Blockelemente haben standardmäßig eine Breite von 100% und werden untereinander angezeigt.

Bei drei Blockelementen muss also deren Breite auf 1/3 (= 33.3%) beschränkt werden und sie müssen zusätzlich nebeneinander angeordnet werden. Nur durch die Beschränkung auf 1/3-Breite rutschen sie noch nicht nebeneinander.

Für das Anordnen der Blockelemente nebeneinander gibt es mehrere Möglichkeiten, zum Beispiel "display: block" in Verbindung mit float/clear oder "display: table" in Verbindung mit "display: table-cell" oder "display: inline-block" oder ...

Als aktuellste Möglichkeit gibt es das Flexbox-Modell, das beide Schritte (Breite / nebeneinander) in einem erledigt.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben