Links in Beiträgen dotted darstellen (Blix)

[alternative4]

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.

[Pixel64]

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):

/* 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

[alternative4]

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:

/* 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:

/* Entry
--------------------------------------------------*/
.entry {margin:0 0 40px 0;}

.entry .author {}

.entry .info {
  border-bottom-color:#F0F0F0;
  border-top-color:#F0F0F0;
}

usw.

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

[Pixel64]

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

[alternative4]

Hallo Marc,

die Seite ist www.maingold.com.
Das Blix Theme hat allerdings 2 relevante Stylesheets. Aber mit der Firefox Extension sieht man sie ja alle.

[Pixel64]

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

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

[alternative4]

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.

[Pixel64]

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:

 
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

[alternative4]

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

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;
}
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 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?

[Pixel64]

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