Problem Linkspalte schiebt sich unter ein Banner beim Mouseover

    Hier meine Problemseite.
    www.freier-fluglehrer.de/packservice.html


    - bei mir schiebt sich oben in der Nav-Leiste das sich öffnente Fenster unter ein Bannerbild. Wie vermeide ich dies?
    - was mir auch unklar ist. Kann ich für eine Webseite sprich ne ganze Homepage auch verschiedene CSS-Dateien haben? Sprich eine für Nav, eine für Section. Nur um ein wenig mehr Überblick zu haben. Selbst wenn man alles auskommentiert verliert man schnell den Überblick. Meine ich verliere schnell den Überblick.


    Falls jemandem noch was gravirendens Auffällt ruhig Kritik, aber bitte nicht so hart ins Gericht gehen. Bin seit Januar erst dabei völliger Anfänger was HTML5/CSS betrifft.



    Hallo und willkommen im Forum!
    Wieso sollten wir kritisieren? Das ist schließlich ein Forum für Anfänger! Und glaub mir, meine ersten Versuche sahen nicht so gut aus :)


    Kleiner Tipp: heutzutage sieht man im Internet eher schlichtes Design. Blinkende Gifs, komplette Hintergrundbilder, all das ist out.
    Schau die verschiedene bekannte Webseiten an. Kacheln sind in. Scrolldesign, per JavaScript (unterschiedlich schnelle Scrollen, seitliches einscrollen). Heutzutage spielt man eher auf mobile geräte an.


    Und ihr als Packdienst, werdet vermutlich häufig Leute haben, die mit dem Smartphone auf die Seite kommen. Die werden durch ewige Ladezeiten für Hintergrundbilder etc einfach verschreckt.
    Also, guck dich ein wenig auf bekannten Seiten um, schau dir das Design an und versuche diesen Stil mit den kacheln nachzubauen. Muss ja nicht gleich mit Effekten und allem sein.


    Guckst du hier: Mobile Validator Der gibt dir Tipps.


    Dann hast du auch kein problem mit dem Überlappen mehr ;)


    Ansonsten von der tech. Seite:
    HTML: Chapeau, absolut valide, Respekt
    CSS: ein paar kleine Fehler haben sich eingeschlichen (zB dritter Befehl: "haeder", antatt "header") Und warum baust du in der NAvigation 6 versch. Gruppen ein, die alle das gleiche machen? Stampf das doch auf eine Gruppe ein!
    Und zu deinen Bildern: Vielleicht funktioniert es mit position: absolute; und z-index.

    The Scout: danke habe mich auch ziemlich rumgeärgert um es valide zu bekommen. Wollte auf so viel Div-Tags verzichten wie möglich. Es wurde nur immer mehr. Und anfangs hatte ich noch Probleme damit jetzt weis ich in etwas wie ich damit umgehen muss.


    Das mit der Kachtel war ein Spiel. Die Blumentapette finde ich so schrecklich. Hatte eher an ein schönes Wolkenbild mit blauen Himmel gedacht als Hindergrundbild oder eben passend dazu etwas was mit dem Fliegen zu tun hat. Aber die meisten von uns wollen an der Wolke verbringen. ;)
    Ich wollte mich später noch um so ein Design kümmern, dass eben bei kleine Auflösungen nicht mehr alles Geladen wird. Ich glaube das Zauberwort war jQuery oder so.


    Du wirst es nicht glauben aber das mit dem CSS und der Nav habe ich so aus dem Netz. Ich werde das mal anschauen und dann ändern.


    Ja hat geholfen. Danke

    Nein, wenn bei kleinen Auflösungen nicht alles gezeigt werden soll, ist das Zauberwort "Responsive Webdesign (RWD)".
    Aber das mit den Kacheln meinte ich eher, wie zB. beim Google Play Store: alles schlicht in weiß, mit ein paar Farben als Highlighter, und großen Linkflächen (meist rechteckig, daher mein Begriff "Kacheln"), damit man auch auf kleinen Bildschirmen gut trifft.


    Am Besten ist es bei Design wirklich, man setzt sich erst mit einem Grafikbearbeitungsprogramm, zB Photoshop (kostenpflichtig) oder GIMP (kostenlos) hin, und spielt damit rum, bis man ein schönes Design hat. Am Besten auch Rückmeldung von anderen holen.
    Wenn das Design gefällt, kann man sich dann überlegen, welche Struktur dem zu Grunde liegt, und dieses in HTML nachbauen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden