Überlagertes CSS-Element ändern

    Hallo,

    ich hab bei der Anpassung meines Themes ein Problem, bei dem ich leider nicht weiter komme.

    Es gibt im CSS einen Bereich, der definiert, wie die Links in der Artikel-Seite dargestellt werden sollen.

    Code
    .entry a { ...; border-bottom: 1px dotted;}

    Jetzt verwende ich das NextGen Gallery Plugin, das die Bilder als Links einbindet. Problem ist jetzt eben, dass jedes Bild nun auch einen gestrichtelten Unterstrich hat. Ich hab versucht in dem CSS-Bereich ".entry img" so abzuändern, dass eben genau bei dem Bild kein Rand unten ist:

    Code
    .entry img {
    padding: 4px;
    
    display: inline;
    margin: 6px 10px 0px 0px;
    /*border: 1px solid #80b608;*/
    border-bottom: none;
}


    Leider funktioniert das nicht! Wie kann ich denn das übergeordnete Element im dem ".entry img"-Abschnitt entsprechend überschreiben?

    • 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

    ich nehm an du magst nirgendwo einen Bildlink mit dem Rahmen

    CSS
    body  a img,
body a:link img,
body a:visited img,
body a:link:active img,body a:visited:active img {    border: none!important;
text-decoration:none!important;}

    und das ziemlich ans Ende Deiner style.css


    es ist die brutalste Art, doch es müßt wirken ;)

    nachher den Browsercache leeren bevor du kontrollierst obs wirkt

    Das ist richtig, eigentlich möchte ich keinen Rahmen um die Bildlinks haben, nirgendwo.

    Hhm, aber leider immer noch keinen Erfolg :???:

    Ich hab mal meine styles.css angehängt. Vielleicht seht Ihr da, wo der Haken ist.

    Zitat von OXO

    Hat hierfür keiner eine Lösung??

    datei runterladen entpacken

    dann seh ich da was und habe keine Ahnung wie das dazugehörige html aussieht

    ein Link zum Geschehen wäre extremst einfacher und hilfreicher

    lg

    Okay, ist aber immer ein wenig blöd, wenn man gerade im Aufbau einer Seite ist. Ich habe aber dennoch mal einen Artikel mit einem Bild drauf gestellt.

    Unter dem Bild sieht man die gestrichelte Linie, die irgendwie von den Links kommen muss - aber leider keine Ahnung, woran das liegt.
    http://www.roman-kaeppeler.de/?cat=1

    Einmal editiert, zuletzt von OXO (31. Mai 2009 um 01:29)

    Kann das irgenwie vom NextGen Gallery Plugin kommen??

    Dort habe ich zwar mal die CSS-Dateien durchgeschaut, habe aber keine Ahnung, wie das aufgebaut wird, was ich bei der Analyse des CSS im Firefox mit dem Web-Developer-Extension sehen kann.

    HIER: /plugins/nextgen-gallery/shutter/shutter-reloaded.css
    od. HIER: /plugins/nextgen-gallery/css/ngg_shadow2.css

    nach: shutterset_singlepic4 (wieso ist da eine Zahl am Ende?)
    od. nach: ngg-singlepic ngg-center

    suchen und einmal anschauen ob da "border-bottom: 1px dotted (dashed)" steht oder einen ähnlichen wert hat.

    Die Zahl 4 bei "shutterset_singlepic4" kommt vermutlich daher, dass mein Bild die ID=4 hat. Ist aber nur geraten.

    Die Entsprechenden Werte konnte ich leider in den CSS-Dateien nicht finden. Die CSS-Dateien nicht so groß, sehen aber etwas seltsam aus. Ich hab sie mal mitgeschickt.

    Irgendwie frage ich mich echt, woher dieser Mist unter dem Bild kommt. Wie gesagt, wenn ich in der style.css bei den Links Border weg mache, dann ist die Linie unten auch weg, aber dann eben auch bei ALLEN links.

    Wenn man mal die Seite zum Beispiel mit den IE Developer Tools (oder im Firefox) anschaut, dann gibt es dort einen Eintrag ".entry a" mit "border-bottom".

    Wenn ich den abstelle, ist die Linie unter dem Bild weg und aber auch unter allen Links.

    Die Frage ist, ob man die styles.css so umändern kann, dass man zwei arten von Links definiert. Also wie könnte ich normale Links mit einem anderen CSS versehen als zum Beispiel die Bildlinks?

    Ja, hab ich: Firefox-Addons

    a) Firebug
    b) Web Developer Toolbar

    installieren und verwenden. Dann wird Dir vieles klarer. Beim Firebug kannst auch in die Css-Dateien schauen und darin suchen...

    Hier einmal der Auszug der Klassen:

    ...das war´s also nicht.

    Hab dann noch einmal in Deine Style.css geschaut und richtig vermutet:

    Zitat

    /*.entry a {color: #000000;}*/
    /*.entry a {color: #000000; border-bottom: 1px solid #80b608; border-bottom-style: dotted;}*/
    .entry a {color: #80b608; [COLOR=Red]border-bottom: 1px dotted[/COLOR];}
    .entry a:hover {color:#000000; [COLOR=Red]border-bottom: 1px dotted #000000[/COLOR]; text-decoration: none;}

    Du musst logischerweise ALLE entweder weg kommentieren ODER löschen, ABER NICHT das was keine Border hat auskommentieren und das was eine hat, drinnen lassen. Das verwirrt ja sogar Dich selber ...

    ...1.) GRRR 2.) LÖSCH doch bitte was Du nicht brauchst. Auskommentieren bringt doch gar nix...

    beste Grüße.

    Ps.: Wenn Du in den Firebug schaust (icon links unten im Browser anklicken > Html taucht auf), dann siehst Du alles fein strukturiert und wenn Du mit der Maus darüber fährst, dann gibt´s eine transluzente blaue Hoverfläche, die Dir zeigt, bei welchem Element Du Dich gerade befindest. Dann lernst Du einfach einmal 10min. Css-Selektoren und erkennst, dass zB ein div mit der Klasse entry (i.d. Css: .entry) mit einem darin befindlichen a-Link wohl so aussehen muss: .entry a {bla}. Das macht Dir das Leben unendlich leichter. Gutes Gelingen. Und schau Dir wirklich einmal die Struktur von Selektoren an, dann ersparst Dir das ewige Suchen, was es wohl sein könnte und sicherheitshalber nur auskommentieren, weil "das könnte man noch einmal brauchen"...

    Firebug laden! Foreregeln bitte lesen. FAQ. Bitte keine Anfragen per PN.

    Einmal editiert, zuletzt von kaiser (30. Mai 2009 um 18:24)

    Den Firebug werde ich mir mal installieren!

    Es ist aber so, dass ich bei normalen Hyperlinks schon eine Border haben will, nur nicht unter meinen Bildern!

    Das Auskommentierten kommt daher, dass ich mit den Farbwerten auch etwas herumgespielt hab... Hast aber schon Recht - die fliegen demnächst wieder raus, sobald das Debugging vorbei ist :-D

    So, endlich bin ich auf dem richtigen Weg, auch wenn mir diese Verschachtelungen im CSS immer noch ein Wunder sind, aber egal.

    Hier die Änderungen, die ich gemacht hab:

    Code
    /* Das hier testweise auskommentiert */
