CSS-Frage

Gesperrt
tommo
Beiträge: 120
Registriert: So 27. Jun 2004, 21:34
Kontaktdaten:

CSS-Frage

Beitrag von tommo » Do 11. Dez 2008, 17:34

Hi, ich weiß, dass ist das 4.8 Forum, aber ich wusste nicht, wo ich sonst fragen sollte, also:

ich möchte gerne, dass auf den Bildern, die mit Klick vergrößert werden können, eine kleine Lupe rechts unten im Bild erscheint. Da ich das ImageResizeHTML-Modul verwende, kann ich vor der Ausgabe den Code umbauen, wenn nötig (z.M. ein Div ums Bild oder ein Span dahinter oder eine Klasse einbauen.)

Ich hab echt nirgends gefunden, wie das gehen könnte, ohne dass das eigentliche Bild als Background einzubinden, denn dann könnte man es ja nicht mehr anklicken.

Wie kann ich denn das Lupen-icon im Bild positionieren (nicht darunter)?

Evtl. Beispielseiten??

Danke und vG,
Tom

Oldperl
Beiträge: 4250
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Beitrag von Oldperl » Fr 12. Dez 2008, 08:28

Hallo tommo,

nur mal so schnell aus dem kopf getipselt könnte es in etwas so gehen.
HTML

Code: Alles auswählen

<div class="rahmen">
    <img src="images/bild.jpg" alt="Bild" title="Bild" height="250" width="150"/>
    <div class="lupe"><img src="images/lupe.jpg" alt="lupe" title="lupe" height="25" width="25"/></div>
  </div>
und CSS

Code: Alles auswählen

div.rahmen {
    position: relative;
    width: 250px;
    height: 150px;
   }
   
   div.lupe {
    position: absolute;
    bottom: 0;
    right: 0;
   
   }
Wie gesagt, nicht getestet. Wichtig sind die Breite/Höhe in der CSS für den Rahmen, da der Browser sonst nicht weiß wo und wie er positionieren soll.

Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

tommo
Beiträge: 120
Registriert: So 27. Jun 2004, 21:34
Kontaktdaten:

Beitrag von tommo » Fr 12. Dez 2008, 08:51

hmm, das ist shon mal nicht schlecht, setzt aber voraus, dass die Bilder immer die selbe Größe haben, was ja selten der Fall ist. Das ganze müsste noch irgendwie dynamischer sein.

Any ideas?

Tom

Oldperl
Beiträge: 4250
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Beitrag von Oldperl » Fr 12. Dez 2008, 10:57

Hallo Tom,

dann mach es doch dynamisch, schreib dir ein Modul das die Werte des Bildes ausliest und setze dann die Werte als Inline-Style bei jedem rahmen-div. Wenn du ein Template dafür nutzt, ist das als Schleife für mehrere Bilder einfach möglich.

Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

tommo
Beiträge: 120
Registriert: So 27. Jun 2004, 21:34
Kontaktdaten:

Beitrag von tommo » Fr 12. Dez 2008, 13:35

Hi Ortwin,

ja, das hätte prima geklappt. Leider zerhauts mir jetzt die Position des Bildes im Text.
(Bildattribut: align="left").

Gruß aus dem Allgäu,
Tom

Oldperl
Beiträge: 4250
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Beitrag von Oldperl » Fr 12. Dez 2008, 13:41

Hallo Tom,

nunja, da nützt dir auch kein align="left" im img-Tag mehr, da du ja nun einen Div drum hast, versuchs mal indem du dem div eine "float:left;" im InlineStyle mitgibst.

Gruß Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

Gesperrt