Menü und CSS

  • Hallo anka,

    Du hast mir im Post Menügrafik responsiv machen folgenden Code gepostet:


    .nav-pills > li > a {

    padding-top: 0;

    padding-bottom: 0;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

    }

    .nav-pills > li > a {

    padding-right: 0;

    padding-left: 0;

    }


    Konnte den erst leider jetzt Ausprobieren. Das Ergebnis sieht erstmal gut aus. Nebeneffekt ist allerdings das alle Menüs betroffen sind.

    z.B im Footer habe ich ein Menü mit Kontakt Impressum etc. Das Stellt sich dann so dar " KontaktImpressumDaten..." .

    Sieht nicht gut aus. Was kann ich tun um es so Aussehen zu lassen " Kontakt Impressum Daten...".

    Es wäre schön den obigen Code zu erweitern um Leerzeichen oder einen Tab einzufügen.


    Vielen Dank für den Code und vorab mal für eine Lösung.


    Gruß

    Worf

  • Die Subdomain www. ist auf deinem Webserver nicht richtig konfiguriert. Auf jeden Fall geht deine Seite so nicht. Sie ist nur ohne www. erreichbar.

    Eine Leertaste einfügen geht über CSS nicht. CSS ist nur für den Style (das Aussehen) verantwortlich. Du kannst aber den Abstand zwischen Elementen mit dem CSS Befehl margin (w3schools margin) beeinflussen. Wenn du willst, dass die CSS Änderung nur auf das Menü im Footer Einfluss hat musst du dem entsprechenden Menü (im Menümodul --> nicht unter Menüs) ein suffix mitgeben damit es eine entsprechende CSS Klasse erhält, die du ansteuern kannst...

  • Ich würde es an deiner Stelle folgendermassen machen:


    1. Erweitere beim Menümodul den Menüklassensuffix. Im Moment steht dort " nav-pills". Mache daraus ein " nav-pills grafik". Achte dabei genau auf die Leerzeichen.


    2. Ändere den vorhandenen Code im user.css in


    Der Vorteil dieser Methode wäre, dass die von Protostar vordefinierten Klassen unangetastet bleiben und weiterhin wie vorgesehen verwendet werden können.

  • Nur aus Pedanterie: Geht schon. Über ::after bzw. ::before und content: "\00a0"; . So könnte man z.B. auch einen Separator einfügen. content: "\00a0|\00a0"; => Item1 | Item2 | Item3

    Stimmt ich habe auch erst drüber nachgedacht das mit pseudoklassen zu erwähnen. Vielleicht wäre nicht sinnvoll in diesem Anwendungsfall die bessere Wortwahl. Danke für die Anmerkung :)

  • Hallo Worf,


    A) Dieser Code:


    .nav-pill.margin-right: 20pxs > li > a {

    padding-right: 0;

    padding-left: 0;

    }


    das rote, ist komplett falsch (grundsätzliche Erklärung dazu unten).


    B) Das hier:

    Code
    1. .nav-pills > li > a {
    2. padding-right: 0;
    3. padding-left: 0;
    4. }

    gibst Du wieder rein (bezieht sich auf obiges Menü).


    Generelle Erklärung zu B.) Eintragung in der user.css


    In der 1. Zeile kommt die Info, welches Segment angesprochen wird plus die öffnende Klammer:


    Um beim obrigen Beispiel zu bleiben:


    .nav-pills > li > a {


    Ab 2. Zeile kommen die "Anweisungen":


    padding-right:0;


    Die 3. Zeile hat auch noch eine Anweisung:


    padding-left: 0;

    wenn fertig: eine schließende Klammer }

    ------------------


    C). Entweder Du machst Lösungsvorschlag von firstlady, das wäre so:


    Code
    1. .footer ul.nav li {
    2. margin-right:20px;
    3. }

    oder die von Anka > siehe #9 und #11


    Ich hoffe, Du hast während meines postes nicht wieder was Neues gemacht, sonst stimmt mein obiges nicht mehr ...


    Liebe Grüße

    Christine

  • Hallo Cristine, hab noch nichts neues gemacht!


    Hab aber mal ne Frage. Hänge ich den Code unten an oder muß ich den irgendwo Integrieren?


    Mein Code sieht z.Z so aus:


    .die_klasse_des_menus img { width: 100%; height: auto; }


    .nav-pills > li > a {

    padding-top: 0;

    padding-bottom: 0;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

    }

    .nav-pills > li > a {

    padding-right: 0;

    padding-left: 0;

    }


    Das wirkt sich so wie ich das sehe auf alle Menüs aus, nun schreibst du:


    .footer ul.nav li {margin-right:20px; }


    ich würde das gerne Verstehen und nicht irgendwo einen Codeschnipsel eintragen.Hab halt keine Kenntnisse. Für euch langweiliges Tagesgeschäft, für mich Neuland.

    GrüßeWorf

  • Das hier war 1 Lösung (dieser gilt für den footer):

    Wenn du in den nav-pills noch ein margin-right: 20px einfügst sollte es einen Abstand geben.


    Das wirkt dann natürlich auf alle Navigationselemente. Wenn du das nicht willst, kannst du das auch auf den footer eingrenzen.

    hattest Du aber einen falschen Code reingegeben. Siehe #15 > A)

    & habe Dir dafür diesen vorgeschlagen:

    Code
    1. .footer ul.nav li {margin-right:20px; }

    dieser gilt für den footer.


    Die 2. Lösung von Anka, schrieb ich ja auch, siehe #9 und #11 wäre für Mainmenü und footer.

    Der Vorteil davon, steht auch bei ihrer Erklärung.


    Dein neueres post:

    ich würde das gerne Verstehen und nicht irgendwo einen Codeschnipsel eintragen.Hab halt keine Kenntnisse. Für euch langweiliges Tagesgeschäft, für mich Neuland.

    das war aber jetzt nicht nett.


    Und wieder neuestes post:

    Beim Footer ist alles ok.


    Beim Main Menu allerdings nicht. Hat das mit den grafischen Elementen zu tun?

    Ja. Wolltest Du ja so haben. Also, dass Grafik oben bestehen bleibt, aber diese umgebenden Rahmen weg sollten. Und diese sind mit Ankas 2 Codes vom 1. Thread weg.


    Wie soll es denn jetzt sein? Das 2. Mainmenü gibt es ja erst seit jetzt. Also nach den vorigen posts.


    Gut, soeben gesehen. Ans Ende der user.css:

    Ist für das Mainmenü

    Code
    1. ul.nav-pills li {
    2. margin-right:20px;
    3. }
  • Fürs Verstehen gibt es hier eine Minieinführung in CSS:

    https://www.time4joomla.de/joo…wie-funktioniert-css.html


    "ul" ist ein HTML-Element und steht für "undefined lines" = "Unsortierte Liste" - also sowas hier:

    Code
    1. <ul>
    2. <li>1. Zeile</li>
    3. <li>2. Zeile</li>
    4. </ul>

    Ein HTML-Konstrukt das häufig für Menüs genommen wird.

    Wenn du tiefer in HTML und CSS einsteigen möchtest bedenke bitte, das andere Menschen teils sehr umfangreiche Bücher dazu geschrieben haben oder umfangreiche Webseiten zu dem Thema erstellt haben. Gern helfen wir dir, aber wenn du nun auch noch eine umfangreiche Erklärung haben möchtest, dann werden die Möglichkeiten und der Sinn und Zweck dieses Forums gesprengt. Wir geben Hilfe zur Selbsthilfe und es sollte dir ein leichtes sein, im Internet erklärende Seiten zu finden. Hier findest du sehr gute Erklärungen und auch anschauliche Beispiele, die dir sicherlich helfen:

    https://www.mediaevent.de/

    https://wiki.selfhtml.org/



    Axel

  • Zitat
    Zitat von Worf
    ich würde das gerne Verstehen und nicht irgendwo einen Codeschnipsel eintragen.Hab halt keine Kenntnisse. Für euch langweiliges Tagesgeschäft,
    für mich Neuland.

    das war aber jetzt nicht nett.

    Sorry, Ich musste mal für einen bekannten Discounter in der PC Hotline Arbeiten. Da hätte ich gern richtig geholfen, konnte das aber nicht, da ich stets ein Zeitlimit einhalten musste......

    Villeicht habe ich deshalb geschrieben das das für euch ein ( langweiliges Tagesgeschäft ist ). war nicht so gemeint.