nicht angemeldet
Schaut euch diesen Code mal bitte an, ein Online Beispiel gibt es hier http://jsfiddle.net/Kp5LQ/1/
Ist mein Ansatz richtig oder mache ich jetzt schon etwas falsch?
Mein HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vorlage</title>
<link href="media/design/css/screen.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container cf">
<div class="kopf"><h1>Kopfbereich</h1></div>
<div class="navigation">
<ul>
<li><a href="#">Über uns</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div class="inhalt">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><img src="http://placehold.it/525x350" alt="Demo Grafik"></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>
</html>
Mein CSS Code:
* {
mox-box-sizing: border-box;
webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
body {
margin: 0;
padding: 0;
background-color: #43373F;
color: #634C5C;
line-height: 1.3;
font-family: sans-serif;
font-size: 1em;
}
img {
max-width: 100%;
height: auto;
}
.container {
background: #efefef;
width: 95%;
margin: 0 auto;
max-width: 980px;
}
.kopf {
background-color: #48d1cc;
color: #fff;
padding: 1.875em;
}
.kopf h1 {
font-weight: normal;
text-align: center;
}
.navigation {
width: 37.5%;
float: left;
padding: 3.125%;
}
.inhalt {
background-color: #fff;
float: left;
width: 62.5%;
padding: 3.125%
}
a:link, a:visited {
color: ce6634;
text-decoration: none;
}
@media screen and (max-width: 400px) {
.container {
width: 100%;
}
.inhalt {
text-align: justify;
padding: 5.5%
}
.navigation, .inhalt {
float: none;
width: auto;
}
.navigation ul {
padding-left: 0;
}
.navigation li {
display: inline-block;
list-style-type: none;
padding: 0 3%;
}
}
Frage zwei, wie müsste ich meinen Breakpoint anpassen, dass ich von „max-width: 400px“ auf max-width: xxxem“ komme? Muss ich hier auch von 16px ausgehen? Dann wäre dieses „max-width: 25em“
Berechnung: (400/16)
Frage drei, in meinem CSS Code stehen derzeit noch % Werte, müssten diese ebenfalls auf „em“ umgeschrieben werden, oder können diese auf % bleiben?
Wenn ich dieses soweit richtig verstanden habe, dann verstehe ich so langsam wo der Weg hin geht. Man passt sich das ganze NICHT auf eine starre Größe an wie z.B. 320px sondern schaut, ab welchem Zeitpunkt der Content nicht mehr gut aussieht, richtig?
Bevor jetzt einige sagen, warum verwendest du kein <nav> <footer> usw. das kommt noch, ich will es erstmal richtig verstehen bevor ich mich an die anderen Sachen wage.
Gunnar Bittersmann
Auge