About Seiten mit CSS Codes anpassen

    Danke Ihr lieben.

    Bin schon ganz gut vorangekommen, jedoch komme ich nun an meine Grenzen.

    Optisch finde ich es schon ganz gut, nur der Link ist leider nicht so breit wie das Feld!

    Dadurch wird die Schrift "unsichtbar", wenn man nicht auf der Schrift bleibt!

    Auch möchte ich den Unterstrich loswerden!

    Ich bekomme dies aber einfach nicht hin. Bei der "Über Firefox"-Seite funktionierte es irgendwie anders.

    Also so schauts aus, wenn der Mauszeiger direkt auf dem Text ist:

    Und so, wenn der Mauszeiger nur im Feld ist:

    Also der Text soll einmal nicht unterstrichen sein

    und einmal soll der ganze "Button" verlinken.

    Geht das?

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Hier werkelt dieser Code von Endor, Abstände und Beschriftung müssen ggf. angepasst werden:

    Zitat von Dharkness

    Füge in #abouts > li bzw. in ul > li und #abouts > li> a bzw. in ul > li > a das → display: block !important; ein.

    Äh, danke, netter Versuch, aber ich verstehe nur Bahnhof. Sorry.

    Nachtrag: Also überall wo #abouts > li:nth-child (x+Zahl) steht?

    Auch beim ersten Eintrag ?

    CSS
    #abouts > li:nth-child(n+1) {
        min-width: 170px !important;
        max-width: 170px !important;
}
    Zitat von grisu2099

    Stell mal deinen Code für die Seite hier ein - das wird dann einfacher...

    Mach ich!

    Ich weiß, da sind noch ein paar "Zeilen" Code, die ergeben nicht wirklich Sinn.

    Jedoch beißen sie sich nicht, deswegen räum ich später auf!

    Die definierten Textfarben innerhalb der "Schaltflächen" haben,

    warum auch immer keinen Einfluss!

    Da habe ich globale Farben manipuliert, um zu meinem gewünschten Ergebnis zu kommen.

    Ist also noch so einiges im Argen.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (14. Januar 2022 um 12:25)

    Mal so ganz allgemein für alle, der Zusatz:

    appearance: none !important;

    gehört nicht in einen Code der in der userContent.css eingetragen wird.

    Der ist wenn dann nur für die userChrome.css gedacht.

    -moz-appearance (-webkit-appearance) - CSS | MDN
    Die CSS-Eigenschaft -moz-appearance wird von Gecko (Firefox) dazu verwendet, um ein Element mit dem nativen Stil der Plattform anzuzeigen, wie er im…
    developer.mozilla.org
    Zitat

    Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden

    Zitat von 2002Andreas

    Weil du sie falsch angesprochen hast ;)

    CSS
    #abouts > li:nth-child(-n+14) > a {
    color: yellow !important;    
}

    Danke, das hat nun geklappt.

    Das ganze sieht nun in etwa so aus:

    Auch das mit der "Schaltfläche" ist besser geworden,

    aber noch nicht so wie gewünscht!

    Zum Einen habe ich folgendes eingefügt:

    CSS
    ul > li > a {
display: block !important;
}

    Zum Anderen jenes, was den Unterstrich entfernte.

    CSS
            a{
        text-decoration:none!important;
}

    Was die Schaltfläche betrifft, ist es nun so,

    vor dem Text kein Link.

    Hinter dem Text bis ca 5-10px bis zum Rand.


    Nachtrag:

    Oh. 8| Danke.

    Dann nehme ich diese Zeilen mal ganz schnell raus.

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    Das ganze sieht nun in etwa so aus:

    So wäre es aufgeräumt ;)

    Wobei die margin und padding Werte auch in einer Reihe stehen könnten:

    margin: 3px 20px 5px 55px !important:

    oben..rechts..unten..links

    Und so wäre es noch kürzer:

    CSS
    #abouts > li:nth-child(-n+14) {
        background: #5b5b66 !important;        
        padding-left: 40px !important;
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        border-radius: 8px !important;
}
    Zitat von 2002Andreas

    So wäre es aufgeräumt ;)

    Wobei die margin und padding Werte auch in einer Reihe stehen könnten:

    margin: 3px 20px 5px 55px !important:

    oben..rechts..unten..links

    Danke, aber das kommt später.

    Z.Z. beschäftige ich mich noch mit den Schaltflächen.

    Wie der Link auch hinter dem Text erweiter werden kann

    habe ich rausgefunden.

    CSS
    ul > li > a {
display: block !important;
    margin-right: -15px !important;
}

    Nur wie "erweitere" ich den Link vor dem Text?

    Denn wenn ich irgendwas mit margin-left mache,

    verschiebt sich ja der Text!

    Gruß

    Mira

    PS: Ich gehe jetzt erst mal putzen :D

    Fertig mit putzen!

    Zitat von 2002Andreas

    Und so wäre es noch kürzer:

    CSS
    #abouts > li:nth-child(-n+14) {
        background: #5b5b66 !important;        
        padding-left: 40px !important;
        border-color: dodgerblue !important;
        border-style: outset !important;
        border-width: 3px !important;
        border-radius: 8px !important;
}

    Und nein Andreas

    kürzer geht es nicht.

    Es zerhaut mir sonst das Layout.

    Mit <3lichem Gruß

    Mira

    2 Mal editiert, zuletzt von Mira_Belle (14. Januar 2022 um 13:48)

    Hallo Mira_Belle,

    hier ergibt das * das ** als Ergebnis.

    *

    **

    Es grüßt,

    Ralf

    Einmal editiert, zuletzt von Dharkness (14. Januar 2022 um 14:28)

    Weder noch.

    Es geht um den Button und dem "Verweis" (Link)

    Mittig steht ja bei mir der Text, z.B.

    Hinter diesem Text ist dank des Eintrags

    CSS
    ul > li > a {
display: block !important;
    margin-right: -15px !important;
}

    der "Verweis" (Link) aktiv, sodass ich nicht direkt auf den Text klicken muss.

    margin-right ermöglichte dies.

    Jedoch vor dem Text verändert sich zwar die Hintergrundfarbe,

    aber der "Verweis" (Link) ist nicht aktiv, da kann ich klicken so viel ich will.

    Es tut sich nichts.

    Arbeite ich hier mit margin-left verschiebt es den Text.

    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Zitat von 2002Andreas

    Und Beitrag 1038 der Code?

    Du Ungeduld Du. ;)

    Mit folgendem Code klappt es.

    CSS
    ul > li > a {
display: block !important;
    margin-right: -15px !important;
}

:link {
   display: block !important;
   padding-left: 50px !important;
   margin-left: -45px !important;
}

    Danke für die Hilfe.

    So, nächste Seite .... 8o

    Gruß

    Mira


    PS:

    Kleine Korrektur!

    margin-right von -15px auf -20px erhöht.

    Nun ist es perfekt.

    Mit <3lichem Gruß

    Mira