Ich versuche mich gerade etwas in responsiven Webseiten und habe schon hin und her gebaut, aber ich habe Schwierigkeiten mit dem CSS und es bisher nicht hinbekommen. Kann mir da mal jemand die wrapper-Klasse zentrieren?
<DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>"Ein Seitentitel"</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #E2EAE1;
font-family: sans-serif;
}
p {
padding-top: 0.75em;
text-align: center;
}
img {
display: block;
margin: 0 auto
}
#container {
margin: 0 auto;
}
#container .wrapper {
height: 5em;
background: #fff;
display: table-cell;
}
.left_row {
width: 3.125em;
text-align: right;
float: left;
}
.right_row {
width: 12.500em;
padding-left: 0.75em;
float: left;
}
.right_row ul, .left_row ul {
list-style: none;
color: #437346;
}
footer {
clear: both;
}
[noparse @med ia[/noparse] screen and (max-width:400px) {
body {
font-size: 75%;
}
img {
width: 75%;
height: auto;
}
}
</style>
</head>
<body>
<div id="container">
<img src="http://forum.byte-welt.net/images/logo.png" width="295" height="210" alt="Logo">
<img src="http://forum.byte-welt.net/images/titel.png" width="323" height="90" alt="Schriftzug">
<p class="name">Eine Textzeile mit einem Namen</p>
<p class="address">Musterstraße Nr. · PLZ - Musterort</p>
<div class="wrapper">
<div class="left_row">
<ul>
<li>Tel.:</li>
<li>Fax:</li>
<li>Mobil:</li>
<li>eMail:</li>
</ul>
</div>
<div class="right_row">
<ul>
<li>+49 (0) 1234-12345</li>
<li>+49 (0) 1234-12345</li>
<li>+49 (0) 123-1234567</li>
<li>kontakt@domain.de</li>
</ul>
</div>
</div>
</div>
<footer></footer>
</body>
</html>
Das media query wurde vom Parser umgesetzt, [noparse] mag er nicht im html-Tag parsen. Ich habe es so gelassen…