Hi bin dabei eine Webseite zu Programmieren die komplett responsive ist. Dabei sollen links 3 Navigationspunkte im Header sein, dann das Logo in der Mitte und rechts 3 andere Navigationspunkte hier einmal mein Code denn ich habe, für die Screen Seite ist es Perfekt leider klappt es für die Tablet Version nicht, weil die Navigation hinter das Logo läuft. Im Original ist das CSS natürlich extern. Wer sich die Mühe macht mir zu helfen danke ich sehr.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
@media screen and (min-width: 960px) {
* {
margin: 0px;
padding: 0px;
}
body {
}
/* Header */
#wrapper_head {
width: 100%;
height: 125px;
background:#eee;
}
header {
width: 960px;
height: 125px;
background:#eee;
font-family: Helvetica, Arial, Tahoma, sans-serif;
font-size:16px;
color:#000;
margin: 0px auto;
}
#logo{
width: 235px;
height: 155px;
position:absolute;
z-index:998;
margin-left: 363px;
background-color:#03F;
}
/* Navigation */
#nav_links {
margin-top: 100px;
float:left;
}
#nav_rechts {
margin-top: 100px;
float:right;
}
ul {
list-style-type:none;
color:#000;
}
li {
display: inline;
}
.nav:hover {
color:#B20000;
border-bottom:solid 2px #B20000;
}
.links li {
margin-left:35px;
}
.rechts li {
margin-right:45px;
}
a {
text-decoration:none;
color:#000;
}
/* ende Navigation */
/* ende header */
}
@media screen and (max-width: 960px) {
* {
margin: 0px;
padding: 0px;
}
/* Header */
#wrapper_head {
width: 100%;
height: 125px;
background:#eee;
}
header {
max-width: 100%;
height: 125px;
background:#eee;
font-family: Helvetica, Arial, Tahoma, sans-serif;
font-size:14px;
color:#000;
margin: 0px auto;
}
#logo {
width: 235px;
height: 155px;
position: absolute;
z-index:998;
margin-left: 38%;
background-color:#00F;
}
/* Navigation */
#nav_links {
margin-top: 100px;
display:block;
float:left;
}
#nav_rechts {
margin-top: 100px;
display:block;
float: right;
}
ul {
list-style-type:none;
color:#000;
}
li {
display: inline;
}
.nav:hover {
color:#B20000;
border-bottom:solid 2px #B20000;
}
.links li {
margin-left:20px;
}
.rechts li {
margin-right:28px;
}
a {
text-decoration:none;
color:#000;
}
/* ende Navigation */
/* ende header */
}
</style>
</head>
<body>
<!-- Header -->
<div id="wrapper_head">
<header>
<div id="nav_links">
<ul class="links">
<a href="#"><li class="nav">Home</li></a>
<a href="#"><li class="nav">Unser Team</li></a>
<a href="#"><li class="nav">Referenzen</li></a>
</ul>
</div>
<div id="logo">
</div>
<div id="nav_rechts">
<ul class="rechts">
<a href="#"><li class="nav">Makler</li></a>
<a href="#"><li class="nav">Verwalter</li></a>
<a href="#"><li class="nav">Kontakt</li></a>
</ul>
</div>
</header>
</body>
</html>