• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] wasserzeichen auf bild einfügen

16 Februar 2014
162
4
18
#1
Hallo zusammen,

ich hab ein Problem mit Einfügen eines Wasserzeichens per CSS.

Und zwar gehts um eine Bildergallerie welches ein kleines Bild zeigt auf der Website und wenn ich darauf klicke öffnet sich dann das große in einer Gallerie zum durchzappen.

Ich gebe die Bilder per Schleife aus und der HTML Code schaut wie folgt aus:

HTML:
<div class="grid_3">
    <figure><div class="bild_wasserz"><div class="wasserz">&nbsp;</div><a href="bild.jpg" class="magnifier2"></div>
<img src="bild.jpg" class="kl"><span class="zoom"></span></a></figure>
</div>
CSS dazu:
HTML:
.bild_wasserz {
 position: relative;
}
 
.wasserz {
 position: absolute;
 left: 200px;
 top: 250px;
 width: 500px;
 height: 50px;
 background-image:url(../images/wasserzeichen.png);
 background-repeat: no-repeat;
}
Falls die anderen CSS Klassen auch noch benötigt werden, ergänze ich diese auch noch gerne aber denke ich mache in den beiden beschriebenen bereits einen Fehler.

Ich möchte erreichen, dass das Wasserzeichen beim großen Bild angezeigt wird.

Danke schon mal ;)
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#2
Falls die anderen CSS Klassen auch noch benötigt werden, ergänze ich diese auch noch gerne aber denke ich mache in den beiden beschriebenen bereits einen Fehler.
Nö. Dafür aber im HTML-Code, der fatale Folgen bei der Ausgabe hat.

Anhand der Texteinrückung leicht zu erkennen, dass hinten raus mit den schließenden </div>-Tags was nicht stimmen kann:
HTML:
<div class="grid_3">
  <figure>
    <div class="bild_wasserz">
      <div class="wasserz">&nbsp;</div>
      <a href="bild.jpg" class="magnifier2"></div>
        <img src="bild.jpg" class="kl">
        <span class="zoom"></span>
      </a>
  </figure>
</div>
... und tatsächlich, .bild_wasserz wird in Zeile 5 vorzeitig geschlossen, was in Deinem präsentierten Code-String so nicht direkt ins Auge fallen mag.

Umso mehr bei https://jsfiddle.net/SpiceLab/4g97ckts/

Zum Vergleich zwischen </a></figure> an der richtigen Stelle gesetzt: https://jsfiddle.net/SpiceLab/25pt4f89/

Moderation: Thema von CSS nach HTML verschoben.
 
Zustimmungen: _R_A_L_F_
16 Februar 2014
162
4
18
#3
Danke Spicelab für deine Antwort. Der Vergleich zeigt den Fehler ja deutlich.

ABER: Leider funktioniert es immer noch nicht obwohl ich den Code entsprechend abgeändert habe wie oben beschrieben.

Im Link unten sieht man ja wie das Ergebnis aktuell aussieht.
 
Zuletzt bearbeitet:
16 Februar 2014
162
4
18
#5
der Link zur Seite lautet:

http://www.siegl-web.de/wasserz/index.php

Die Seite inkl. PHP sieht so aus:
PHP:
<!DOCTYPE html>
<html lang="de">
        <head>
        <title>Gallerie</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        
        <script src="js/jquery.js"></script>
        <script src="js/jquery-migrate-1.2.1.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/script.js"></script>
        <script src="js/touchTouch.jquery.js"></script>
        <script src="js/jquery.tools.min.js"></script>

        </head>
<body>
 
<div class="main">
    <div class="div-content"> 

<!--==============================header=================================-->
            <div id="stuck_container">
            </div>

