mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:33 Benutzername: Passwort: Auto-Login

Thema: CSS: Zwei Grafiken mit einem Befehl aufrufen/positionieren vom 03.05.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: Zwei Grafiken mit einem Befehl aufrufen/positionieren
Autor Nachricht
TOMillr
Threadersteller

Dabei seit: 21.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 03.05.2008 17:30
Titel

CSS: Zwei Grafiken mit einem Befehl aufrufen/positionieren

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

verwende folgendes Script, um über den FCKeditor in den Fließtext eingefügte Bilder zu formatieren und eine Bildschunterschrift darunter zu setzen.

Image Caption Script

Dieses Sript besteht aus einem Javascript, sowie einem CSS Teil, welches das Aussehen des Layouts bestimmt und über CLASS im IMG Tag aufgerufen wird:

Code:

.arc90_imgcaption {
text-align: center;
border: 1px solid #DDD;
padding: 1em;
margin: 1em 0;
width: 9em; }

.arc90_imgcaptionTXT {
font-size: .8em;
color: #666;
text-align: left; }

.floatl {
float: left;
margin-right: 1em; }

.floatr {
float: right;
margin-left: 1em; }


Um nun das Aussehen der Bilder an das allgemeine Layout der Seite anzupassen, möchte ich zwei kleine Grafiken (mit abgerundeten Ecken) anzeigen lassen. Die eine Grafik kann ganz normal als Hintergrundgrafik unten links eingeblendet werden - die zweite Grafik (8bit PNG mit Transparenz) müsste dann allerdings oben rechts ÜBER das eigentliche Bild gelegt werden.

Besteht nun irgendie die Möglichkeit, mit dem einen mir zur Verfügung stehenden CLASS Informationsfeld
a) zwei Grafiken gleichzeitig aufzurufen und
b) die PNG nicht als Hintergrundgrafik HINTER sondern VOR das eigentliche IMG zu legen?

Danke,
TOM
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 03.05.2008 19:38
Titel

Re: CSS: Zwei Grafiken mit einem Befehl aufrufen/positionier

Antworten mit Zitat Zum Seitenanfang

1. Ich verstehe die Frage nicht.

2. Du kannst die Grafik z.B. absolut und mit erhöhtem z-index über der anderen positionieren.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
TOMillr
Threadersteller

Dabei seit: 21.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 03.05.2008 22:14
Titel

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
2. Du kannst die Grafik z.B. absolut und mit erhöhtem z-index über der anderen positionieren.

Aber geht das auch bei einer Hintergrundgrafik? Oder kann ich eine Grafik sonst über das Stylesheet direkt einbinden und aufrufen?!


Habe für das Problem in der Zwischenzeit bereits eine Lösung gefunden: Ich kann einfach in das CLASS Feld zwei Einträge aus dem Stylesheet aufrufen, wenn ich die einfach hintereinander schreibe.

Komme dann aber an einer anderen Stelle nicht weiter:
Wie man im Code oben sehen kann, wird um das Bild ein 1px breiter Rahmen gezeichnet. Damit dieser nun an den ecken abgerundet erscheint, möchte ich da in die Ecke eine entsprechende Grafik ÜBER den Rahmen einblenden. Dafür habe ich den Code wie folgt verändert und die Rahmenfarbe zur besserenIllustration des Problems auf rot gesetzt:

Code:

.arc90_imgcaption {
   text-align: center;
   border: 1px solid #FF0000;
   background: url(images/screenshot_ul.gif) no-repeat;
   background-position:bottom left;
   padding: 1em;
   margin: 1em 0;
   width: 9em;  }


Anscheinend wird die Grafik nun nicht ÜBER den Rahmen, sondern nur direkt neben an gelegt, sodass der Rahmen an der Ecke nicht verdeckt und trotzdem zu sehen ist.




Kann man die Grafik also irgendwie dazu zwingen, AUF anstelle NEBEN dem Rahmen zu erscheinen?


