Hallo, ich bin neu hier (und bei HTML5), grüße alle und überfalle Euch gleich mit einer Aufgabenstellung:
Bin dabei eine Webapp zu bauen, die sowohl auf Destop, Tablet und Mobile (Phone und Phablet) laufen soll. Das Mobile UI unterscheidet sich recht stark von den beiden anderen.
Jetzt komme ich mit den CSS-Attributen position, display und float noch nicht so ganz klar. Anbei zwei Screenshots, die das Problem veranschaulichen.
Der entsprechende Code dazu:
HTML
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1"> <title>CSS Test 2</title> <style type="text/css"> .main { padding: 20px 0; background-color: #333; /* dark */ } .articlelist { padding: 10px 0; list-style: none; background-color: #ee4; /* yello */ } .articlelistitem { display: block; padding: 0; margin: 0; background-color: #fff; } .boxx { display: block; background-color: #7ff; /* green */ padding: 20px; margin: 0; box-shadow: 1px 1px 3px #aaa; } .cb { display: inline; /* background-color: #f7f; */ /* pink */ margin: 0; padding: 5px 10px 0 0; } .gi { display: inline; background-color: #3fa; /* p */ margin: 0; padding: 5px 20px 0 10px; } .boxx span { display: inline-block; margin: 0 5px; } .textboxx { display: block; float: none; min-width: 10%; background-color: #ddd; /* grey */ padding: 1px; margin: 1px; } @media (min-width: 768px) { .textboxx { display: inline; float: none; margin: 0; } } .headline { display: inline-block; } .headline::after { content: ": "; font-weight: 700; } @media (min-width: 768px) { .headline { display: inline-block; } } .subline { display: block; } @media (min-width: 768px) { .subline { display: inline-block; } } .datetime { display: block; float: none; background-color: #9e9; border-radius: 5px; margin: 1px } @media (min-width: 768px) { .datetime { display: inline-block; float: right; margin: 4px 0; } } </style> </head> <body> <div class="main"> <ul class="articlelist"> <li class="articlelistitem"> <div class="boxx"> <div class="cb"> <input type="checkbox" checked=""></input> </div> <span><strong>AAA</strong></span> <span>341</span> <div class="textboxx"> <span class="headline"><strong>Headline</strong></span> <span class="subline">Lorem ipsum dolor sit amet.</span> <span class="datetime">15.07.2014 17:00</span> </div> </div> </li> </ul> </div> </body> </html>
Wo muss ich den Hebel ansetzen?