zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafiken nach .ENDUNG mit oder ohne Rand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.09.2009, 14:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2009
Beiträge: 5
fritz befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.09.2009, 15:24
Benutzerbild von fox
fox fox ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Beiträge: 1.008
fox sorgt für eine eindrucksvolle Atmosphärefox sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.09.2009, 15:39
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 29.09.2009, 16:39
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (29.09.2009 um 16:44 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 29.09.2009, 16:54
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
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
Mit Zitat antworten
  #6 (permalink)  
Alt 29.09.2009, 16:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2009
Beiträge: 5
fritz befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 29.09.2009, 17:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2009
Beiträge: 5
fritz befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
  #8 (permalink)  
Alt 29.09.2009, 17:17
Neuer Benutzer
neuer user
 
Registriert seit: 20.09.2009
Beiträge: 25
niemand befindet sich auf einem aufstrebenden Ast
Standard

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>

Geändert von niemand (29.09.2009 um 17:20 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 29.09.2009, 21:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2009
Beiträge: 5
fritz befindet sich auf einem aufstrebenden Ast
Daumen hoch

Hallo

und vielen Dank.

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.

Besten Dank nochmals an alle!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 29.09.2009, 21:17
Benutzerbild von Pr0g
(^.^)
XHTMLforum-Mitglied
 
Registriert seit: 23.08.2005
Ort: Düsseldorf
Beiträge: 535
Pr0g wird schon bald berühmt werden
Standard

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>
__________________
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
attribute selector, attribute substring, css3, formatieren, getrennt nach typ, grafik, jpg, nach endung, png, rand

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Zwei übereinander angeordnete Grafiken im Fließtext Trebor CSS 1 14.01.2011 22:24
2 Boxen in einer, mit Rand anders als ohne Rand fritzje CSS 4 26.10.2010 00:31
Grafiken auf Rand garfield1711 CSS 8 18.06.2010 17:50
Rechten Rand vom P in zentriertem DIV an rechtem Rand eines IMG ausrichten yeastie99 CSS 2 19.07.2008 16:02
2 Grafiken als Hintergrund ... PiTi CSS 3 08.09.2005 00:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:45 Uhr.