Hallo zusammen,
ich arbeit mich gerade in die Thematik Flexbox und Gridsysteme ein. Was sich mir noch nicht ganz erschließt ist die Frage, wann verwende ich Flex und für welche Seiten sind Grids besser geeignet. Gibt es jemand der damit praktische Erfahrungen hat und mir eine Antwort geben kann?
Danke!
Ein interessantes Video!
Danke basti1012 und Sempervivum, nachdem ich die HTML-Datei auf den Webserver geladen habe, hat es geklappt. Also nochmal vielen Dank für eure Unterstützung und Geduld.
1. Das Javascript aus Posting #17 ist auf das HTML aus Posting #15 zugeschnitten.
2. Da die JS- und CSS-Datei von einem CDN geladen wird, benötigt man eine Internetverbindung. Ist das nicht gewünscht, muss man sie herunter laden und selber hosten.
Beide Varianten haben bei mir funktioniert. Wenn sie es bei dir nicht tun, dass poste mal den Code oder die URL der Seite.
Ich habe es bei aktiver Internetverbindung lokal getestet. Das Script aus #15 habe ich mit #17 ersetzt.
Hier kommt was ich auf dem Rechner habe:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<style>
#wrapper {
max-width: 600px;
width: 100%;
display: flex;
flex-wrap: wrap;
margin: auto;
}
figure {
margin: 0.5em;
flex-basis: calc(33% - 1em);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
figure img {
width: 100%;
height: auto;
min-height: 1px;
}
figure a {
min-height: 1px;
}
figure figcaption {
text-align: center;
}
</style>
<div id="wrapper">
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (1).jpg" alt="bild2" />
<figcaption>
Text Bild 1
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (2).jpg" alt="bild2" />
<figcaption>
Text Bild 2
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (3).jpg" alt="bild1" />
<figcaption>
Text Bild 3
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (4).jpg" alt="bild1" />
<figcaption>
Text Bild 4
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (5).jpg" alt="bild1" />
<figcaption>
Text Bild 5
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (7).jpg" alt="bild1" />
<figcaption>
Text Bild 6
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (8).jpg" alt="bild1" />
<figcaption>
Text Bild 7
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (9).jpg" alt="bild1" />
<figcaption>
Text Bild 8
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (10).jpg" alt="bild1" />
<figcaption>
Text Bild 9
</figcaption>
</figure>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<script>
$("figure img").each(function(idx, item) {
var url = $(this).attr("src");
var caption = $(this).next("figcaption").text();
$(this).wrap('<a></a>');
var atag = $(this).parent();
var caption = atag.next("figcaption").text();
atag.attr({href: url, "data-fancybox": "gallery", "data-caption": caption});
})
</script>
</body>
</html>
Hallo, weiß da jemand Bescheid? Wie muss man darauf reagieren? Gibt es Praxistipps? Woher bekommt man ein Zertifikat?
httpshttps://www.heise.de/newsticker/meldung/Chrome-markiert-bald-alle-HTTP-Webseiten-als-unsicher-3963924.html
Das geht selbstverständlich auch, indem man für data-fancybox einen Namen definiert:
Code$("figure img").each(function(idx, item) { var url = $(this).attr("src"); var caption = $(this).next("figcaption").text(); $(this).wrap('<a></a>'); var atag = $(this).parent(); var caption = atag.next("figcaption").text(); atag.attr({href: url, "data-fancybox": "gallery", "data-caption": caption}); })Versuch mal mit der Maus horizontal zu wischen oder auf dem Handy mit dem Finger ...
Hallo Sempervivum danke für das Script. Leider funktioniert der Code bei mir nicht. Die Fotos werden bei Anklicken nicht größer! 
Da gibt es doch fertige Plugins wie Fancybox, die so etwas wie Bildbeschreibung von Haus aus unterstützen. Mir unbegreiflich, dass man davon keinen Gebrauch macht, sondern immer wieder von neuem das Rad neu erfindet.
Ist damit eine Bildbox, wie von basti1012 realisiert, machbar? 3 Thumbnails in Reihe, n Reihen . Bei Klick großes Foto?
Hi basti1012, ich habe getestet und es sieht gut aus. Musste ein Bisschen die Größen anpassen. Wie bekomme ich jetzt die <figcaption> unter die Fotos?
Was verbirgt sich dahinter - <link rel="stylesheet" href="http://adblockers.opera-mini.net/css_block/default-domainless.css" type="text/css" /> ?
Danke bast1012. Ich werde mich am Wochenende mal drüber her machen. Das mit dem <iframe> mache ich für eine Bekannte, die ihre Webseite um's Verrecken nicht auf neue Gegebenheiten anpassen will. 
Ich fummle schon seit Tagen damit rum! Mir wäre hier ein Grid-System lieber. Vielleicht kann ich sie noch für ein neues Design überzeugen.
Hallo Basti1012, danke erst mal. Ich habe es mit disply:none getestet. Das funktioniert. Leider kann man dann jedes Foto nur einmal anschauen. Das ist nicht gut. Mit JS kenne ich mich gar nicht aus. Kannst du mir helfen?
Hallo zusammen,
ich habe mir eine Fotogalerie zusammengebaut und auf einen Testserver gestellt. http://lupus.bplaced.net/perennial.html Mit Chrome funktioniert alles bestens, aber wenn ich die Seite mit Firefox aufmache, ein Foto auswähle und dann auf das kleine Kreuz in der rechten oberen Ecke klicke, damit wieder die Übersicht angezeigt wird, springt die Anzeige hin und her. Das ist bei Chrome nicht der Fall. Ich habe dafür keine Erklärung. Kann mir jemand weiter helfen?
Danke.
Kann es sein, dass die für xampp erforderlichen Ports bei dir anderweitig belegt sind? Schau mal hier http://sevenx.de/blog/xampp-pr…tartet-nicht-port-belegt/
Mit dem Browser hat das m.E. nichts zu tun. Das Projekt muss unter C://xampp/htdocs gespeichert sein und wird über den Browser mit dem Befehl localhost/dateiname oder ordnername aufgerufen. Vorausgesetzt xampp läuft problemlos.
Alles anzeigenJa, das gibt es in PHP auch: http://php.net/manual/de/language.exceptions.php
Ein Forum? Puh, gute Frage. Relativ bekannt und dazu noch Open Source ist phpBB: https://www.phpbb.com
Habe ich mich aber noch nie damit beschäftigt. Kann dazu also nichts sagen.
Es gibt auch noch https://www.php.de/
Ich schicke Dir mal eine Anleitung für bplaced. Du brauchst auf jeden Fall filezilla odr einen anderen FTP-Client, um deine Dateien auf den Webspace bei bplaced zu übertragen,
Wenn du dir Kenntnisse in PHP aneignen willst, wirst du um ein Training nicht herumkommen. Es gibt verschiedenste Fachliteratur und sehr gute Videotrainings, die dir in überschaubaren Schritten die Fachkenntnisse vermitteln. einfach mal googlen oder da reinschauen -> https://www.php-kurs.com/funktionen-in-php.htm
Ich würde da mal reinschauen und mich schlau machen! https://www.html-seminar.de/html-seitenaufbau.htm
Wie blöd bin ich!!! Ich stand voll auf dem Schlauch. Danke Sempervivum. Manchmal reicht ein kurzes Anstubsen, dann ist man wieder auf der Schiene!
Der background-image Befehl ist im body Tag enthalten.
body {
background-image: url(images/water012.jpg);
font-size:100%;
margin:0em;
padding:0em;
}
Der mobile Stile sieht so aus.
/* Mobile Style */
@media screen and (max-width:930px) {
body {
font-size:90%;
}
}
@media screen and (max-width:930px) {
#main aside, #main article {
width:100%;
display:block;
margin:0.625em 0em 0.625em 0em;}
footer {
display: none;
}
}
@media screen and (min-width:931px) {
nav.nav {
display:block !important;
}
}
@media screen and (max-width:930px) {
body {
font-size:80%;
}
header h1 {
display: inline;
}
#menubar ul li a.menubutton {
display:block;
}
#main aside section {
display: list-item;
}
#main section article a.img160 {
width: 50%;
}
#main article iframe {
width: 90%;
}
nav {
display:none;
height:auto;
}
nav ul li {
display:block;
margin:0.3em 0em 0.3em 0em;
}
footer {
display: none;
}
}
Ich bin im Moment überfragt, wie ich den Befehl background-image "nicht anzeigen" darstellen soll.
Ich habe mit dem CSS Code background-image: url(images/water012.jpg); den Background einer Webseite gestaltet. Für kleine Bildschirme würde ich gerne diesen Befehl ausschalten, weiß aber nicht richtig wie? Kann jemand helfen?
