Hallo!
Ich schaffe es einfach nicht, bei den Menüpunkten einen Abstand nach oben hinzubekommen. Präzisierung: Meine damit, dass der Großbuchstabe nicht so nah am Rand pickt, da will ich einen kleinen Abstand haben. Btw, kann man sowas eigentlich vertikal zentrieren?
Überall mit paddings und margins (generell oder -top, -buttom) schon versucht.
Statt Listenelemente, habe ich es auch mit spans probiert.
Es klappt nicht.
Wo habe ich einen Fehler drin?
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="kopf"><img src="bilder/kopf.jpg"></div>
<div class="navigation">
<ul class="nav"> <center>
<li><a href="index.html">Home</a></li>
<li><a href="person.html">Persönliches</a></li>
<li><a href="faecher.html">Gegenstände</a></li>
<li><a href="agb.html">AGB</a></li>
<li><a href="termine.html">Termine</a></li>
<li><a href="kontakt.html">Kontakt</a></li> </center>
</ul>
</div>
<div class="zentral">
<div class="links"><img src="bilder/xxx.jpg" alt=""/>Text1</div>
<div class="inhalt"><img src="bilder/xxx.jpg" alt=""/>Text</div>
<div class="rechts"><img src="bilder/xx.jpg" alt=""/>Text</div>
</div>
<div class="fuss">Füllleiste</div>
</div>
</body>
</html>
Alles anzeigen
CSS
* { /* Universalselektor Alle Abstände von Haus aus auf 0 setzen */
margin: 0px;
padding: 0px;
}
html {
font-size: 100%;
}
body {
color: black;
background-color: #CDCF9C
}
.wrapper {
width: 80%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
.kopf {
width: 100%;
height: 10em;
}
.kopf img {
width: 100%;
height: 100%;
display: block; /* Damit keine Extrazeile kommt */
}
.navigation {
margin: 0.5em 0em 0.5em 0em;
background-color: #1A3EE6;
width: 100%;
height: 2em;
}
.links {
background-color: #00FF80;
width: 20%;
height: 30em;
float: left;
}
.inhalt {
margin: 0% 1% 0% 1%;
background-color: #FFFF80;
width: 58%;
height: 30em;
float: left;
}
.rechts {
background-color: #00FF80;
width: 20%;
height: 30em;
float: left;
}
.fuss {
margin-top: 0.5em;
background-color: #4638C7;
width: 100%;
height: 2em;
clear: left;
}
.nav li {
list-style: none;
display: inline;
margin: 0.5em 2em 0.5em 2em;
}
.nav a {
font-size: 1.5em;
color: black;
text-decoration: none;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:active {
color: black;
}
.nav a:hover {
color: black;
background-color: red;
}
Alles anzeigen