<!--=======content================================-->





            <div class="container">

                <h2 class="padBot1">Gallerie</h2>
                <div class="row">
                <div class="grid_12">
                <p class="anrede">Ihre Gallerie</p>
                </div>           
                </div>
                
                <div class="row">

                              <?php
                              // Ordnername
                              $ordner = 'gallerie';
                              
                              // Ordner auslesen und Array in Variable speichern
                              $allebilder = scandir($ordner);

                              foreach ($allebilder as $bild) {
                              
                                  // Zusammentragen der Dateiinfo
                                  $bildinfo = pathinfo($ordner."/".$bild);
                              
                                  // Größe ermitteln für Ausgabe
                                  $size = ceil(filesize($ordner."/".$bild)/1024);
                              
                                
                                  if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
                                
                                  ?>
                                    <div class="grid_3">
                                      <figure><div class="bild_wasserz"><div class="wasserz">&nbsp;</div><a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" class="magnifier2"><img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" class="shootkl"><span class="zoom"></span></a></div></figure>
                                    </div>                               
                                  
                              <?php       
                                }
                                
                               };
                                    // Wenn keine Dateien vorhanden
                                    if (count(scandir($ordner)) <= 2)
                                    {
                                ?>
                                    <div class="grid_12">
                                      <br>
                                      <span><strong>Keine Bilder im Ordner vorhanden</strong></span>
                                    </div>   
                                    
                                <?php
                                    }                                   
                              ?>

                </div>
                                                            


            </div>


            <div class="container">



                <div class="row">
                    <div class="grid_12">
                    <br><br><br>
                    </div>

                    <div class="clear"></div>


                </div>
            </div>



     </div>
    
</div>
<!--=======footer=================================-->
            <footer>

            </footer>
<script type="text/javascript">

     $(document).ready(function(){
        // Initialize the gallery
        $('.magnifier2').touchTouch();
     });

     function myFocus(element){
                     if (element.value == element.defaultValue){
                             element.focus();
                             element.value = '';
                     }
                }
                function myBlur(element){
                     if (element.value == ''){
                             element.blur();
                             element.value = element.defaultValue;
                     }
                }

</script>
</body>
</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.061
230
63
65
#6
Dein CSS ist gar nicht mal verkehrt, aber die Zahlenwerte passen überhaupt nicht: Die Abmessungen sind viel zu groß und und top und left ebenfalls, so dass die Wasserzeichen außerhalb der Bilder liegen. Mit den Developertools konnte ich es so einrichten:
Code:
.wasserz {
    position: absolute;
    left: 30px;
    top: 60px;
    width: 100px;
    height: 10px;
    background-image: url(../images/wasserzeichen.png);
    background-repeat: no-repeat;
    background-size: 100px 10px;
    z-index: 100;
}
Ich würde dir jedoch folgende Änderungen empfehlen:
  • Benutze für das Wasserzeichen einfach ein img-Tag statt eines div mit Hintergrund.
  • Platziere dieses nach dem Bild, damit es auch ohne z-index im Vordergrund liegt.
 
16 Februar 2014
162
4
18
#7
Danke für die Antwort Sempervivum.

Das mit dem img - Tag ist ein guter Vorschlag, ändere ich gerade ab ABER:

Jetzt wird momentan das Wasserzeichen auf dem kleinem Bild angezeigt (siehe Link). Ich möchte aber, dass das Wasserzeichen auf dem "großen" Bild erscheint beim drauf klicken.
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#13
Jetzt wird momentan das Wasserzeichen auf dem kleinem Bild angezeigt (siehe Link). Ich möchte aber, dass das Wasserzeichen auf dem "großen" Bild erscheint beim drauf klicken.
Dafür befindet es sich dann wohl an der falschen Stelle des HTML-Codes.
Dann ist es wahrscheinlich das beste, wenn man die Wasserzeichen mit Javascript nachträglich in die Overlay-Bilder einfügt. Ich arbeite etwas aus ...
... bis dahin demonstrier' ich hier fix eine pure CSS-Lösung, die mit wenigen Handgriffen erledigt ist :D:cool:

Die grundsätzliche Formatierung des Wasserzeichens ist bekannt. <div class="wasserz"></div> entfällt im Code, wird durch das Pseudoelement ::after ersetzt, das zum best. CSS zusätzlich mit display:block|inline-block u. content:"" (Platzhalter) auszustatten ist, und innerhalb von #gallerySlider auf .placeholder angewendet wird, worin die großen Bilder landen.
  1. https://jsfiddle.net/SpiceLab/srme4kbg/ - Wasserzeichen-Grafik mit background-image (skalierbar, wie in Vorlage)
  2. https://jsfiddle.net/SpiceLab/z79rk3jd/ - Wasserzeichen-Grafik mit content (nicht-skalierbar)
Falls das Pseudoelement Neuland ist:
 
Zustimmungen: _R_A_L_F_
16 Februar 2014
162
4
18
#14
Danke für den Tipp Spicelab. Das man das ganze so auch machen kann, ist für mich wirklich Neuland :)

