Links in Beiträgen dotted darstellen (Blix)

    Hallo,

    weiß jemand, wie man in Theme Blix nur Links in den Beiträgen dotted (mit gestrichelter Linie unterstichen) realisieren kann?
    Wenn ich im Stylesheet alle anderen a Elemente mit text-decoration:none; versehe, dann werden trotzdem ALLE anklickbaren Elemente mit einer gestrichelten Linie unterstrichen. Also auch Überschriften, die Sidebar Links, Links zu den Kommentaren, etc.
    Wie gesagt sollen aber ausschliesslich die Links innerhalb der Beiträge mit diesen gestrichelten Linien unterstrichen werden (dotted).

    Leider bin ich kein css Profi, vielleicht kann ja jemand helfen.
    Falls benötigt, kann ich natürlich gerne das Stylesheet hier posten.

    I woke up one morning and all of my stuff had been stolen…and replaced by exact duplicates.

    • Gerade eben
    • 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

    Hi,
    du musst die Links hierzu im CSS-Sheet einfach eingrenzen. Deine Beiträge haben sicherlich eine Klassenbezeichnung wie "<div class="article"...><h2>Überschrift</h2><p>Beitrags-Text</p></div>

    wenn Du nun also alle Links in den Beiträgen anpassen willst, baust Du Dir Deine CSS-Struktur wie folgt auf(am genannten Beispiel gemessen):

    HTML
    /* CSS */
div.article p a:link, div.article p a:visited {
border-bottom: 1px dashed #000;
}
div.article p a:hover {
border-bottom: 1px dashed #ff00;
}



    Grenze also die gewünschten Links im CSS so gut es geht ein. Im obigen Beispiel muss der Link also in einem DIV-Container der Klasse "article" und dort in einem "<p>" stehen, so daß das CSS für den Link(<a...>) greift.
    Übrigens: "dotted" zeigt der IE als gestrichelt an, mit "dotted" ist aber "gepunktet" gemeint - was der IE aber(noch) nicht kennt. Daher: "dashed" -> das bedeutet "gestrichelt" und wird von den meisten Browsern verstanden.

    Gruß,
    Marc

    Erst mal Danke für die schnelle Antwort.

    Leider blick ich bei dem Blix CSS nicht so wirklich durch. Ich habe mal mit Deinen Angaben etwas experimentiert, leider ohne Ergebnis.

    Das CSS ist wie folgt aufgebaut:

    Code
    /* links
--------------------------------------------------*/
a {color:#666633;}


a:hover  {
        color:#000000;
	background-color:#F1EFE2;}

    Wenn ich nun in die Klammer hinter dem a das dotted oder dashed einfüge, dann gilt das leider für alle Links auf der Seite.


    Dann gibt es noch einen Abschnitt namens Entry, und dies wäre auch die richtige Klasse. Da steht etwas in der Art:


    usw.

    Aber wenn ich dort Deinen Code (angepasst) einfüge, tut sich leider nichts.
    Noch eine Idee?

    I woke up one morning and all of my stuff had been stolen…and replaced by exact duplicates.

    Einmal editiert, zuletzt von Olaf (12. Februar 2006 um 23:13)

    Zitat

    Noch eine Idee?


    Ja! Poste mal die Seite, um die es geht!
    Es ist relativ schwer, hierzu Antworten zu geben, wenn man nicht den Quelltext kennt.
    Vielleicht findest Du auch eine Seite, auf welcher dasselbe Theme benutzt wird?
    -> Ich kenne mich mit den Standard-Templates wirklich überhaupt nicht aus, kann aber helfen, wenn ich den Quelltext sehe.

    Gruß,
    Marc

    Hi,
    o.k., als Test:
    füge mal an das Ende eines Style-Sheets(verwende mal "layout.css" folgenden Eintrag an:

    HTML
    div.entry p a:link, div.entry p a:visited {
border-bottom: 1px dashed #000;
}
div.entry p a:hover {
border-bottom: 1px solid #000;
}


    (Ganz unten im Stylesheet anfügen - dann werden die vorigen Einträge überschrieben/übergangen!)

    Das sollte die Links innerhalb der Beiträge so umgestalten, daß darunter eine schwarze, gestrichelte Linie und beim hovern eine durchgezogene Linie angezeigt wird.
    Test it! ;)

    Gruß,
    Marc

    Hi Marc,

    okay, wir kommen der Sache näher :-)
    Wenn ich Deinen Code einfüge, dann werden aber auch die "Kommentieren" und "Weiterlesen" Links unterstrichen.
    Weißt Du wie man das unterbinden kann?

    Ansonsten habe ich es mit beiden Stylesheets probiert, funktioniert mit beiden.

    I woke up one morning and all of my stuff had been stolen…and replaced by exact duplicates.

    Zitat von alternative4


    Wenn ich Deinen Code einfüge, dann werden aber auch die "Kommentieren" und "Weiterlesen" Links unterstrichen.
    Weißt Du wie man das unterbinden kann?



    Hi,
    ja, also die "Weiterlesen"-Links stehen in einem "<p></p>", welches die Auszeichnung "Klasse: info" besitzt. Die Links in diesen <p>-Tags wurden nochmals ausgezeichnet.
    Generell und für Deine Zwecke reicht aber schon, daß die der P-Abschnitt gekennzeichnet ist:
    setze folgendes für die weiterlesen, etc.-Links:

    HTML
    div.entry p.info a:link, div.entry p.info a:visited {
border-bottom: 3px solid Red;
}
div.entry p.info a:hover {
border-bottom: 3px solid Black;
}



    Jetzt sollten die angesprochenen Links mit drei Pixeln unterstrichen sein. Den CSS-Text kannst Du ja nach belieben jetzt anpassen.
    Sagst mir bitte Bescheid, falls es funktioniert hat. :)

    Gruß,
    Marc

    Also Du meinst den Code aus Deinem letzten Posting direkt unter den ersten Code ans Ende des Stylesheets setzen? Quasi so:

    Jetzt habe ich für die Kommentieren und Weiterlesen Links aber eben die roten oder schwarzen Linien. Ich möchte aber bei diesen Links gar keine Linien haben.
    Meinst Du also, dass der erste Abschnitt des Codes die dashed Linien erstellt (was ja auch klappt), und der zweite Abschnitt dies für die Kommentieren und Weiterlesen Links wieder rückgängig macht? Oder habe ich Dich da jetzt falsch verstanden?

    I woke up one morning and all of my stuff had been stolen…and replaced by exact duplicates.

    Einmal editiert, zuletzt von Olaf (12. Februar 2006 um 23:12)

    Nein, der zweite Code definiert einfach, wie die Links im info-Block aussehen sollen. In meinem Fall also: 3px...
    Du kannst den zweiten Code auch auf:
    border-bottom: 0px;
    setzen. dann hast Du da gar keine unterstreichung. Die 3px waren nur dazu gedacht, um zu zeigen, wie Du die einzelnen Links auseinanderhalten kannst.

    Gruß,
    Marc :-)

    Okay, ich habe nun diesen Code ganz an das Ende des Stylesheets gesetzt und es funktioniert soweit:

    Zwar ist jetzt auch der Link der Kategorien unterstrichen wenn man einen Beitrag öffnet (abgelegt unter), aber das ist okay.

    Was ich nur nicht verstanden habe, sind die unterschiedlichen "Code Formate" innerhalb des CSS.
    So wie Dein Code anfängt (div.entry), fängt in meinem CSS keine andere Zeile an. Ist das irgeneine Besonderheit?

    Und dann habe ich noch eine Frage: Verstehe ich es richtig, dass die Elemente die wir eben verändert haben, praktisch nun mehrfach im CSS geändert werden und nur die letzte Änderung zieht?

    Auf jeden Fall vielen Dank für Deine schnelle Hilfe!

    Grüße
    marius

    I woke up one morning and all of my stuff had been stolen…and replaced by exact duplicates.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden