Hallo Community,
ich möchte auf einer Website ein Bild zentrieren. Vielleicht kann mir dabei einer helfen, klappt nicht so ganz. Die beiden Codes hänge ich mit an, sowie zwei Bilder, die mein Problem verdeutlichen.
Also sobald ich die Fensterbreite verändere, sollte sich das Bild zentrieren.
ich möchte auf einer Website ein Bild zentrieren. Vielleicht kann mir dabei einer helfen, klappt nicht so ganz. Die beiden Codes hänge ich mit an, sowie zwei Bilder, die mein Problem verdeutlichen.
Also sobald ich die Fensterbreite verändere, sollte sich das Bild zentrieren.
HTML:
<body>
<header>
<div id="test"><img src="test.png">
</header>
<above>
</above>
<nav>
<ul class="navigation">
<li><a href="index.htm">Home</a></li>
<li><a href="latest.htm">Aktuelles</a></li>
<li><a href="about.htm">Über uns</a></li>
<li><a href="concept.htm">Konzept</a></li>
<li><a href="ohours.htm">Öffnungszeiten</a></li>
<li><a href="contact.htm">Kontakt</a></li>
<li><a href="anmeldung.htm">Anmeldung</a></li>
<li><a href="drive.htm">Anfahrt</a></li>
<li><a href="sitenotice.htm">Impressum</a></li>
</ul>
</nav>
<section>
</section>
</body>
</html>
Code:
* {
margin: 0;
padding: 0;
}
above, header, nav, section, aside, footer, body {
display: block;
}
body {
background-image: url(test.png);
background-repeat: no-repeat;
background-position: center 30px;
background-size: cover;
font: normal 100.01% Helvetica, Arial, sans-serif;
}
test {
width: 30%;
height: 30%;
}
header {
margin-top: 10px;
margin-left: 150px;
/*margin-right: 150px;*/
height: 100%;
background-color: white;
/*border-bottom: 63.8px solid #04B404;*/
}
ul.navigation {
font-size: 90%;
font-weight: bold;
margin: 0 auto;
margin-left: 150px;
margin-right: 150px;
min-width: 64.5em;
text-align: center;
}
ul.navigation li {
list-style: none;
width: 11.111111%; /* 100:9 */
float: left;
}
ul.navigation a {
background: #04B404;
color: white;
display: block;
padding: 1.2em 0;
text-decoration: none;
}
ul.navigation a:hover {
color: #04B404;
background: white;
}