Wie unter dem Link zu sehen schaut das ganze schon "fast" perfekt aus. Nur werden nun einige Inhalte nicht mehr angezeigt. Ich sehe da jetzt aber keinen Fehler?
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#15
Danke für den Tipp Spicelab. Das man das ganze so auch machen kann, ist für mich wirklich Neuland :)

Wie unter dem Link zu sehen schaut das ganze schon "fast" perfekt aus. Nur werden nun einige Inhalte nicht mehr angezeigt. Ich sehe da jetzt aber keinen Fehler?
Ich glaube, Du hast mich komplett falsch verstanden o_O

So:
HTML:
<div class="row">
  <div id="gallerySlider">
    <div class="grid_3">
      <figure>
        <div class="placeholder">
          <a href="gallerie/pic-1.jpg" class="magnifier2"><img src="gallerie/pic-1.jpg" class="shootkl"><span class="zoom"></span></a>
        </div>
      </figure>
    </div>
    <!-- <div class="grid_3"> -->
    <!-- Vorschaubild #2  --> 
    <!-- </div> -->          
  </div>
</div>
habe ich es definitiv nicht gemeint, aber/und auch nicht in meinem Fiddle demonstriert, sondern so:
HTML:
<div id="gallerySlider">
  <div class="placeholder">
    <img src="gallerie/pic-1.jpg">
  </div>
</div>
Oder hätte ich in meinem heruntergebrochenen Code vielleicht besser <div id="galleryOverlay"> vor <div id="gallerySlider"> nennen sollen, damit Dir klar ist, wovon ich rede?

Eigentlich nicht, denn um das <img> herum fehlt bei mir so einiges, was es zum Vorschaubild auszeichnet - angefangen beim unmittelbaren <a> und <span>, bis hin zu <figure> und <div class="grid_3">.

Gestern abend tauchten noch #gallerySlider und .placeholder ausschließlich in der generierten Quellcode-Ansicht des Entwicklerwerkzeuges am Dokumentende zwischen <footer></footer><script></script> und </body></html> auf, wo eben per jQuery <div id="galleryOverlay"><div id="gallerySlider">...</div></div> mit der großen Bilderansicht generiert wird.

Aus diesem Grund ist dieser Abschnitt in der Browseransicht des HTML-Codes auch überhaupt nicht zu sehen - falls Dir das nicht bekannt/bewusst ist.

Und nun existiert <div id="gallerySlider"> im DOM doppelt, was für ID-Bezeichner aber grundsätzlich unzulässig ist! Sie müssen immer eindeutig im Dokumentbaum sein!

Sorry, will Dir hier nicht zu nahe treten, aber dieses Grundlagenwissen sollte sich ein jahrelang gewerblich tätiger Webdesigner längst angeeignet haben.

