Alex12345: Doctype html zerstört Layout der Navigation

SELF-Forum

Doctype html zerstört Layout der Navigation

Alex12345
– Informationen zu den Bewertungsregeln

Hallo, wenn ich <!DOCTYPE html> in mein Projekt hinzufüge, wird das Layout meiner Navigation zerstört. Ohne <!DOCTYPE html> steht es wie gewünscht nebeneinander. Mit <!DOCTYPE html> dagegen werden die Listeneinträge untereinander angeführt und die CSS Anweisungen nicht beachtet.

Ich hoffe ihr könnt mir helfen

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body><div id="all">
<div id="Navigation">
<ul>
	<li class="borderright navigationslink"><a href="" >A</a>
	<li class="borderright navigationslink"><a href="" >B</a>
	<li class="borderright navigationslink"><a href="" >C</a>
	<li class="borderright navigationslink"><a href="" >D</a>
	<li class="borderright navigationslink"><a href="">E</a>
	<li class="borderright navigationslink"><a href="">F</a>
	<li class="navigationslink"><a href="#kontakt">G</a>
	</ul>
	</div>

</div>
</body>
</html>


#all {
margin: -9px auto;
padding: 0;
width: 1094px;
background: white;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #3e3c3c;
}

#navigation {
width: 1094px;
position:fixed;
z-index: 10;
}

#navigation ul {
line-height: 48px;
margin: 0;
padding: 0;
}

#navigation li {
float: left;
position: relative;
list-style: none;
}

#navigation ul li a {
text-decoration: none;
text-align: center;
height: 48px;
width: 136px;
display: block;
font-family: verdana;
text-decoration: none;
color: white;
}

.borderright{
border-style: solid;
border-width: 0 1px 0 0;
border-color: black;
}

.navigationslink{
background:-moz-linear-gradient(bottom,#595656,#8d8b8b);
background:-webkit-gradient(linear,left top,left bottom,from(#595656),to(#8d8b8b));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b595656',endColorstr='#8d8b8b');
background-image: linear-gradient(#595656 0%, #8d8b8b 100%);
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Doctype html zerstört Layout der Navigation

    MrMurphy1
    +1 Informationen zu den Bewertungsregeln

    Hallo

    Mit

    <!DOCTYPe html>

    teilst du dem Browser mit, dass der Quelltext den Regeln von HTML5 entspricht.

    Dazu gehört unter anderem, dass bei ID- und Klassennamen die Klein- und Großschreibung beachtet werden muss. Wobei man die grundsätzlich beachten sollte.

    id="Navigation"

    wird im CSS also mit

    .Navigation

    statt mit

    .navigation

    angesprochen.

    Gruss

    MrMurphy

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Doctype html zerstört Layout der Navigation

      Gunnar Bittersmann Homepage des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      @@MrMurphy1

      Mit

      <!DOCTYPe html>

      teilst du dem Browser mit, dass der Quelltext den Regeln von HTML5 entspricht.

      Prust. Wir wissen doch beide, dass das oft nicht der Fall ist.

      Und spätestens seit HTML5 hat die DOCTYPE-Angabe nichts mehr mit Regeln zu tun. Sie dient allein dazu, Browser aus dem Quirksmodus herauszuholen.

      Dazu gehört unter anderem, dass bei ID- und Klassennamen die Klein- und Großschreibung beachtet werden muss.

      WTF, im Quirksmodus werden ID- und Klassennamen case-insensitiv verarbeitet? Wieder was gelernt.

      Und gleich wieder vergessen. Das einzige, was man über den Quirksmodus eigentlich wissen muss, ist, dass man die Browser da rausholen sollte.

      LLAP 🖖

      --
      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Doctype html zerstört Layout der Navigation

    Matthias Scharwies (Versionen)
    +3 Informationen zu den Bewertungsregeln

    Servus!

    MrMurphy1 hat die Groß-und Kleinschreibung von HTML und CSS-Selektoren schon angesprochen.

    Hier nur ungefragt ein paar kleine Tipps:

    1. Verwende HTML-Markup und Selektoren wie Klassen und IDs so sparsam wie möglich:
    <body>

<nav>
  <ul>
	<li class=""><a href="" >A</a>
	<li class=""><a href="" >B</a>
	<li class=""><a href="" >C</a>
	<li class=""><a href="" >D</a>
	<li class=""><a href="">E</a>
	<li class=""><a href="">F</a>
	<li class=""><a href="#kontakt">G</a>
  </ul>
</nav>

</body>

    Ich habe die Klassen entfernt und einiges zusammengefasst:

    div id="all" ist völlig in body aufgegangen.

    div id=#Navigation ist mit dem nav-Element besser bedient.

    Die Klassen für die Listenelemente sind nicht nötig:

    nav li {
  display:inline-block;
  list-style: none;
  border-right: 1px solid black;
  background: #8d8b8b; /* Fallback für IE8 */
  background: linear-gradient(#595656 0%, #8d8b8b 100%);
}

nav li:last-child { 
  border: 0; 
}

    Ich habe den Hintergrund von .navigationslink integriert. Die alten Versionen brauchst du nicht, dafür evtl. einen fallback in einer Flächenfarbe.

    Der rechte Rand aus ehemals .borderright ist jetzt überall, außer im letzten Element, dem er mit der strukturellen Pseudoklasse last-child wieder entfernt wurde.

    1. Du verwendest feste Pixelmaße. Wie sieht das auf einem SmartPhone aus?

    Du hast 2 Möglichkeiten:

    Entweder relative Maße in em unter Verzicht auf Breitenangaben. Die Breite der nav li könntest du mit calc festlegen:

    nav li a {
  width: calc(100% / 7);
}

    Oder du verwendest Flexbox. Dort benötigst du keine Breitenangaben, das erledigt der Browser des Anwenders für dich.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun - packen wir's an: ToDo-Liste gewünschte Seiten
    Beitrag melden
    +3
    Informationen zu den Bewertungsregeln

    1. Doctype html zerstört Layout der Navigation

      Gunnar Bittersmann Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      @@Matthias Scharwies

      1. Verwende HTML-Markup und Selektoren wie Klassen und IDs so sparsam wie möglich:
      	<li class=""><a href="" >A</a>

      Dann kann man sich das class-Attribut aber ganz sparen: <li><a href="">A</a>

      Entweder relative Maße in em unter Verzicht auf Breitenangaben. Die Breite der nav li könntest du mit calc festlegen:

      nav li a {
  width: calc(100% / 7);
}

      Du meinst nav li, nicht nav li a?

      Und statt width wäre hier eher min-width angebracht. Wenn ein Siebentel nicht ausreicht, soll der Menüpunkt ja trotzdem voll zu sehen sein.

      LLAP 🖖

      --
      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

  3. Doctype html zerstört Layout der Navigation

    Gunnar Bittersmann Homepage des Autors
    +2 Informationen zu den Bewertungsregeln

    @@Alex12345

    Matthias hat schon einiges gesagt, aber noch nicht alles.

    <html>

    Hier solltest du die Sprache des Seiteninhalts angeben. (Warum?)

    Wenn dieser auf deutsch ist:

    <html lang="de">

    <title>Title</title>

    Hier denkst du noch dran, einen sinnvollen Seitentitel einzusetzen?

    <body><div id="all">

    Wie Matthias schon sagte (im folgenden abgekürzt WMSS) und at auch: dieses div ist überflüssig.

    <div id="Navigation">

    WMSS, dieses div wäre gern ein nav-Element. Das hilft menschlichen und nicht-menschlichen Seitenbesuchern, die Seitenstruktur zu verstehen.

    	<li class="borderright navigationslink"><a href="" >A</a>
	<li class="borderright navigationslink"><a href="" >B</a>
	<li class="borderright navigationslink"><a href="" >C</a>
	<li class="borderright navigationslink"><a href="" >D</a>
	<li class="borderright navigationslink"><a href="">E</a>
	<li class="borderright navigationslink"><a href="">F</a>
	<li class="navigationslink"><a href="#kontakt">G</a>

    Benenne Klassen nicht nach der gegenwärtig(!) gewünschten Darstellung, also nicht sowas wie borderright.

    Außerdem ist die Klasse überflüssig, um das erste bzw. letzte Geschwisterelement anzusprechen gibt die Pseudoklassen :first-child/:last-child (:first-of-type/:last-of-type). WMSS – und MrMurphy1 hätte sagen können, denn hier sind sie angebracht.

    Die Klasse navigationslink ist ebenfalls überflüssig; die Listitems kannst du per #Navigation li ansprechen. (Falls du bei der Großschreibung der ID im HTML bleiben solltest. Ich empfehle Kleinschreibung.)

    (Ebenfalls WMSS. Er verwendete nav li – kann man machen, wenn es denn nur ein nav-Element im Dokument gibt (oder wenn es mehrere gibt, die alle gleich gestylt werden sollen).

    #navigation ul li a {

    Der Selektor ist überspezifiziert. Mache Selektoren immer so kurz wie möglich! Hier also #navigation a (wenn du die ID klein schreibst).

    #all {
margin: -9px auto;

    -9px ist eine magic number – der Wert mag bei dir passen, aber nicht zwangsweise bei anderen. Sowas sollte man immer vermeiden.

    Was willst du mit dem negativen margin überhaupt erreichen? Was auch immer, das geht anders.

    width: 1094px;

    Mein Viewport ist – wie der vieler anderer – deutlich schmaler als 1094px. WMSS solltest du keine Breiten von Boxen in px angeben. Responsive design

    Damit sich der Inhalt dem Viewport anpassen kann, ist noch die eine Angabe in den head hinzuzufügen:

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

    border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #3e3c3c;

    Das hättest du auch zu border: 1px solid #3e3c3c zusammenfassen können.

    #navigation ul {
line-height: 48px;

    Nein. line-height dient dazu, den Abstand zwischen Zeilen zu regeln. Das darf nicht dafür missbraucht werden, Abstände über und unter einem Text festzulegen, das ist mit padding zu regeln.

    font-family: verdana;

    Hier solltest du noch eine generische Schrift angeben, in dem Fall sans-serif:

    font-family: Verdana, sans-serif;`

    Es haben ja nicht alle Verdana auf ihrem System. (Zumal Verdana aussieht wie 1996 – etwas unschön.)

    background:-moz-linear-gradient(bottom,#595656,#8d8b8b);
background:-webkit-gradient(linear,left top,left bottom,from(#595656),to(#8d8b8b));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b595656',endColorstr='#8d8b8b');
background-image: linear-gradient(#595656 0%, #8d8b8b 100%);

    Die Vendor-Präfixe für linear-gradient oder gar MS-Filter sind längst nicht mehr erforderlich – WMSK (wie Matthias stillschweigend korrigierte).

    LLAP 🖖

    --
    “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Doctype html zerstört Layout der Navigation

      Gunnar Bittersmann Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      @@Gunnar Bittersmann

      Responsive design

      Den Artikel gibt’s auch auf deutsch.

      LLAP 🖖

      --
      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln