Beiträge von Alfredo

Alfredo · 1. Februar 2021

Zitat von Sailor
Versuche mal, deinem body folgende Formate zu geben.
Code
body {
   width: 100%;
   max-width: 800px;
   margin: 0px auto;
}

Wow ich liebe dich, Mondstein flieg und Sieg!:D. Danke

Alfredo · 1. Februar 2021

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>

Alles anzeigen

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;
}

Alles anzeigen

Beiträge von Alfredo

Html/CSS Website mittig ausrichten bzw Verschieben.

Html/CSS Website mittig ausrichten bzw Verschieben.