Auszug von touchTouch.jquery.js, woher sie stammen, wie sie in den (generierten) Code gelangen:
Code:
/* Private variables */
 
   var overlay = $('<div id="galleryOverlay">'),
       slider = $('<div id="gallerySlider">'),
       prevArrow = $('<a id="prevArrow"></a>'),
       nextArrow = $('<a id="nextArrow"></a>'),
       overlayVisible = false;
   
   
   /* Creating the plugin */
 
   $.fn.touchTouch = function(){
   
       var placeholders = $([]),
           index = 0,
           items = this;
   
       // Appending the markup to the page
       overlay.hide().appendTo('body');
       slider.appendTo(overlay);
   
       // Creating a placeholder for each image
       items.each(function(){
           placeholders = placeholders.add($('<div class="placeholder">'));
       });
Also nochmal:
  1. <div class="wasserz">&nbsp;</div> wird im HTML-Code entfernt.
  2. Seine existierende CSS-Formatierung wird mit den zwei zusätzlichen CSS-Regeln für das Pseudoelement ::after übernommen, das auf das vom jQuery-Script generierte <div class="placeholder"> folgen soll, um das Wasserzeichen über das große Bild zu legen (Selektordefinition: #gallerySlider .placeholder::after {}).
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#16
Hatte heute morgen keine Zeit, auf ein weiteres Detail näher einzugehen, deshalb jetzt die Fortsetzung.

Da die Galeriebilder skalierbar sind, müssen die Startpositionen top u. left für das Wasserzeichen entsprechend angepasst werden, damit es nicht deplatziert wird, was derzeit bei Dir noch der Fall ist, da sie sich auf die Boxenränder der .placeholder-Klasse beziehen, die das Browserfenster vollständig ausfüllt.

Die Ermittlung der einzelnen individuellen Positionswerte geschieht mit Hilfe von calc():
  1. https://developer.mozilla.org/de/docs/Web/CSS/calc
  2. https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Funktionen#Berechnungen_-_Die_calc-Funktion
Um die Technik grundsätzlich zu demonstrieren, habe ich 5 unverbindliche Breakpoints eingerichtet, die das Seitenverhältnis der Bilddatei beibehalten: https://jsfiddle.net/SpiceLab/L7h5yx0m/

Es steht Dir selbstverständlich offen, daran etwas zu ändern, es nach Deinen persönlichen Vorstellungen zu korrigieren.

Achtung: Durch die vier Fensteraufteilungen der JSFiddle-Seite, kann es bei unglücklichen Seitenverhältnissen des "Result"-Fensters unten rechts zu verfälschten Ergebnissen führen. Deshalb bitte das Ganze anschließend außerhalb von JSFiddle in Deiner Entwicklungsumgebung / auf Deinem Server testen.
 
16 Februar 2014
162
4
18
#17
Hallo Spicelab,

Danke für deine sehr ausführliche Hilfe.

Ja ich war da gestern wohl zu voreilig und habe die Antwort nicht wirklich verstanden und was mir natürlich klar ist und ich mich gewundert habe, war genau die Geschichte mit dem <div id="gallerySlider">

Mir ist klar, dass ich pro Seite dieses Element nur einmal aufrufen darf und wunderte mich, warum dies nun für jedes Bild der Fall sein soll. Aber klar, bei näherer Betrachtung war der Flüchtigkeitsfehler schnell klar.

Soweit funzt jetzt alles und vor allem die calc() Funktion ist eine tolle Eigenschaft die ich sicher noch öfters hernehmen werde in Zukunft ;)

Nur eine Frage noch. Wie ist es möglich die Position des Wasserzeichens in der Placeholder Klasse zu bestimmen. z.B. top: 30px; left: 20px; Denn, das geht ja nicht:

HTML:
#gallerySlider .placeholder::after {
    display:block;
    content:"";
    position: absolute;
    top: 300px;
    left: 200px;
    width: 200px;
    height: 20px;
            top: 30px;
            left: 20px;
    background-image:url(../images/wasserzeichen.png);
    background-repeat: no-repeat;
    background-size: 200px 20px;
    z-index: 100;
}
Dann wärs das :)
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#18
Nur eine Frage noch. Wie ist es möglich die Position des Wasserzeichens in der Placeholder Klasse zu bestimmen. z.B. top: 30px; left: 20px; Denn, das geht ja nicht:

HTML:
#gallerySlider .placeholder::after {
    display:block;
    content:"";
    position: absolute;
    top: 300px;
    left: 200px;
    width: 200px;
    height: 20px;
            top: 30px;
            left: 20px;
    background-image:url(../images/wasserzeichen.png);
    background-repeat: no-repeat;
    background-size: 200px 20px;
    z-index: 100;
}
Dann wärs das :)
Warum sollte das plötzlich nicht mehr gehen? In Zeile 5 u. 6 wurde es ja schon mal angewendet, wie auch in meinen Fiddles - falls Dir das entgangen sein sollte o_O

Oder wovon handelte sonst das letzte Demo, wenn nicht die Ermittlung 5 individueller left-/top-Werte mittels calc(), die Dich doch so schwer beeindruckt hat?:(
 
16 Februar 2014
162
4
18
#19
Ja genau deshalb wundert es mich ja :D

Ich habe die Seite jetzt mal aktualisiert mit den Änderungen und mit Absicht, mal höhere Werte eingestellt, nur ändert sich nichts :(
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#20
Ja genau deshalb wundert es mich ja :D

Ich habe die Seite jetzt mal aktualisiert mit den Änderungen und mit Absicht, mal höhere Werte eingestellt, nur ändert sich nichts :(
Autsch, schon wieder Grundlagenwissen: CSS Kaskade - Reihenfolge von Regeln und Deklarationen

Weil im direkten Anschluss die fünf Media Queries folgen, die für die jeweiligen Bildformate top u. left definieren, werden folglich Deine Angaben nach den Regeln der Kaskade überschrieben.

Zwischen den Queries untereinander geschieht ja auch nichts anderes, nur halt vor-, wie auch rückwärts, und das in Echtzeit :D
 
Top Bottom