|
|||
Wer kann mir helfen beim Erstellen dieser zwei Layouts?
Hallo zusammen,
ich möchte auf meiner Website Bilder auflisten und zwei unterschiedliche Layouts ausprobieren. Skizziert habe mir das alles schon, bekomme es aber nicht hin Divs übereinander oder seitlich anzuordnen. Anbei zwei Screenshots: Für CSS Experten wahrscheinlich ein einfaches das umzusetzen, aber für mich als klassischer Entwickler ist CSS und Layouten etwas nebulös Bedanke mich im voraus für die Unterstützung. Viele Grüße Yavuz |
Sponsored Links |
|
|||
Hallo
Zur Zeit sehe ich folgende Möglichkeiten. HTML zum ersten Layout: Code:
<section class="layout01"> <div> <img src="http://lorempixel.com/250/400/animals/1" alt="Beispielbild"> </div> <div> <a href="" class="fa fa-facebook"></a> <a href="" class="fa fa-instagram"></a> <a href="" class="fa fa-twitter"></a> </div> </section> Code:
.fa { font-size: 1.5rem; width: 2rem; padding: 0.3rem; margin: 0; } .layout01 { position: relative; } .layout01>:nth-child(2) { background-color: hsla(0, 0%, 100%, 0.5); text-shadow: yellow 1px 1px 0px; display: block; position: absolute; bottom: 0; width: 100%; } .layout01>:nth-child(2) .fa { background-color: green; color: white; } Code:
<section class="layout02"> <div> <img src="http://lorempixel.com/250/400/animals/10" alt="Beispielbild"> </div> <div> <a href="" class="fa fa-facebook"></a> <a href="" class="fa fa-instagram"></a> <a href="" class="fa fa-twitter"></a> </div> </section> Code:
.fa { font-size: 1.5rem; width: 2rem; padding: 0.3rem; margin: 0; } .layout02 { display: flex; justify-content: flex-start; } .layout02>:nth-child(2) { display: flex; flex-direction: column; align-items: flex-start; } .layout02>:nth-child(2) .fa { background-color: blue; color: white; margin-bottom: 0.5rem; } .layout02>:nth-child(2) .fa:first-child { margin-top: 0.5rem; } Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> /*Icon-Font - font-family: 'FontAwesome';*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { width: 96%; margin: 1rem auto; } } /*Grafiken*/ @media all { figure, .bild01, .bild02 { margin: 0; min-width: 0; max-width: 100%; } img { /*text-align: bottom;*/ display: block; min-width: 0; max-width: 100%; max-height: 100vh; border: 0; } } /* ==================================================== */ /* ***Ab hier beginnen die Angaben zur Problemlösung*** */ /*Spezielle Einstellungen*/ @media all { main { padding: 1rem; display: flex; justify-content: space-around; } main>* { border: 3px solid blue; margin: 1rem; flex-grow: 1; flex-shrink: 1; flex-basis: 1%; } .fa { font-size: 1.5rem; width: 2rem; padding: 0.3rem; margin: 0; } .layout01 { position: relative; } .layout01>:nth-child(2) { background-color: hsla(0, 0%, 100%, 0.5); text-shadow: yellow 1px 1px 0px; display: block; position: absolute; bottom: 0; width: 100%; } .layout01>:nth-child(2) .fa { background-color: green; color: white; } .layout02 { display: flex; justify-content: flex-start; } .layout02>:nth-child(2) { display: flex; flex-direction: column; align-items: flex-start; } .layout02>:nth-child(2) .fa { background-color: blue; color: white; margin-bottom: 0.5rem; } .layout02>:nth-child(2) .fa:first-child { margin-top: 0.5rem; } } /* *** Ende der Angaben zur Problemlösung*** */ /* ===================================================== */ /* Vorlage zum Kopieren für Media Queries - Mobile first */ @media only screen and (min-width: 0px) { } /* Vorlage zum Kopieren für Media Queries - Desktop first */ @media only screen and (max-width: 0px) { } </style> </head> <body> <main role="main"> <section class="layout01"> <div> <img src="http://lorempixel.com/250/400/animals/1" alt="Beispielbild"> </div> <div> <a href="" class="fa fa-facebook"></a> <a href="" class="fa fa-instagram"></a> <a href="" class="fa fa-twitter"></a> </div> </section> <section class="layout02"> <div> <img src="http://lorempixel.com/250/400/animals/10" alt="Beispielbild"> </div> <div> <a href="" class="fa fa-facebook"></a> <a href="" class="fa fa-instagram"></a> <a href="" class="fa fa-twitter"></a> </div> </section> </main> </body> </html> Zwei Layouts Gruss MrMurphy Geändert von MrMurphy (23.04.2016 um 06:01 Uhr) |
Sponsored Links |
|
|||
Mein Gott, das ist verrückt! So schnell hinbekommen, danke Dir vielmals! ABER ich möchte schon verstehen was hier passiert und nicht einfach nur kopieren, sondern auch lernen. Einige Dinge kenne ich nicht und deswegen folgende Fragen:
Anstatt Code:
.layout02>:nth-child(2) Code:
#divID Beim IE (ich weiß das dieser ein ganz spezieller Fall ist), ab welcher Version wird Code:
background-color: hsla Und eine letzte Frage: Code:
display: flex; justify-content: flex-start; Geändert von bogazci (23.04.2016 um 10:14 Uhr) |
|
|||
Hallo
Zitat:
ID sollten nur verwendet werden, wenn sie auf einer Webseiten nur einmal auftauchen dürfen. Das sie nur einmal auftauchen sollen reicht nicht. Anfänger neigen dazu ID viel zu häufig zu verwenden, weil sie sie ohne nachvollziehbaren Grund für wichtig oder besser als andere Lösungen halten. Bei aktuellem HTML / CSS sollen Inhalt und Gestaltung so weit wie möglich getrennt werden. Dazu gehört, in den HTML-Teil (den body-Bereich) so wenig Layoutangaben wie möglich zu schreiben. Dies betrifft auch id und class, die möglichst vermieden werden sollen. Sie können zwar noch ähnlich häufig wie früher verwendet werden, das ist aber schlechter Stil. Außerdem macht mir dein Herumreiten auf div-Elemente Sorgen. div-Elemente sind zwar noch zulässig, dürfen aber nur verwendet werden, wenn es keine geeigneteren Container wie main, article, section, aside, figure und so weiter gibt. Zitat:
Zitat:
Gruss MrMurphy |
|
|||
Das kannst du meistens hier nachschauen: Can I use... Support tables for HTML5, CSS3, etc
|
|
|||
Vielen Dank nochmal für die weiteren Antworten/Anmerkungen.
Zitat:
|
|
|||
Hallo
Zitat:
Eine andere Lösung ist mit float möglich. Auch dazu habe ich ein Beispiel erstellt. Das verhält sich natürlich leicht anders als die Lösung mit Flexbox. Lösung mit float: Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout 02 float</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> /*Icon-Font - font-family: 'FontAwesome';*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { width: 96%; margin: 1rem auto; } } /*Grafiken*/ @media all { figure { margin: 0; min-width: 0; max-width: 100%; max-height: 100vh; } img { /*text-align: bottom;*/ display: block; min-width: 0; max-width: 100%; max-height: 100vh; border: 0; } } /* ==================================================== */ /* ***Ab hier beginnen die Angaben zur Problemlösung*** */ /*Spezielle Einstellungen*/ @media all { main { padding: 1rem; } main>* { float: left; width: calc(50% - 2rem); border: 3px solid blue; margin: 1rem; } .fa { font-size: 1.5rem; width: 2rem; padding: 0.3rem; margin: 0; } .layout01 { position: relative; min-width: 250px; } .layout01>:nth-child(1) { } .layout01>:nth-child(2) { background-color: hsla(0, 0%, 100%, 0.5); display: block; position: absolute; bottom: 0; width: 100%; } .layout01>:nth-child(2) .fa { background-color: green; color: white; } .layout02 { overflow: hidden; min-width: calc(250px + 2rem + 6px); } .layout02>:nth-child(1) { float: left; } .layout02>:nth-child(2) { float: left; width: 2rem; } .layout02>:nth-child(2) .fa { background-color: blue; color: white; margin-bottom: 0.5rem; } .layout02>:nth-child(2) .fa:first-child { margin-top: 0.5rem; } } /* *** Ende der Angaben zur Problemlösung*** */ /* ===================================================== */ /* Vorlage zum Kopieren für Media Queries - Mobile first */ @media only screen and (min-width: 0px) { } /* Vorlage zum Kopieren für Media Queries - Desktop first */ @media only screen and (max-width: 0px) { } </style> </head> <body> <main role="main"> <article class="layout01"> <figure> <img src="http://lorempixel.com/250/400/animals/1" alt="Beispielbild"> </figure> <section> <a href="" class="fa fa-facebook"></a> <a href="" class="fa fa-instagram"></a> <a href="" class="fa fa-twitter"></a> </section> </article> <article class="layout02"> <figure> <img src="http://lorempixel.com/250/400/animals/10" alt="Beispielbild"> </figure> <section> <a href="" class="fa fa-facebook"></a> <a href="" class="fa fa-instagram"></a> <a href="" class="fa fa-twitter"></a> </section> </article> </main> </body> </html> Lösung mit Float Gruss MrMurphy |
|
|||
Perfekt. Habe ich verstanden und kann den Code/CSS nachvollziehen. Vielen Dank hierfür.
Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bildergalerie erstellen?? | Schorti | (X)HTML | 0 | 09.10.2013 22:20 |
PHP Countdown erstellen | PHP-Freak | Serveradministration und serverseitige Scripte | 3 | 29.10.2012 17:58 |
Probleme beim Erstellen einer Box | infected | CSS | 2 | 02.08.2008 20:23 |
Runde Ecken und Transparenz: ich beiss mir die Zähne aus | Dwarf | CSS | 4 | 13.05.2007 19:10 |
Ratschläge bei Publizierung eines fertigen Layouts gesucht | Black Fladder | CSS | 55 | 05.09.2004 15:30 |