Hallo,
ich bin relativ neu im Programmieren und habe meine Eigene Seite programmiert. Diese befindet sich Links oben in der Ecke und ich hätte diese gerne Mittig im Screen ausgerichtet.
Wie mache ich das?. Habe mehrere Codes von Google verwendet, keines davon hat geklappt.
HTML
Html Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css"rel="stylesheet">
</head>
<body>
<header>
<img src="./img/header.jpg">
</header>
<nav>
<li id="li1"><a href="#Geschichte">Geschichte</a></li>
<li id="li2"><a href="#Innovation">Innovation</a></li>
<li id="li3"><a href="#Interessantes">Interessantes</a></li>
</nav>
<main>
<p>
</p>
</main>
<aside id="aside1">
<img src="./img/aside1.jpg">
</aside>
<aside id="aside2">
<img src="./img/aside2.jpg">
</aside>
<footer>
<ul>
<li id="li5"><a href="#Kontakt">Kontakt</a></li>
<li id="li6"><a href="#Impressum">Impressum</a></li>
<li id="li7"><a href="#AGB">AGB</a></li>
</ul>
</footer>
</body>
</html>Code
und das ist der CSS Code:
header{
width:800px;
height:100px;
background-color:blue;
}
nav{
width:800px;
height:25px;
background-color:darkgrey;
font-family:Verdana;
color:#fff;
}
#li1 a{
color:white;
background-color:black;
list-style-type:none;
padding-bottom:5px;
text-decoration:none;
font-size:14px;
padding-top:1px;
}
#li2 a{
color:white;
background-color:dodgerblue;
padding-bottom:5px;
text-decoration:none;
padding-left:5px;
padding-right:5px;
margin:-5px;
font-size:15px;
}
#li3 a{
color:white;
background-color:green;
padding-bottom:5px;
text-decoration:none;
margin:-2px;
font-size:15px;
}
#li1 {
display:inline-block;
}
#li2 {
display:inline-block;
}
#li3 {
display:inline-block;
}
#li1 :hover{
background-color:yellow;
color:green;
}
#li2 :hover{
background-color:yellow;
color:green
}
#li3 :hover{
background-color:yellow;
color:green;
}
main{
width:400px;
height:300px;
background-color:white;
font-family:Verdana;
color:#333;
line-height: 18px;
float:left;
}
#aside1{
width:200px;
height:300px;
background-color:brown;
float:left;
}
#aside2 {
width:200px;
height:300px;
background-color: black;
float:left;
}
footer{
width:800px;
height:25px;
background-color:lightslategrey;
clear:both;
}
#li5 {
display:inline-block;
}
#li6 {
display:inline-block;
}
#li7 {
display:inline-block;
}
ul {
text-align:center;
list-style-type:none;
text-align:right;
}
#li5 a{
text-decoration:none;
color:black;
padding-bottom:5px;
}
#li6 a{
text-decoration:none;
color:black;
}
#li7 a{
text-decoration:none;
color:black;
}
