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

Bekomme Lightbox nicht zum laufen

Werbung:
Nachtrag.

Was die JPGs grundsätzlich angeht, würde ich die Kompression erhöhen - da steckt mit Blick auf ihre Dateigrößen viel Einsparungspotential drin, ohne sichtbaren Qualitätsverlust :cool:

Und bei den Thumbnails geht's eh locker bis auf wenige KB runter :D
 
Zuletzt bearbeitet:
Werbung:
Okay .. ich weiß nicht warum aber ich dachte mir grade mal so .. ich lösche den alten lightbox ordner und füge meinen neuen nochmal hinzu .. und siehe da es geht ...
 
Werbung:
Ich weiß ich nerv dich bestimmt .. aber ich hab noch eine letzte Frage .. weißt du zufällig warum dieser Footer Code bei mir nicht funktioniert ? Der Text wird immer ganz links angezeigt obwohl ich dieses element aus meiner Übung (Screen in Ordner 11 bei meinem Dokument) einfach kopiert habe und der Text da mittag angezeigt wird.

HTML: 
<footer>
<p>&copy; <a style="text-decoration:none" href="http://www.hs-bremerhaven.de/">www.Yasmin.Schultz.de</a> dies ist eine falsche Adresse</p>
<address>Yasmin yasmins......</address>
</footer>
Code: 
footer {
    position: fixed;
    left: 0;
    width: 100%;
    height:5%;
    bottom: 0;
    padding-bottom: 1em;
    background-color: #E3E3E3;
    line-height: 7px;
    text-align: center;
    color: black;
}

footer p {
    margin-top:15px;
    margin-bottom:auto;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    width: 80%;
    font-size: 0.8em;
    color: black;
    padding-top: 5px;
}

footer address {
    font-size: 0.8em;
}
 
Beziehe mich hier auf Portfolio.html:

Fehler Nr.1: Im HTML fehlen am Ende (vor dem Script) zwei schliessende </div> für .content und .content-text-space.

Fehler Nr.2: Alle Media Queries enden nicht mit zwei schliessenden }-Klammern.


PS: Und noch vier grundsätzliche Hinweise.

1. Die Breite von topBanner.jpg sollte nicht absolut (px) sondern relativ (%) gesetzt werden, ansonsten überlappt die Grafik bei kleineren Fensterbreiten die übrige Seite, und es kann unnötigerweise nach rechts gescrollt werden.

Aus:
HTML: 
<img src="topBanner.JPG" alt"" width="1517" class="top-pic">
wird:
HTML: 
<img src="topBanner.JPG" alt="" width="100%" class="top-pic" />


2. Selbst wenn die Seite nicht auf einem Webserver bereitgestellt werden soll, mußt Du beachten, dass im Gegensatz zum Windows-Betriebssystem ein Webserver zwischen Groß- und Kleinschreibung unterscheidet.

Die Dateiendung von topBanner.jpg ist kleingeschrieben, im HTML schreibst Du sie aber groß. Auf dem Webserver würde diese Grafik nicht gefunden, respektive angezeigt werden.

Also:
HTML: 
<img src="topBanner.jpg" alt="" width="100%" class="top-pic" />


3. Wenn in CSS eine Berechnung erfolgen soll, wird diese mit calc() durchgeführt, ansonsten zeigt sie überhaupt keine Wirkung.

Aus:
CSS: 
  width:100% -106px;
wird:
CSS: 
  width:calc(100% -106px);


4. Gleichlautende CSS-Regelblöcke lassen sich gruppieren/zusammenfassen, und den Code somit gehörig abspecken.

Aus:
CSS: 
.pic1 {
   ...
   max-width :100%;
   height: auto;
   -webkit-filter: grayscale(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.pic2 {
   max-width:100%;
   height:auto;
   -webkit-filter: grayscale(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.pic3 {
   max-width:100%;
   height: auto;
   -webkit-filter: grayscale(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
/* usw. bis .pic9 */
wird:
CSS: 
.pic1, .pic2, .pic3, .pic4, .pic5, .pic6, .pic7, .pic8, .pic9 {
   max-width:100%;
   height:auto;
   -webkit-filter: grayscale(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
Gleiches gilt in diesem Zusammenhang für [.pic1 - .pic9]:hover.
 
Zuletzt bearbeitet:
Hab das jetzt soweit alles mal geändert, dankeschön.. das top banner ist jetzt auch angepasst in der Größe ! Letztes Sorgenkind der Footer :D
 
Werbung:
Zur Verdeutlichung bzgl. der fehlerhaften Media Queries:
CSS: 
@media screen and (max-width: 1700px) {

  p.big-text {
   ...
  }
  p.white {
    ...
  }
  a.navigation {
    ...
  }
  a.navigation:hover {
    ...
  }

} /* diese }-Klammer fehlt */


@media screen and (max-width: 1250px) {

  p.big-text {
     ...
  }
  p.white {
     ...
  }
  a.navigation {
     ...
  }
  a.navigation:hover {
     ...
  }
  .content-navigation {
     ...
  }

} /* diese }-Klammer fehlt */


@media screen and (max-width: 863px) {

  * {
     ...
  }

} /* diese }-Klammer fehlt */
Und die zwei fehlenden </div> vor dem Script fix einzufügen, ist ja auch keine besonders hohe Hürde :D
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben