.css NUR für das Tag-Widget

  • Bitte um Hilfe.
    Ich möchte in meiner custom.css zu meinem Theme Formatierungen hinterlegen, die sich ausschließlich auf das Tag-Widget beziehen.

    Ein grauer Hintergrund mit Rahmen und runden Ecken, sodass dieses besser zu/in meine Sidebar passt.

    Wer nachschauen möchte: http://www.bikershrek.com

    Die generelle Formatierung:

    Code
    .sidebarbox {
    color:#222222;
    width:166px;
    padding:.5em;
    border: 1px solid #2361A1;
    background-color:#EEEEEE;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    }

    Danke. :-)

    Einmal editiert, zuletzt von bikershrek (27. August 2010 um 20:03)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Code
    .widget_tag_cloud {
    color:#222222;
    background-color:#EEEEEE;
    padding:.5em;
    border: 1px solid #2361A1;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    }
  • Zur weiteren Perfektionierung meines Tag-Widget - bitte ich erneut um Hilfe.

    - Bei Mouseover über einen einzelnen Tag soll der Hintergrund dieses Tag farbig werden - diese farbige Markierung soll ähnlich dem Widget insgesamt auch abgerundete Ecken bekommen - die Textfarbe dieses Tag soll sich dabei ändern in weiss

    - Zeilenabstand der Tag-Zeilen 1,5-fach (sind mir aktuell zu dicht)

    Geht so was?
    Danke schon Mal vorab. :-)

    Habe schon etliches probiert - klappt einfach nicht - meist wird das gesamte Widget farbig aber nicht nur der einzelne Tag, der mit de Maus überfahren wird.

  • Jupp, Stichwort ist die Pseudoklasse, in diesem Fall a:hover, das mit background-color: #xyz den gewünschten Hintergrund bekommt.

    Und für die Zeilenhöhe gibt es line-height - wenn die Schriftgrösse mit 12px definiert ist, also line-height:18px, ich glaube, es geht auch 150%, bin da aber nicht sicher.

    LG Domi

  • Sorry, "müsste" reicht mir nicht wirklich. :-)
    Hat denn niemand eine Idee?
    Gern auch die konkreten Codezeilen hier her.

    Zeilenabstand und Hintergrund des Link habe ich mit :

    Code
    line-height: 1.5;
    a:hover background: #2361A1;

    versucht.

    Auch fehlt mir noch die Blockdarstellung des farbigen Hintergrund - mit runden Ecken.
    Bei einem normalen Link (außerhalb des Tag-Widgets) habe ich folgenden Code:

    CSS
    .custom #content a.more-link {
    background: #2361A1; color: #FFF !important;padding: 3px 3px; margin-top:10px;text-decoration: none;
    -moz-border-radius-bottomleft:4px;
    -moz-border-radius-bottomright:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
    -webkit-border-bottom-right-radius:4px;}


    Damit schaut der Link wie von mir gewünscht aus - siehe Grafik unten.

    Nur wie füge ich beide Codes - diesen hier und den aus #2 funktionierend zusammen? :-)

  • OK, also erstens: Du fragst hier nach Hilfe, und offensichtlich willste pfannenfertige Lösungen und bist nicht bereit, etwas mal selbst zu erarbeiten - wenn Dir müsste nicht reicht, stellen sich mir als Antwort die Nackenhaare auf!

    Runde Ecken - auch das wüsstest Du, wenn Du mal was lesen würdest - gibt es "aus der Dose" erst bei CSS3, sonst stellt sie nur FF, Opera und Safari dar, insbesondere bei IE musst Du halt die verschiedenen Rezepte anwenden, die es im Netz zuhauf gibt (zB. Bilder).

    Sorry, mehr gibt es dazu von mir nicht.

    LG Domi

  • Hm. Solche wie dich Domino5702 - gibt es anscheinend in jedem Forum.
    Finde ich immer wieder schade.
    Erst irgendwelche Brocken posten, die ich als Laie nicht interpretieren kann und die so - wohl auch nicht funktionieren - und dann auch noch persönlich werden.
    Anscheinend weißt du es selbst nicht genau.

    Die beiden .css Codes, die ich hier veröffentlicht habe, funktionieren sehr wohl.
    Was du mit dem IE willst - ist mir auch nicht wirklich klar.
    Auf das Teil habe ich noch nie Rücksicht genommen - wer den nutzt ist selber schuld - ist aber bitte nur meine Meinung.

    Das ich nichts - wie du schreibst pfannenfertiges wünsche - sieht man wohl daran, dass ich fertigen und auch funktionierenden Code hier veröffentlicht habe.
    Nur ich bekomme diesen eben nur nicht zusammen.

    Auch habe ich schon mehreres probiert - nur es funktioniert eben nicht.
    Um einzuschätzen, ob es überhaupt klappen könnte - und wenn ja wie - dazu denke ich, sind Foren u.a. da.
    Wenn du das anders siehst - dann antworte eben einfach nicht auf solche Fragen wie meine.

    Ich hoffe dennoch auf weitere, produktive Hilfe.
    Danke. :-)

    Einmal editiert, zuletzt von bikershrek (31. August 2010 um 09:50)

  • Moin,

    ohne jetzt auf Euren Disput einzusteigen ein Hinweis zu Folgendem:

    Zitat

    Was du mit dem IE willst - ist mir auch nicht wirklich klar.
    Auf das Teil habe ich noch nie Rücksicht genommen - wer den nutzt ist selber schuld - ist aber bitte nur meine Meinung.

    Da liegst Du falsch. Ich wiederhole das Beispiel nur zu gern, im Konzern und ebenfalls in einer benachbarten AG werden zwangsweise jede Menge IEs, davon massenhaft 6er Versionen (es geht tatsächlich nicht anders) genutzt. Gutes Template-Design zeichnet sich auch und insbesondere dadurch aus, dass auch diese Nutzer ins Boot geholt werden. Oder würdest Du als Geschäftsinhaber auf 30% und mehr potentieller Kunden verzichten wollen, nur weil Deine Eingangstür keine <[1]> Menschen durchlässt? ;)

    Gruß
    Marc
    [1] setze dicke, dünne, alte, junge, bunte etc. pp.

    Nachtrag: Hier findest Du aktuelle Zahlen aus 07.2010

    „Ich bin Leben, das leben will, inmitten von Leben, das leben will.“ Albert Schweitzer

    Einmal editiert, zuletzt von -=Marc=- (31. August 2010 um 09:58)

  • Ein Hinweis sei mir gestattet.
    In solchen Situationen wie dieser - liebe ich regelrecht Foren - in den Moderatoren sofort gnadenlos eingreifen - sobald wie hier, die Diskussion absolut OT läuft.

    Ich hoffe somit weiter, dass mir jemand helfen kann und das auch will. :)
    Danke.


    -=Marc=- rufe doch einfach mal meinen Blog über deinen IE auf. Also bei meinem IE werden die Seiten super angezeigt.
    Wenn die runden Ecken beim IE wegfallen, na und - dann sind sie da eben eckig. ;-)

  • zu Deinem Problem (Formatierung der Links innerhalb der Tag-Cloud): Befasse Dich mal intensiv mit Selektoren und deren kreative Nutzung. Durch diese kannst Du Elemente anhand ihrer "Verschachtelung" im HTML-Code gezielt ansprechen.
    Beispiel:

    HTML
    #sidebar ul li ul li a:hover, #sidebar ul li ul li a:active {color:#B52828;font-weight:bold;}

    Angesprochen wird ein Element "a" der ID "sidebar". Und zwar der Link, welcher innerhalb einer Liste, die wiederum innerhalb einer Liste steht. Dazu erschwerend, hier findest Du die Deklaration des Stiles sowohl für den jungfräulichen Link, als auch für den aktiven Link. ;) Fies? Ach was, tapfer bleiben. Quelle des Beispiels (links die Menüpunkte).

    Einführung in Selektoren (engl.)
    Nachmal Selektoren (dtsch.)

    p.s.: Ich kann den Domi schon verstehen, Du kamst zwischendurch ziemlich "fordernd" rüber.

    „Ich bin Leben, das leben will, inmitten von Leben, das leben will.“ Albert Schweitzer

  • Danke für den Lösungsansatz. :D
    Und sorry an Alle hier, wenn sich bei mir irgend was fordernd anhört.
    Das ist garantiert nicht so gemeint.

    Ich bin nur beruflich sehr viel Korrespondenz gewöhnt, die diese Art der Formulierungen beinhalten und wenn ich dann zwischendurch mal schnell im Forum poste - kann das schon mal falsch rüberkommen.

    Grundsätzlich meine ich alles nett und freundlich und niemals fordernd.
    Also sorry. :-D

    Nachtrag:
    Ich habe mir jetzt die Seiten mit der Verschachtelung mal angeschaut und verstehe überhaupt nix.

    Ich gehe jetzt daher einfach davon aus, dass sich meine Frage hier von selbst erledigt und ich mich anderweitig um Hilfe bemühe, denn ich bekomme es selbst nicht hin.
    Sollte dennoch jemand so freundlich sein, und mir den zusammengesetzten Code liefern wollen, bedanke ich mich bereits jetzt sehr herzlich dafür.

    Einmal editiert, zuletzt von bikershrek (31. August 2010 um 10:50)

Jetzt mitmachen!

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