Layoutproblem bei Mobile

  • 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?

  • Die AAA box und die Headline box in nen div oder so packen, die width von deer headline Box und der AAA Box auf 50% setzen und float left.

    Darauf achten das die boxen kein padding/margin haben, btw den padding durch

    CSS
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */


    Unterbinden (mit Browser Kürzeln schreiben..!).


    Wenn ich es schaffe werde ich nacher mal ein Best Practices zum Thema Responsive Design Schreiben. :)

    2 Mal editiert, zuletzt von wolf (21. März 2014 um 18:27)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!