PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : "Bedingte" Formatierungen in CSS: Wie?


Tuxman
13.07.2008, 15:29:51
Sers,

in meinem Weblog habe ich alle <a> mit einem Rahmen versehen. Nun würde ich davon aber gern eine Ausnahme machen, so dass alle <a><img ...></a> keinen Rahmen bekommen.

Wie funktioniert das?

a[img] oder so was?

Gweilo
13.07.2008, 16:02:39
das geht erst ab CSS 3, da waere der selektor "p > img", denke ich (hab die neuen funktionen noch nie gebraucht).

ansonsten geht das auch mit CSS1 oder 2:

p {
border: 1px;
}

p img {
border: 0px;
}

edit: a statt p natuerlich... und beim selektor muesste man noch negieren zB "a > *:not(img)"

Tuxman
13.07.2008, 16:09:15
Bei "a img { border:none }" bekommt der "a"-Tag aber weiterhin einen Rahmen, darum geht's ja...

Werde das dann also mal mit Selektoren zu lösen versuchen, danke...

edit:
Selektoren machen ja wieder das genaue Gegenteil... ich bräuchte einen "<"- statt eines ">"-Selektors...

Gweilo
13.07.2008, 16:41:08
stimmt, das hab ich uebersehen.
nach meinem (zugegebenermassen begrenztem) css wissen geht das gar nicht.

Das kannst du sonst mit JavaScript ziehmlich einfach (sofern du eine JS library benutzt) loesen.

Tuxman
13.07.2008, 16:45:14
Javascript mag ich eigtl. nicht so...
Bspw. wie?

Smilie
13.07.2008, 20:40:58
Global würde ich das so lösen, dass du denjenigen <a> Tags ein id= Attribut hinzufügst und dieses dann global in der CSS Datei definierst.

D.h.

a {
Rahmen;
}

.ohne {
Ohne Ramen;
}

<a>Link mit Rahmen</a>
<a id="ohne"><img>Bildlink ohne Rahmen</img></a>

Anders würde mir spontan nichts einfallen. ;-)

Tuxman
13.07.2008, 22:10:26
Mach ich ja auch immer so, ist nur verdammt viel Aufwand. Gerade wenn man viele Grafiken verwendet bzw. zu verwenden plant. :(

Gweilo
15.07.2008, 10:05:51
Die loesung in JQuery waere folgende (wie gesagt, ohne library ist's nicht so einfach):

entweder die klassen wieder entfernen (passiert nachdem die seite geladen wurde)
$(document).ready(function () {
$('a img').removeClass('meinRahmen');
});

oder die klasse nur bei den korrekten links hinzufuegen
$(document).ready(function () {

$('a').each(function() {
if (!$(this).children(':first').is('img')) {
$(this).css('border', '3px solid #ffff00'); // $(this).addClass('meinRahmen')
}
});

});

Tuxman
15.07.2008, 12:37:24
Hm, OK, danke... werd mal damit herumspielen. :)