.entry a {color: #80b608; /* border-bottom: 1px dotted;*/}


/* Dafür eine neue Link-Klasse für den anchor im entry und meinen Link im HTML-Modus mit der Klasse versehen */
.entry a.myLink {color: #80b608; border-bottom: 1px dotted;}

    Läuft!

    Vielen herzlichen Dank für Eure Hilfe!!

    Einmal editiert, zuletzt von OXO (31. Mai 2009 um 22:57)

    Übrigens: Wenn Du hier etwas schreibst und dann Code postest, dann markier den bitte und verwende die #-Taste im Editor zur Code-Auszeichnugn. Danke.

    Zitat von kaiser

    Übrigens: Wenn Du hier etwas schreibst und dann Code postest, dann markier den bitte und verwende die #-Taste im Editor zur Code-Auszeichnugn. Danke.

    So, nachträglich abgeändert!

    Hab ich übrigens in den vorherigen gemacht und nur hier vergessen...

    Na schön langsam wirst Du ja zum Profi. Ein Tip noch am Rande: Schau Dir einmal Css Selektoren an. Dann wird Dir vieles klarer, vor allem, wie man Elemente anspricht. So kannst Du bei Deinem nächsten Projekt sicher einen Haufen Css-Code einsparen, bzw. deine style.css leichter lesbar machen...

    ...und nachdem Du ja jetzt Profi bist, schau doch einmal in ein paar andere Beiträge und hilf dem einen oder anderen Anfänger bei Kleinigkeiten. Foren leben ja vom Geben und Nehmen :-D

    Hhm, ich glaube da fehlt noch EINIGES zum Profi...

    Ich werde mich bemühen, auch mal jemandem weiterzuhelfen. Es sollen auch noch Beiträge im Blog auftauchen, damit die Probleme, die ich hatte mit der richtigen Lösung dokumentiert sind.

    Ich komm nur vor lauter Grundkonfigurationen noch gar nicht zum Schreiben selbst - schon ärgerlich.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden