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

Menü "springt" bei hoher Auflösung

silverline

Neues Mitglied
Hallo zusammen,

ich habe ein Problem, das ich mir selbst nicht erklären kann. Meine Website funktioniert inzwischen zum Großteil. Allerdings habe ich festgestellt, dass das Menü (nur) an Monitoren mit einer hohen Auflösung springt und die Typografie desgleichen von meinem Light-Schnitt auf bold hüpft. Klickt man beispielsweise von "Start" auf "Projekte", dann sieht man diesen Effekt. Die Struktur des Headers ist auf den Haupseiten genau gleich aufgebaut. Habe auch schon geschaut, ob ich irgendwo einen Tag vergessen habe, das ist aber meiner Meinung nach nicht der Fall. Könnt ihr mir helfen?

Beim betreffenden Code handelt es sich nur um das folgende Extrakt, das auf allen Seiten gleich sein sollte:
HTML:
<div class="container">
    <section class="row">
    <!--LOGO -->
    <div class="four columns">
        <a href="index.html"><img src="./preview/logo.png" class="logo" alt="logo"></a>
    </div>
    <!--END LOGO -->
    <!-- NAVIGATION -->
    <div class="eight columns">
        <nav id="navigationmain">
        <ul id="menu">
            <li class="active"><a href="index.html">START</a></li>
            <li><a href="about.html">ÜBER MICH</a></li>
            <li><a href="portfolio.html">PROJEKTE</a></li>
            <li><a href="contact.html">KONTAKT</a></li>
        </ul>
        </nav>
        <!-- END NAVIGATION -->
    </div>
</section>
</div>
 
Zuletzt bearbeitet:
Das springt auch auf meinem MBP mit 1440x900.

Was mir auf Anhieb auffällt ist, dass die Navi-Links auf den beiden Seiten unterschiedlich breit sind und die floats wohl nicht gecleared wurden. Zumindest hat <nav> eine height von 0.

Gib den Links eine width und setze clearfixes auf die Parents der gefloateten Elemente.
 
Das springt auch auf meinem MBP mit 1440x900.
Vielen Dank für eure Antworten! Das ist mir bewusst, dass noch einige Fehler vorhanden sind. Wichtig wäre für mich aber zunächst wirklich das Menü.

Es ist wirklich komisch, denn an meinem MBP springt nichts. Habe es heute nur zufällig an meinem Arbeitsrechner bemerkt. Die unterschiedliche Breite resultiert aus der relativen Größe, die die Elemente besitzen. Die Elemente sind links ausgerichtet und haben ein padding-left von 30px. Ich habe versucht, den Links eine feste Breite zu geben, dann zerschießt es mir allerdings das Raster. Und was ist mit den "geclearten floats" bzw. clearfixes gemeint? Sorry, ich bin in HTML noch nicht allzu tief drin :-(

btw: height von <nav> sollte nun 65px betragen.
 
Zuletzt bearbeitet:
Das ist wirklich mehr als komisch, denn an meinem MBP springt nichts.

Öffne mal im Firebug das Layout-Tab. Dann siehst du Breitenunterschied auf den beiden Seiten.

Du hast auch noch ein Problem mit den Breakpoints bei den Media-Queries. Die Navi umbricht nämlich in zwei Zeilen, bevor sie zu select-list wird. Die einfachste Lösung wäre eine Implementierung von Bootstrap. Das bringt eine responsive Navigation gleich mit.

Die Klasse .clearfix (googeln) setzt man auf Parents von gefloateten Elementen.
 
Öffne mal im Firebug das Layout-Tab. Dann siehst du Breitenunterschied auf den beiden Seiten.
Das ist ja genau das, was ich nicht verstehe. An meinem MBP (1680x1050) funktioniert alles und die Link-Elemente sind exakt gleich breit. Habe auch nochmal bei Firebug nachgesehen. In Chrome, Firefox und Safari funktioniert die Seite bei mir ohne Sprünge.

Die Klasse .clearfix habe ich nun in das <div>-Element vor den Listenelementen integriert und im CSS hinzugefügt. Allerdings sehe ich keinen Unterschied, bzw. kann nicht sagen, ob sich etwas verändert hat, da die Seite bei mir ja seltsamerweise funktioniert:confused:

Meine nächste Baustelle sind dann tatsächlich die Breakpoints. Werde mich da am Wochenende mal in Bootstrap hineinfuchsen. Danke für den Tipp! :)
 
Zurück
Oben