Navigation Wörter unterstreichen, Farbänderung beim Hovern etc

  • Dankeschön! Hab mal geschaut was du anders gemacht hast und hätte echt nicht gedacht, dass Änderung wie von inline-block zu block dazu beitragen, dass der Strich sich der Wortlänge anpasst.


    Wieso sollte man dich hassen?


    Hab da noch ne Fragen zum Code.


    Was macht das "class="ca/cb/cc""? Hast du das einfach nur geschrieben, falls man speziell an diesem Link etwas ändern möchte geschrieben oder gibts da nochn anderen Zweck?

    Code
    <li><a  class="ca" title="Seite 1" href="#">Seite 1</a></li>



    Oh und beim scrollen, jetzt wo du es netterweise noch gemacht hast:


    Was muss ich ändern/hinzufügen, wenn ich möchte, dass die Leiste nicht sofort beim runterscrollen verschwindet sondern erst nach evtl. 2x runterscrollen?

  • Was macht das "class="ca/cb/cc""? Hast du das einfach nur geschrieben, falls man speziell an diesem Link etwas ändern möchte geschrieben oder gibts da nochn anderen Zweck?

    Code
    <li><a  class="ca" title="Seite 1" href="#">Seite 1</a></li>

    weil ich schreibfaul bin.

    Sinn voll währe es normale namen wie linkhome oder link1 oder sonst was zu geben.

    Sinn der sache ist das man später ,wenn man will direkt auf den link zugreifen kann,bzw den style ändern und co. Eigentlich das gleiche wie eine ID doch mit CLASS kannst du mehrere Links und Einträge die den gleichen CLASS Namen haben auf einmal ändern ,was bei der ID nicht sein darf und auch nicht gehen dürfte

  • Wie krieg ich das hin, dass die Navigation linksbündig ist? Wenn ich zb beim left statt 0px 150px hinschreibe, dann wirds zwar nach links geschoben aber dann auch dieses Citrøn. Da hab ich dann auch ein Problem. Das Citron wird beim drauf drücken auch unterstrichen, was ich aber nicht will. Das soll im Prinzip als Logo dienen. Und es soll in die selbe Zeile wie die Navigation, wir krieg ich das hin?


  • Ich verstehe nicht, was du mit linksbündig meinst. Weil wenn du left 150 pixel himschreibst geht das menü normalerweise nach rechts . Kannst du mir das mal genauer erklären.


    Du machst das Citroën ja auch in ein <h1> rein ? soll die schrift grösser sein als der rest ??

    EDIT

    kuck dir das mal an und sag mal was da noch geändert werden muß

    *** Link entfernt, weil nicht mehr erreichbar ***

  • Frauen mit links und rechts halt lol meinte Rechtsbündig sorry


    Also im Prinzip ist das Perfekt (danke!) nur halt die Nav nach rechts und Citron links also da wo es gerade ist. Kannst du mir sagen, was du da ändern müsstest um das jetzt rechtsbündig zu machen? Ich seh da nur Zahlen und Inline, Block und versteh nicht, wieso das die Position ändert

  • Ob rechts link egal. ich bin meistens auch schwer von Begriff genau wie jetzt . Soll das so aussehen

    *** Link entfernt, weil nicht mehr erreichbar ***


    oder soll erst die navigation kommen und danach das zitrön

    gibt ja nicht viele möglichkeiten


    1.citrön - home -zitrone-kochabend- kontakt

    2.home -zitrone-kochabend- kontakt-citrön

    3citrön - home -zitrone-kochabend- kontakt

    4home -zitrone-kochabend- kontakt-citrön

    5 oder mittig geht auch


    so jetzt haben wir alle Möglichkeiten durch .Wie brauchst du es den jetzt?

  • Ich frage mich immer noch, was bei einem Klick auf ein Menüpunkt im Produktivmodus passieren soll, sprich: wie wird der Content geladen?

    Steckt da ein Ajax-Request hinter oder die Standard Funktionalität der <a>-Tags?


    Denn wenn auf Klick ein Standard HTTP-Request erfolgt ( also kein Ajax! ), sehe ich noch nicht, dass die CSS Pseudoklasse :active hinterher greift.

  • Ich frage mich immer noch, was bei einem Klick auf ein Menüpunkt im Produktivmodus passieren soll, sprich: wie wird der Content geladen?

    Steckt da ein Ajax-Request hinter oder die Standard Funktionalität der <a>-Tags?


    Denn wenn auf Klick ein Standard HTTP-Request erfolgt ( also kein Ajax! ), sehe ich noch nicht, dass die CSS Pseudoklasse :active hinterher greift.

    Stimmt. So greif jetzt nach den standart<a> naturlich nicht das active . Aber da sie ja bis jetzt nix dagegen gesagt hat könnte die ajax methode wohl passen. Fals das doch mit <a> laufen soll muß sie halt auf eins der ersten Beispielen zurück greifen

  • Arne Drews Die Frage ist hoffentlich nicht an mich gerichtet? Ich verstehe nämlich kein Wort


    @ Basti1012

    Also so wie du es gemacht hast, nur dass das Citron ganz links ist also so:


    citron

    home -zitrone-kochabend- kontakt

  • also citrön links und menü rechts ?


    die frage wahr an dich,mich, bzw hat er eine feststellung gemacht was das Script angeht. Hast du deine Seite schon Online ?? Dann läst sich die frage am einfachsten klären ?


    wenn du jetzt die seite wechselst ,und der neue Inhalt angezeigt wird ,ist der Strich dann noch da wo er hinsollte ,oder ist er dann weg ?

  • Da das Menü sowieso schon position fixed hat habe ich das auch mit position gemacht.


    Eigentlich solte man das vermeiden damit man es später einfacher hat um es responsiv zu machen.

    Aber beim Fenster zusammen schieben sieht es zumindest gut aus und es bleibt alles da wo es sein sollte.


    Ist zwar nicht die beste Lösung aber es geht

    *** Link entfernt, weil nicht mehr erreichbar ***


    Und nein hab ich noch nicht

    Was Arne Drews eben meinte ist .Wenn du ein normales Menü hast wo ein Link über <a href="link">home</a> eingebunden ist und keine hilfe von Ajax kommt ,tut eine normales Seite einen Reload durchführen. Nach einen Reload sind sämtliche einstellungen und klicks weg -

    Also wenn du auf HOME klickst und dann da der Strich ist ,ist nach den Reload der Strich wieder weg.

    Du sagtest ja mal am Anfang das du damit die Seite markieren willst wo du gerade bist .

    Was so nicht geht weil wenn reload dann Einstellung weg .


    Um daszu erreichen das der Unterstrich immer da ist wo du gerade bist ,könnte man die Url auslesen ,oder mit Localstorage die Seite wieder markieren wo du gerade bist . Es gibt auch noch andere möglichkeiten ,die ich aber meistens nicht nutze.


    Dann gibt es ajax ,was viele Seiten schon nutzen weil die Seitenladezeit meistens schneller ist und die Einstellungen nicht verloren gehen .

    Wenn du dann Home klickst macht die Seite kein Reloade und der Strich bleibt dann da.


    Sobald du das weiß was du nutzen tust oder willst können wir nach einer Lösung suchen .


    Ich hoffe man konnte das verstehen was ich versuchte zu erklären

  • Ich finde JavaScript und Ajax super und verwende das in fast allen meiner Projekte.

    Aber für mein Empfinden sollte eine grundlegende Funktionalität einer Website auch heute noch komplett ohne Scripte funktionieren.

    Ich als Entwickler weiß ja nie, was für lokale Browser-Einstellung oder Plugins meine Besucher installiert haben.

    Es gibt etliche Script-Blocker, die immer beliebter werden. Da macht es für mich keinen Sinn, grundlegende Menü-Funktionalität auf JS/Ajax zu begrenzen.

    OnTop ja, als Kosmetik und Usability. Aber nicht als grundlegende Funktion.

    Es sei denn, man ist sich bewußt, dass man damit ungewollt User ausschliesst.

  • Habs verstanden. Ich lass es aber erstmal so, wenns mich später stört kann ichs ja noch ändern. Das mit dem responsive könnte später schon n Problem werden, da es am Ende auf jeden Fall responsive sein soll


    Bin direkt an nem neuen Problem:


    Wie füge ich einen Hintergrund ein, der dann auch nur auf der einen Seite bleibt? Oft kann man ja von der Hauptseite runterscrollen und geht im Prinzip durch die ganzen Verlinkungen, die auch in der Navigation zu sehen ist und die Seiten haben ja dann andere Bilder etc. Für die Startseite wollte ich haltn Bild einfügen aber weiß auch nicht in welchen Bereich ich das schreiben muss


    Und hier der Kasten mit den Worten "Erfahre mehr über unsere Kochabende". Wie krieg ich das mittig hin? Ich find den Abstand zwischen Text und Kasten zwar gut aber nicht, dass es links statt mittig ist


  • Du mußt drauf achten was vorher schon mal in der css geschrieben wurde. Ich hatte <ul> schon mal werte gegeben und du hast unten auch für dein button <ul> genommen .Da hat dein button was von den ersten ul was mit bekommen .


    Tolle erklärung ich weiß.Ich kann es nicht besser .

    Sinnvoll wäre es von anfang an mit fle4x-boxen zu arbeiten ,das erleichtert das responsive arbeiten später .

    Nur das zu erklären kann ich nicht .Ich weiß ja auch nicht wie fit du in html css bist ?


    Ich könnte dir vorschlagen du machst erstmal weiter und zum schluß bauen wir das dann mit flex-boxen um . Wenn ich weiß wie es aussehen soll ist das dann auch kein Problem.

    Hier ist erstmal dein button mittig

    *** Link entfernt, weil nicht mehr erreichbar ***


    Nicht wundern habe div raus gemacht ,weil ich noch kein sinn drin sah das es ein ul >li button ist .


    Wegen dein Bild mußt du mir mal genauer erklären.


    Du willst ein Bild haben ( Hintergrundbild ) ???

    Was Hinter alles sein soll ? Also hintergrundbild ,und es soll stehen bleiben ( fixed ) oder wie? Und was heist nur auf einer Seite?

    So das die rechte seite zb ein blaues Bild hat und die linke kein bild oder wie soll ich das verstehen?


    Du merkst schon ich bin etwas schwer von begreifen:sleeping:

  • Mach dich selbst nicht runter, bis jetzt hab ich deine Erklärungen alle verstanden.


    Also hier https://www.theeddynyc.com/ siehst du ja, dass sobald die Seite geladen hat, dass da ein Hintergrundbild ist und wenn du runter scrollst, geht dieser Weg und der Hintergrund ist weiß. Das möchte ich auch so haben. Geht das irgendwie mit background-image: url(...)?


    Oh und habs vergessen vorher zu sagen. Den Button den du vorhin mittig gesetzt hast, die Wörter drinne sind da unterstrichen. Wie krieg ich das weg?

  • Okay, hab das mit dem Unterstrich hingekriegt, danke


    Edit:


    Gibts ne Möglichkeit, sich Bemerkungen im CSS/Head Bereich zu machen? So wie ich es hier im Body mache ? Mir ist der CSS Teil schon viel zu unübersichtlich und ich weiß gar nicht mehr was was ist


  • https://codepen.io/basti1012/pen/pVOrYO?editors=1100


    Kometare stehen in der css und Js damit die eine frage schon mal geklärt wäre. Das mit den Bild habe ich mal 2 rein gemacht weil dein Link was du gepostet hast hat ja mehrere zur Auswahl.

    Fals du das eine meinst wo das Bild langsamer als ist als der Text das nennt man parallax http://pixelcog.github.io/parallax.js/ wofür es schon Scripte gibt.

    Aber ein normales Bild was unter alles anderen liegen soll macht man normalerweise mit background-image rein

Jetzt mitmachen!

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