Hallo liebe Experten,
ich habe leider ein kleines Problem bei meinem jetzigen Website Layout:
Bisher habe ich nur versucht den Header responsive darzustellen. Es ist mittlerweile soweit, dass es ungefähr so aussieht wie es soll. Verkleinert man jedoch die Höhe des Fensters, so ändert sich wieder alles.
Ich denke das liegt daran, dass ich mit position:absolute gearbeitet habe (?)
Ich glaube, dass das ganze schlecht geschrieben ist und bitte jetzt um Hilfe, wie ich alles verbessern kann.
Hier der Code:
HTML-Code:
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
<meta charset="ISO-8859-1">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/opensans.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="logo.svg" id="logo"/>
<img src="buchenbutton.png" id="buchenbutton" />
<h1>LiLa Percussion Duo <br/>
<small>Music without anything</small></h1>
<nav>
<ul>
<li>Ü<small>BER LILA</small></li>
<li>G<small>ALERIE</small></li>
<li>K<small>ONTAKT</small></li>
</ul>
</nav>
<div id="navabtrennung">
</div>
</header>
</body>
</html>
CSS:
Code:
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
img {
max-width: 100%;
height: auto;
}
h1{
color: #e2e2e2;
padding-top: 5%;
font-size: 2em;
width: 80%;
margin-left: 10%;
clear: both;
}
h1 small {
font-size: 0.5em;
}
header {
background: #242120;
text-align: center;
position: relative;
}
#navabtrennung {
position: absolute;
bottom: 0;
left: 10%;
width: 80%;
background: #333333;
height: 5%;
}
#logo {
width: 50%;
float: left;
}
#buchenbutton {
position: absolute;
top: 0;
right: 0;
float: right;
}
nav ul {
color: #FFFFFF;
font-size: 1.5em;
text-align: center;
clear: both;
position: absolute;
bottom: 10%;
width: 80%;
margin-left: 10%;
}
nav li {
display: inline;
list-style-type: none;
margin: 2.5em;
}
@media screen and (max-width: 600px) {
header {
height: 100vh;
}
}
@media screen and (min-width: 600px) and (max-width: 900px) {
header {
height: 100vh;
}
#logo {
width: 33.333333%;
}
nav li {
margin: 0.8em;
}
}
@media screen and (min-width: 900px){
header {
height: 66.666666vh;
}
#logo {
width: 20%;
}
h1 {
font-size: 4em;
clear: none;
padding-top:20%;
}
}