|
|||
Wie bekomme ich das Layout hin?
Hallo zusammen,
ich würde gerne eine Seite mit einem zweispaltigen Layout bauen. Das soll Blogähnlich aufgebaut werden. Also der aktuellste Artikel oben links, rechts daneben der zweitaktuellste. Links drunter dann der dritte, rechts drunter der vierte etc... Ich bin noch Anfänger und frage mich ob es bessere Methoden gibt, als diese mit "divs" zu lösen? Und wie erreiche ich es, dann das Layout bei kleinen Bildschirmen nicht mehr nebenbeinander, sondern untereinander angezeigt wird? Und gibt es die Möglichkeit diesen "divs" auch feste Höhen zuzuweisen? Am Besten auch Prozentual angepasst an jeden Bildschirm. Anbei ein Beispielbild und der CSS-Code. Besten Dank im Voraus! Code:
* { margin: 0; padding: 0; } html * { box-sizing: border-box; } header { width: 100%; max-width: 1200px; padding: 0px; margin: 0 auto; margin-bottom: 2em; height: 100%; background-color: white; color: #FF0015; text-align: right; } #titelbild img { width: 100%; max-width: 1200px; vertical-align: bottom; border-top: 1px solid #BE000C; } nav { cursor: pointer; } nav>ul { width: 100%; max-width: 1200px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } nav li { width: 100%; max-width: 1200px; border: 1px solid #BE000C; border-left: none; border-right: none; font-family: Arial; padding: 0; font-size: 1.5rem; flex: 1 1 0%; } @media (min-width: 45em) { nav>ul { flex-direction: row; } nav li { flex: 1; font-size: 1em; } } nav a { display: block; padding: 0.4em; text-decoration: none; font-weight: bold; text-align: center; color: #BE000C; } nav li[aria-current] a { background-color: #BE000C; color: white; font-family: Arial; } nav a:focus, nav a:hover, nav li[aria-current] a:focus nav li[aria-current] a:hover { background-color: #BE000C; color: white; } nav li[aria-current] a:focus, nav .submenu li a{ color: #BE000C; background-color: white; } nav li a:hover, nav li:hover .submenu { color: white; background-color: #BE000C; } nav .submenu li[aria-current] a { color: white; background-color: #BE000C; } /* submenu navigation links */ nav > ul > li { position: relative; } nav .submenu { position: absolute; visibility: hidden; width: 100%; height: 0; z-index: 1000; } nav .submenu li { display: block; border-top: none; /* width: 15em; */ } /** Show the submenu on hover, focus **/ nav li:hover .submenu, nav li:active .submenu, nav li:focus .submenu { visibility: visible; height: auto; background-color: white; border-right: 1px solid #BE000C; border-left: 1px solid #BE000C; border-top: 1px solid #BE000C; } i{ float: right; } body * { box-sizing: border-box; } #Listex { color: #BE000C; } body { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1em; height: 100%; background-color: white; } body a, body a:visited { color: #BE000C; text-decoration: none; } #inhalt p { margin-bottom: 1em; width: 80%; } p { font-family: Verdana; font-size: 1em; line-height: 120%; } h2 { text-decoration: none; padding-bottom: 1em; } } #inhalt { background-color: white; } nav { background-color: white; } aside#banner-rechts { color: grey; margin-left: 1em; background-color: white; float:right; text-align: left; width: 20%; } aside#banner-rechts img{ width: 100%; float: right; border: 1px solid black; } figure a { text-decoration: none; color: blue; } figure a:visited { color: blue; } figure a:hover { text-decoration: underline; } #Werbung img { align: right; } #Baustelle { margin-top: 1em; } #Baustelle img { width: 25%; display: block; margin: 0 auto; } footer { width: 100%; max-width: 1200px; margin: 0 auto; background-color: white; } footer p { text-align: right; color: #BE000C; display: none; } } body ul { margin-bottom: 1em; } #inhaltlinks { color: #BE000C; float: left; outline: 1px solid #BE000C;; width: 49%; } #inhaltrechts { color: #BE000C; float: right; outline: 1px solid #BE000C;; width: 49%; } |
Sponsored Links |
|
|||
CSS ohne HTML ist recht sinnlos, aber hier mal ein kurzes Beispiel:
Copy-paste diesen Code auf zB jsfiddle.net um das mal anzuschauen. Alternativ kannst du natürlich auch display: grid verwenden. Ist hier vielleicht sogar besser, aber ich bin nun mal schneller ein Beispiel mit flexbox zu erstellen. Code:
<div class="articles"> <div class="article"> Eins </div> <div class="article"> Zwei </div> <div class="article"> Drei </div> </div> * { box-sizing: border-box; } .articles { display: flex; flex-wrap: wrap; } .article{ flex: 0 0 50%; border: 1px solid red; min-height: 20vh; } @media (max-width: 500px) { .article { flex: 0 0 100%; } } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bekomme das Layout nicht hin | Kuchipatchi | CSS | 5 | 15.03.2011 16:21 |
Layout! bekomme es nicht hin bitte hilfe | designfreak | CSS | 3 | 12.09.2007 12:24 |
Wie bekommt man dieses Layout hin? | ComLar | CSS | 11 | 12.08.2007 20:29 |
Ich kriege mein CSS Layout nicht hin :( | ConiKost | CSS | 6 | 17.02.2006 13:54 |