XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Grafiken nach .ENDUNG mit oder ohne Rand (http://xhtmlforum.de/showthread.php?t=58638)

fritz 29.09.2009 14:58

Grafiken nach .ENDUNG mit oder ohne Rand
 
Hallo,

ich hab mich totgegoogelt, aber offenbar gibt es einen Tag wie ich ihn suche nicht.

Problem: Alle Grafken im BODY-Container sollen je nach Typ (jpg/png) zum einen mit Rand, zum anderen ohne Rand formatiert sein. Mit IMG schlecht möglich, der nimmt alles.

Beispiel Original Tag:

#body img {
border: 2px solid #FFFFFF;
margin: 5px;
}


Gewünscht:

#body (WENN JPG) {
border: 0px solid #FFFFFF;
margin: 5px;
}

#body (WENN PNG) {
border: 2px solid #FFFFFF;
margin: 5px;
}

Am besten definiert in einem Tag. Ist das mit CSS überhaupt möglich?

Vielen Dank schonmal im vorraus.

fox 29.09.2009 15:24

Mit CSS 3:

Code:

img[src$=".jpg"] {
    /* code für jpg */
}

img[src$=".png"] {
    /* code für png */
}

Die Unterstützung dafür ist aber noch ziemlich gering, so dass du das in der Praxis ohne Javascript wohl nicht einsetzen solltest - zumindest, wenn dein Layout davon abhängt.
Web Browser CSS Support

Selbst testen kannst du das hier:
CSS3: Attribute selectors - CSS3 . Info

Thielo 29.09.2009 15:39

ansonsten wenn du das ganze über php steuerst gehts auch indem du die endung überprüfst und dann das ganze mit klassen steuerst.

Gruß
Richard | Thielo

hubspe 29.09.2009 16:39

Hi,

man könnte aber auch ganz ohne Scripterei zwei Klassen (.png, .jpg) bilden, die den jeweiligen Bildertypen im Quelltext zuweisen und entsprechend formatieren. ;)

edit. ich seh gerade jpg soll keinen Rand haben.
Schreib oben in deine CSS
HTML-Code:

img  { border:none; }
Dann benötigst du nur noch eine Klasse für die PNG's. ;)

Thielo 29.09.2009 16:54

Zitat:

Zitat von hubspe (Beitrag 446498)
Hi,

man könnte aber auch ganz ohne Scripterei zwei Klassen (.png, .jpg) bilden, die den jeweiligen Bildertypen im Quelltext zuweisen und entsprechend formatieren. ;)

edit. ich seh gerade jpg soll keinen Rand haben.
Schreib oben in deine CSS
HTML-Code:

img  { border:none; }
Dann benötigst du nur noch eine Klasse für die PNG's. ;)

Hm neee wär doch viel zu einfach :P

fritz 29.09.2009 16:55

Hallo,

Danke für die Antworten.
Die Seite ist auschließlich HTML mit css, dann ist es offenbar nicht möglich.

Über 2 Klassen habe ich auch schon nachgedacht. Nur wie sollte der Code dann aussehen? Denn .jpg und .png Anweisungen werden nicht intepretiert.

Problematik der Seite, viele JPGBilder, die mit Rahmen versehen sein müssen und einige HinweisPNG (transparenter BG), da macht ein Rahmen drum dann wenig Sinn ;)

Falls also doch jemand nen Trick in css weiß, gerne auch Javascript, bitte gleich Code posten.

Danke

fritz 29.09.2009 17:01

Berichtigung
 
Hallo,

sorry, nun gings vor lauter Grübelei etwas durcheinander, anbei nochmal Klartext.

1 BODY BOX, in dieser zugleich JPG und PNG.
JPG sollte einen Rahmen haben, die PNG sollten keinen Rahmen haben.

#body (WENN PNG) {
border: 0px solid #FFFFFF;
margin: 5px;
}

#body (WENN JPG) {
border: 2px solid #FFFFFF;
margin: 5px;
}

Danke

niemand 29.09.2009 17:17

Wie hubspe und Thielo schon fragten: Warum machst du es denn nicht wie folgt:
Code:

img {
border: 2px solid #FFFFFF;
margin: 5px;
}

img.hinweis {
border: 0px solid #FFFFFF;
margin: 5px;
}

Im HTML-Code musst du die Klasse dann natürlich auch angeben:
HTML-Code:

<div id="body">
<img alt="Beispielbild" src="beispiel.jpg" />
<img alt="Hinweistext" class="hinweis" src="beispiel.png" />
</div>


fritz 29.09.2009 21:06

Hallo

und vielen Dank.

:idea: Der Code
img.hinweis {
border: 0px solid #FFFFFF;
margin: 5px;}

funktioniert wunderbar und löst meine Probleme.

Offenbar hatte ich den falschen Ansatz, da ich von einer Automatisierbarkeit (Arbeitserleichterung), also das jeweilige Format einfügen und es formatiert sich nach Endung selbst, ausgegangen bin.

Den jeweiligen Tag nun anfügen ist auch kein Problem. Man sollte offenbar nur nicht zu faul sein. :oops:

Besten Dank nochmals an alle!

Pr0g 29.09.2009 21:17

Auch wenn es sich erledigt hat poste ich trotzdem nochmal eine Alternativlösung in JS (natürlich würde auch ich die direkte CSS Zuweisung auf jeden Fall bevorzugen, falls möglich):
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#body img {
  border: 0;
  margin: 5px;
}
</style>
<script type="text/javascript">
function image_border() {
  // Img-Tags ermitteln
  var imgs = document.getElementsByTagName('img');

  // Alle Tags einzelnd durchlaufen
  for (var i = 0, c = imgs.length; i < c; i++) {
    // Url aus src-Attrbut auslesen und Dateiendung abtrennen
    var url = imgs[i].src;
    var type = url.slice(url.lastIndexOf('.') + 1, url.length);
   
    // Typ / Aktion wählen
    switch (type) {
      case 'jpg': imgs[i].style.border = '2px solid red'; break;
      case 'gif': imgs[i].style.border = '2px solid green'; break;
      case 'png': imgs[i].style.border = '2px solid yellow'; break;
    }
  }
}
</script>

</head>
<body onload="image_border()"> <!-- Nach dem Laden der Seite gehts los... -->

<img src="http://xhtmlforum.de/images/x_buttons/reply.gif" alt="" />

<br />

<img src="http://xhtmlforum.de/images/x_layout/top_left_dark.jpg" alt="" />

<br />

<img src="http://xhtmlforum.de/images/x_buttons/reply.gif" alt="" />

</body>
</html>



Alle Zeitangaben in WEZ +2. Es ist jetzt 15:50 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020