Vorgehensweise für Image-Thumbnail-Einbindung gesucht bearbeitet von MrMurphy1 09.09.2015 16:44 Hallo, ich würde das folgendermaßen machen: ~~~ <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Bildergalerie 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /*Grundeinstellungen*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); @media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-size: 120%; } body { padding: 0; } } /*Spezielle Einstellungen*/ @media all { main { display: flex; flex-wrap: wrap; /* Die unterste der drei folgenden Möglichkeiten ist aktiv. Zum Testen einfach mal tauschen. */ justify-content: space-between; justify-content: flex-start; justify-content: space-around; } figure, figcaption { padding: 0; margin: 0; } figure { position: relative; max-width: 100px; margin: 0.3rem 0.2rem; } figure img { max-width: 100%; display: block; } figcaption { text-align: center; position: absolute; bottom: 0; width: 100%; color: white; background: rgba(0,0,0,0.5); } } </style> </head> <body> <main> <figure> <img src="http://www.andre-schuerrle.de/wp-content/themes/andre/library/images/facebook_post_thumbnail_100x100.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor"> <figcaption>Nürnberger Tor</figcaption> </figure> <p>Die restlichen Bilder in figure-Elementen wie das erste (oder dieses bliebig häufig kopieren) und diesen Hinweis löschen.</p> </main> </body> </html> ~~~ Gruss MrMurphy
Vorgehensweise für Image-Thumbnail-Einbindung gesucht bearbeitet von MrMurphy1 09.09.2015 16:47 Hallo, ich würde das folgendermaßen machen: ~~~ <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Bildergalerie 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /*Grundeinstellungen*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); @media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-size: 120%; } body { padding: 0; } } /*Spezielle Einstellungen*/ @media all { main { display: flex; flex-wrap: wrap; /* Die unterste der drei folgenden Möglichkeiten ist aktiv. Zum Testen einfach mal tauschen. */ justify-content: space-between; justify-content: flex-start; justify-content: space-around; } figure, figcaption { padding: 0; margin: 0; } figure { position: relative; max-width: 100px; margin: 0.3rem 0.2rem; } figure img { max-width: 100%; display: block; } figcaption { text-align: center; position: absolute; bottom: 0; width: 100%; color: white; background: rgba(0,0,0,0.5); } } </style> </head> <body> <main> <figure> <img src="http://www.andre-schuerrle.de/wp-content/themes/andre/library/images/facebook_post_thumbnail_100x100.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor"> <figcaption>Nürnberger Tor</figcaption> </figure> <p>Die restlichen Bilder in figure-Elementen wie das erste und diesen Hinweis löschen.</p> </main> </body> </html> ~~~ Gruss MrMurphy
Vorgehensweise für Image-Thumbnail-Einbindung gesucht bearbeitet von MrMurphy1 09.09.2015 16:46 Hallo, ich würde das folgendermaßen machen: ~~~ <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Bildergalerie 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /*Grundeinstellungen*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); @media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-size: 120%; } body { padding: 0; } } /*Spezielle Einstellungen*/ @media all { main { display: flex; flex-wrap: wrap; justify-content: space-between; justify-content: flex-start; justify-content: space-around; } figure, figcaption { padding: 0; margin: 0; } figure { position: relative; max-width: 100px; margin: 0.3rem 0.2rem; } figure img { max-width: 100%; display: block; } figcaption { text-align: center; position: absolute; bottom: 0; width: 100%; color: white; background: rgba(0,0,0,0.5); } } </style> </head> <body> <main> <figure> <img src="http://www.andre-schuerrle.de/wp-content/themes/andre/library/images/facebook_post_thumbnail_100x100.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor"> <figcaption>Nürnberger Tor</figcaption> </figure> <p>Die restlichen Bilder in figure-Elementen wie das erste und diesen Hinweis löschen.</p> </main> </body> </html> ~~~ Gruss MrMurphy
nicht angemeldet
