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

Unerklärliche Verschiebungen

F

fbronko

Neues Mitglied
Moin,

ich hab da mal wieder ein Problem.

Ich möchte eine Navigation bauen allerdings verhaut es sich sobald ich das erste Feld mit Margin oder Padding im Top belege.

mein Html

Code: 
<html>
<head>
<link media="all" href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="navi_header">
 <div id="nh01">
  <span>Punkt A</span>
 </div>
 <div id="nh02" class="aktiv">
  <span class="aktiv">Punkt B</span>
 </div>
 <div id="nh03">
  <span>Punkt C</span>
 </div>
 <div id="nh04">
  <span>Punkt D</span>
 </div>
</div>
</body>
</html>

Mein CSS:

Code: 
* { margin: 0px; padding: 0px; }

div#navi_header { position: relative; width: 980px; height: 30px; margin: 0; padding: 0; font-size: 12px; border: 1px solid #DEDEDE; background-color: #DFDFDF; }

div#navi_header div#nh01 { position: relative; display: inline-block; width: 123px; height: 30px; margin: 0; padding: 0; color: #B9B9B9; }
div#navi_header div#nh01.aktiv { background-color: #A0A0A0; height: 30px; }
div#navi_header div#nh01 span { display: inline-block; height: 30px; margin: 5px 0 0 15px; padding: 0; color: #B9B9B9; }
div#navi_header div#nh01 span.aktiv { color: #000000; }

div#navi_header div#nh02 { position: relative; display: inline-block; width: 123px; height: 30px; margin: 0; padding: 0; color: #B9B9B9; }
div#navi_header div#nh02.aktiv { background-color: #A0A0A0; height: 30px; }
div#navi_header div#nh02 span { display: inline-block; height: 30px; margin: 0; padding: 0; color: #B9B9B9; }
div#navi_header div#nh02 span.aktiv { color: #000000; }

div#navi_header div#nh03 { position: relative; display: inline-block; width: 123px; height: 30px; margin: 0; padding: 0; color: #B9B9B9; }
div#navi_header div#nh03.aktiv { background-color: #A0A0A0; height: 30px; }
div#navi_header div#nh03 span { display: inline-block; height: 30px; margin: 0; padding: 0; color: #B9B9B9; }
div#navi_header div#nh03 span.aktiv { color: #000000; }

div#navi_header div#nh04 { position: relative; display: inline-block; width: 123px; height: 30px; margin: 0; padding: 0; color: #B9B9B9; }
div#navi_header div#nh04.aktiv { background-color: #A0A0A0; height: 30px; }
div#navi_header div#nh04 span { display: inline-block; height: 30px; margin: 0; padding: 0; color: #B9B9B9; }
div#navi_header div#nh04 span.aktiv { color: #000000; }

Wie man sieht, ist der Div-Block von Punkt B verrutscht (nicht mehr oben bündig mit div#navi_header), obwohl er kein margin oder padding hat. Wieso ? Bei den Div-Blöcken von Punkt C und Punkt D ebenfalls.

Irgendwie sehe ich den Wald vor lauter Bäumen nicht mehr :( und würde mich freuen, wenn mir jemand helfen könnte. Vielen Dank !

Frank
 
Eine Navigation baut man mit List-Elementen.
Code: 
<nav>
   <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
   </ul>
</nav>
 
Guten Morgen,

sagen wir mal so, die navigation soll eine anzeige sein, ohne links. Davon ab, tritt der Fehler dann definitiv nicht auf, wenn ich es mit List-Elementen baue ? Ist das garantiert ?

Danke vorab.

Frank
 
Hallo

Ist das garantiert ?
Zum Vergrößern anklicken....

Nein. Das Problem ist das CSS.

Die Grundlage für ein funktionierendes CSS ist sinnvolles HTML. Bei einem sinnvollem HTML sollten Texte immer in geeigneten Elementen stehen wie h1 bis h6, p, li, dt, dt, th, td u.s.w.

span ist dafür nicht geeignet sondern sollte bei Bedarf innerhalb der oben genannten Elemente angewendet werden.

Weiterhin sollte die Semantik beachtet werden.

Unter diesen Voraussetzungen sollten die Navigationspunkte sich innerhalb von ul li-Elementen oder p-Elementen befinden. Bei der Benutzung von HTML5 sollte sich die Hauptnavigation zudem insgesamt in einem nav-Element befinden.

In deinem Fall könnte der HTML-Code für die Navigation also zum Beispiel so

Code: 
<nav>
   <ul>
       <li>Punkt A</li>
       <li>Punkt B</li>
       <li>Punkt C</li>
       <li>Punkt D</li>
   </ul>
</nav>

oder so

Code: 
<nav>
    <p>Punkt A</p>
    <p>Punkt B</p>
    <p>Punkt C</p>
    <p>Punkt D</p>
</nav>

aussehen. Die beiden Möglichkeiten sind sachlich gleichwertig, wobei die Lösung mit ul li populärer ist. Mehr ist nicht erforderlich, kein id, class oder span.

Das Aussehen wird dann mit CSS gestaltet.

Wobei dein CSS mit aktuellem CSS nichts zu tun hat. Von daher sollte es mit den aktuellen Möglichkeiten komplett neu erstellt werden, irgendwelche Korrekturen wären eher sinnfrei.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hi,

habe es auf ul-li umgebaut und erst den selben Fehler gehabt, jetzt aber alles richtig :)

Vielen Dank !!

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

Neueste Beiträge

Zurück
Oben