Zuletzt bearbeitet von TOMillr am Sa 03.05.2008 22:23, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst So 04.05.2008 01:24
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
Habe für das Problem in der Zwischenzeit bereits eine Lösung gefunden: Ich kann einfach in das CLASS Feld zwei Einträge aus dem Stylesheet aufrufen, wenn ich die einfach hintereinander schreibe.

Ja, was aber nicht immer so unproblematisch ist.
Lies mal:
Zitat:
Beachten Sie:
Der Internet Explorer bis Version 6 versagt leider bei der Definition von .extra.hinterlegt und wendet diese Definition auf alle Elemente an, die der Klasse hinterlegt zugewiesen wurden, nicht nur dem Abschnitt, der mit class="extra hinterlegt" explizit beiden Klassen zugewiesen wurde.

und schau dir das Beispiel dazu an: http://de.selfhtml.org/css/formate/zentrale.htm#klassen

Zitat:
an den ecken abgerundet

Angerundete Ecken sollten irgendwann dann mal in CSS 3 mit border-radius machbar sein. Einige Browser können das schon.
Mit den Geckos (Netscape, Firefox, Mozilla, K-Meleon, Camino, ...) und den KHTMLs (Konqueror, Safari) erreichst du das über -moz-border-radius bzw. -khtml-border-radius.
Die anderen Browser (soviele sind's außer dem MSIE eigentlich nicht mehr) ignorieren das und zeigen dementsprechend die normalen eckigen Rahmen an.
Siehe: CSS4You: Tipps und Tricks: Rahmen mit abgerunden Ecken

Zitat:
Kann man die Grafik also irgendwie dazu zwingen, AUF anstelle NEBEN dem Rahmen zu erscheinen?

Ich muß gestehen, ich verstehe nicht so ganz, was gemeint ist...

Ich kann dir den CSS-Teil von Jendryschiks Einführung in XHTML, CSS und Webdesign empfehlen:
Jendryschik: Einführung in CSS
Das ist wirklich gut. Ich denke, da sollten eigentlich kaum noch Fragen offen bleiben. Ansonsten hast du im CSS-Teil von SelfHTML noch eine gute Referenz.
  View user's profile Private Nachricht senden
TOMillr
Threadersteller

Dabei seit: 21.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 04.05.2008 09:34
Titel

Antworten mit Zitat Zum Seitenanfang

rob hat geschrieben:

Ich muß gestehen, ich verstehe nicht so ganz, was gemeint ist...

Ich habe oben ja einen Ausschnitt gepostet, auf dem man den roten Rahmen , der mit
Code:
border: 1px solid #DDD;

um das jeweilige Bild gezeichnet wird, sowie die kleine Grafik mit der abgerundeten Ecke sehen kann. Der Rahmen wird aber nicht, wie eigentlich angedacht, durch diese Grafik verdeckt, sondern sie legt sich bündig an den Rahmen an. Die Idee ist da aber natürlich, dass die Hintergrundgrafik an genau dieser Stelle den Rahmen versteckt, um den Effekt von abgerundeten Ecken zu erzeugen.
  View user's profile Private Nachricht senden
TOMillr
Threadersteller

Dabei seit: 21.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 04.05.2008 17:28
Titel

Antworten mit Zitat Zum Seitenanfang

rob hat geschrieben:
Ich muß gestehen, ich verstehe nicht so ganz, was gemeint ist...

Ich habe mal zur besseren Verdeutlichung eine Grafik erstellt:




Ich Hintergrundgrafik, die ich über das CSS anzeigen lassen und mit der Angabe "bottom left" positioniert habe, wird nicht direkt auf den Rahmen sondern daran anliegend angezeigt.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Padding + Float-Befehl = Verrutschen in ZWEI Richtungen?
[css] Positionieren von Text auf Grafiken *help*
[CSS] Autom. Positionieren von Grafiken über Eingabefelder
[PHP] Zwei Grafiken miteinander vergleichen
Zwei <Forms>, Zwei Checkboxen und ein Problem
mit htaccess index.php aufrufen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.