zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wer kann mir helfen beim Erstellen dieser zwei Layouts?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2016, 23:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.04.2016, 00:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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>
und das dazugehörige CSS:

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;
}
HTML zum zweiten Layout:

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>
und das dazugehörige CSS:

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;
}
Zum direkten Bearbeiten eine komplette Webseite mit beiden Layouts:

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>
Und zur direkten Ansicht kurzzeitig ein Link zu meinem Testaccout:

Zwei Layouts

Gruss

MrMurphy

Geändert von MrMurphy (23.04.2016 um 06:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.04.2016, 09:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

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)
könnte ich wahrscheinlich auch

Code:
#divID
nehmen, oder?

Beim IE (ich weiß das dieser ein ganz spezieller Fall ist), ab welcher Version wird

Code:
background-color: hsla
unterstützt?

Und eine letzte Frage:

Code:
   display: flex;
   justify-content: flex-start;
Gibt es hierzu eine Alternative es anders zu platzieren/positionieren?

Geändert von bogazci (23.04.2016 um 10:14 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 23.04.2016, 13:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
könnte ich wahrscheinlich auch

#divID

nehmen, oder?
Nein, aus verschiedenen Gründen eher nicht:

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:
Beim IE (ich weiß das dieser ein ganz spezieller Fall ist), ab welcher Version wird background-color: hsla unterstützt?
Farben mit Transparenzmöglichkeiten wie hsla und rgba werden seit dem IE 9 unterstützt.

Zitat:
Gibt es hierzu eine Alternative es anders zu platzieren/positionieren?
Ja, aber dazu muss teilteilweise der Quelltext angepasst werden.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 23.04.2016, 13:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2009
Beiträge: 433
Austen sorgt für eine eindrucksvolle AtmosphäreAusten sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von bogazci Beitrag anzeigen
ab welcher Version wird Feature X unterstützt?
Das kannst du meistens hier nachschauen: Can I use... Support tables for HTML5, CSS3, etc
Mit Zitat antworten
  #6 (permalink)  
Alt 25.04.2016, 08:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank nochmal für die weiteren Antworten/Anmerkungen.

Zitat:
Gibt es hierzu eine Alternative es anders zu platzieren/positionieren?
Zitat:
Ja, aber dazu muss teilteilweise der Quelltext angepasst werden.
Das ist egal. Dadurch, dass das Flexible Box Layout Module unter IE bis v11 nicht sauber unterstützt wird und wohl auch mit 11 Bugs enthält, wäre ich hier tatsächlich auf eine andere Lösung angewiesen. Auf den von MrMurphy bereitgestellten Code bin ich nicht fixiert, so dass ich mit jeglicher Lösung welcher IE >9 kompatibel ist glücklich wäre.
Mit Zitat antworten
  #7 (permalink)  
Alt 25.04.2016, 11:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Dadurch, dass das Flexible Box Layout Module unter IE bis v11 nicht sauber unterstützt wird und wohl auch mit 11 Bugs enthält, wäre ich hier tatsächlich auf eine andere Lösung angewiesen.
Es ist schade dass du zu denen gehörst, die solchen Falschmeldungen Glauben schenken. Solche Falschmeldungen werden leider immer wieder verbreitet.

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>
Und auch hier kurzzeitig ein Link zum direkten Testen:

Lösung mit Float

Gruss

MrMurphy
Mit Zitat antworten
  #8 (permalink)  
Alt 25.04.2016, 17:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

Perfekt. Habe ich verstanden und kann den Code/CSS nachvollziehen. Vielen Dank hierfür.

Zitat:
Es ist schade dass du zu denen gehörst, die solchen Falschmeldungen Glauben schenken. Solche Falschmeldungen werden leider immer wieder verbreitet.
Wenn Du auf caniuse.com > Flexible Box Layout Module eingibst, dann steht das dort so ... Ich dachte das wäre eine seriöse Seite.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:06 Uhr.