mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 20:56 Benutzername: Passwort: Auto-Login

Thema: 3 Grafiken übereinander mit CSS vom 19.03.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> 3 Grafiken übereinander mit CSS
Autor Nachricht
Nepomuk
Threadersteller

Dabei seit: 12.03.2009
Ort: Deutschland
Alter: -
Geschlecht: Männlich
Verfasst Do 19.03.2009 16:46
Titel

3 Grafiken übereinander mit CSS

 Antworten mit Zitat Zum Seitenanfang
Hi Zusammen,

Ich versuche grad etwas auf die Reihe zu bekommen:

Auf meiner Webseite soll ein Block entstehen, der ein Thumbnail anzeigt, dahinter soll eine Grafik liegen und über den Thumbnail auch ein kleine Grafik. Nur das Thumbnail soll sich dabei ändern. Klappt auch alles wunderbar, nur die Hintergrundgrafik will noch nicht so dahin wo sie hin soll:

So sieht es jetzt aus:
[img]http:/www.danforum.de/bilder/screen.gif[/img]

Ich hätte gern hinter das Thumbnail noch eine Grafik (ein weisser Hintergrund mit Schattiertem Grauen Rand).

Mein Versuch ergibt aber nur das:

[img]http:/www.danforum.de/bilder/screenneu.gif[/img]


Code dazu:

Code:
<td style="text-align: center; padding: 0; margin: 0;" valign="middle">
<div class="backthumb"><div class="bild"><div class="lupe"></div>'. $pic .'</div>
<div style="text-align: center; padding: 0; margin: 0;">' . $photo['titolo'] . '</div>
<div class="tdblock" style="text-align: center; padding: 0; margin: 0;"><a href="/tipp.php">Tipp abgeben</a></div>
</td> 


CSS:

Code:
.bild {
   position: relative;
   float: left;
}

.lupe {
   background-image: url(/bilder/lupe.gif);
   background-repeat: no-repeat;
   position: absolute;
   bottom: 0;
   left: 0;
   height: 32px;
   width: 32px;
}

.backthumb {
    background-image: url(/mkportal/templates/default/images/bg_thumb.gif);
   background-repeat: no-repeat;
   position: relative;
   bottom: 0;
   left: 0;
   height: 122px;
   width: 82px;


Könnt Ihr mir evtl. weiterhelfen?

grüße

Nepomuk

Zuletzt bearbeitet von Nepomuk am Do 19.03.2009 16:47, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
alexw_ingoS

Dabei seit: 14.03.2009
Ort: Aachen und Wachtberg
Alter: 34
Geschlecht: Männlich
Verfasst Fr 20.03.2009 07:05
Titel

Antworten mit Zitat Zum Seitenanfang
Du hast bei .backthumb height und width verwechselt. Zur Zeit steht da:
Code:
   height: 122px;
   width: 82px;

Das Bild ist aber 122px breit und 82px hoch, nicht umgekehrt. *zwinker*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Nepomuk
Threadersteller

Dabei seit: 12.03.2009
Ort: Deutschland
Alter: -
Geschlecht: Männlich
Verfasst Fr 20.03.2009 10:00
Titel

Antworten mit Zitat Zum Seitenanfang
Ach Du Sch**** *ha ha*

Super!! Dank Dir. Ich hab mich tot gesucht und probiert. *Thumbs up!*

Grüße

Nepomuk
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Synoxis

Dabei seit: 07.09.2005
Ort: Roßdorf
Alter: 35
Geschlecht: Männlich
Verfasst Fr 20.03.2009 15:05
Titel

Antworten mit Zitat Zum Seitenanfang
Und eine Tabelle braucht man hier auch nicht drumherum *bäh*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
alexw_ingoS

Dabei seit: 14.03.2009
Ort: Aachen und Wachtberg
Alter: 34
Geschlecht: Männlich
Verfasst Fr 20.03.2009 15:14
Titel

Antworten mit Zitat Zum Seitenanfang
Synoxis hat geschrieben:
Und eine Tabelle braucht man hier auch nicht drumherum *bäh*
Wenn man so anfängt, kann man auch gleich noch sagen, dass der gesamte Code-Ausschnitt eigentlich kein einziges <div> braucht. Grins
  View user's profile Private Nachricht senden
Beach-Bomb

Dabei seit: 06.02.2008
Ort: Saarbrücken
Alter: 37
Geschlecht: Männlich
Verfasst Fr 20.03.2009 15:16
Titel

Antworten mit Zitat Zum Seitenanfang
Vielleicht auch z-index. geht auch.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Nepomuk
Threadersteller

Dabei seit: 12.03.2009
Ort: Deutschland
Alter: -
Geschlecht: Männlich
Verfasst Fr 20.03.2009 15:27
Titel

Antworten mit Zitat Zum Seitenanfang
...und ich würde dann noch mehr in die Röhre gucken *ha ha*

Könntet Ihr mal dort einen Blick drauf werfen?
Ich möchte das gleiche da bewerkstelligen, meine ersten Versuche sorgten aber für einen Totalausfall.

Code:
         $content = "
            <tr>
              <td align=\"center\"><img style=\"cursor: url($this->template/images/mkajax/zoomin.cur), pointer;\" src=\"$this->siteurl/mkportal/modules/gallery/album/$file\" border=\"0\" width=\"$thumb_mes[0]\" height=\"$thumb_mes[1]\" alt=\"{$this->lang['gallery_zoom']}\" onclick=\"ajax_showPop('{$this->sitepath}index.php?ind=ajax&amp;act=showgal&amp;idp=$id', 1);return false\" />
              </td>
            </tr>
            <tr>
              <td class=\"tdblock\" align=\"center\"><a class=\"uno\" href=\"$this->siteurl/index.php?ind=gallery&amp;op=foto_show&amp;ida=$id\">$titolo</a><br />
              </td>
            </tr>
         ";


ergibt:




Hinter das Bild soll auch eine Grafik, möglichst nach dem gleichen Prinzip.

Grüße

Nepomuk
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Synoxis

Dabei seit: 07.09.2005
Ort: Roßdorf
Alter: 35
Geschlecht: Männlich
Verfasst Fr 20.03.2009 15:29
Titel

Antworten mit Zitat Zum Seitenanfang
Warum gibst du nicht einfach dem <td> eine Hintergrundgrafik?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Divs übereinander?
CSS-Boxen übereinander?
CSS 2 Hintergrundbilder übereinander
Divs Übereinander
[CSS] Div-Layer übereinander
Übereinander floaten von Div's
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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB