nicht angemeldet
Mein aktueller Code sieht so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="mainHeader">
<img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
</header>
<footer class="mainFooter">
<p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
</footer>
</body>
</html>
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
background-size: cover;
height: 1000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #CF5C3F;
}
a:hover, a:active {
background-color: #CF5C3F;
color: #fff;
}
.mainHeader {
width: 90%;
margin: 0 auto;
}
.mainHeader img.Logo {
position: absolute;
right: 5%;
top: 54%;
width: 15%;
height: auto;
}
.mainHeader img.Margrit {
position: absolute;
right: 5%;
top: 15%;
width: 15%;
height: auto;
}
.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
overflow: auto;
}
.mainHeader nav ul li {
text-align: center;
float: left;
width: 24%;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
background-color: #CF5C3F;
}
.mainHeader nav a:hover, mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-block;
height: 30px;
padding: 10px 130px;
}
.mainHeader p {
}
.mainHeader p.inBearbeitung {
position: absolute;
top: 45%;
left: 5%;
font-size: 150%;
color: #CF5C3F;
font-size: 200%;
}
.mainFooter {
position: absolute;
bottom: 3%;
width: 90%;
left: 5%;
right: 5%;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #9cb34f;
display: table;
}
.mainFooter p {
color: #fff;
display: table-cell;
vertical-align: middle;
padding-left: 1%;
}
Das Problem ist:
Der Text/die Überschriften sitzen nicht mittig in der Navigationsleiste und die Abstände/Aufteilung und Grösse der Hover-Effekte stimmt nicht wie man im Bild sehen kann.
Die Seite ist bis jetzt nicht für andere Screen sizes als meine optimiert
Und entschuldigt bitte, aber ich habe vor dem Erstellen dieser Antwort, den Beitrag bearbeiten Button nicht gefunden.
Matthias Apsel
MudGuard
Rolf B
Gunnar Bittersmann
marctrix
Auge