I have all together on the same File , here …
<?php
header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);
?>
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
<title>Index</title>
<style>
body {
margin: 5px;
display: -ms-grid;
display: grid;
width: 100%;
grid-gap: 5px;
-ms-grid-columns: 9% 73% 17%;
-ms-grid-rows: 120px 80px 103px 200px 110px 70px;
background-color: #ebf5d7;
}
body > header {
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
background-image: url("/Bilder/f409784856.png");
background-repeat: no-repeat;
padding: 20px;
}
body > nav {
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
margin-top: 5px;
background-color: #d2f5c4;
}
body > #externalLinks {
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin-top: 5px;
margin-bottom: 5px;
background-color: #d2f3c6;
}
body > main {
display: block;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 5;
background-color: #eaf6e5;
}
body > #furtherInformation {
-ms-grid-column: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
background-color: #d2f3c6;
margin-top: 5px;
margin-bottom: 5px;
}
body > footer {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
-ms-grid-row: 6;
background-color: #99ee7a;
}
/* Nav */
nav {background-color: #d2f5c4;}
nav a{
color: black;
text-decoration: none;
display: inline;
padding: 0px 8px;
font-size: 17px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
nav ul {list-style-type: none;}
nav li {display: block;display:inline-block;}
/* ExternalLinks */
#externalLinks a {
text-decoration: none;
display: block;
text-align: center;
font-size: 15px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
#externalLinks ul {
list-style-type: none;
margin: 5px;
padding: 0;
}
#externalLinks li{float: left}
/* Geben an Link1, link2, link3 ; Farbe , Padding, .... */
li a, .dropbtn {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;}
.dropdown-content {
display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
font-size: 12px;
position: absolute; /* die stellung folgt der Erste Link(li) */
background-color: #f1f1f1 ;
min-width: 160px; /* macht größer die Inneren Links */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */
z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/
display: block;
}
.dropdown-content a:hover {
background-color: #9f9e9e;
}
/* Offnen die Innere Links */
.dropdown:hover .dropdown-content {
display: block;
left: 109px; /* zeigt wo dem innere link fenster gezeigt wird */
top: 214px; /* zeigt wo dem innere link fenster gezeigt wird */
}
/* Main */
input, textarea{
background:rgba(220,220,220,0.75);
border:1px solid rgba(220,220,220,0.75);
font:inherit;
border-radius:0.2941em;/*5px;*/
padding:0.4118em;/*7px;*/
/*farbigen Rahmen in Chrome und Safari abschalten.*/
outline:none;
}
input:focus, textarea:focus{
background:#fff;
border:1px solid #000;
outline: none; /* einige Browser add line auf input , das verhindert es... */
}
input[type=submit]{
background:#be633c;
border:none;
color:#fff;
border-radius:50% 50%;
box-shadow:inset 0 0 1em #fb9d23;
padding:0.5882em;/*10px*/
}
input[type=submit]:focus, input[type=submit]:active{
background-color:#A33202;
}
/* Footer */
#copry {
overflow: auto;
font-size: 2px;
list-style-type: none;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
#img1 {float: left;margin-bottom: 3px;}
#copry a {text-decoration: none;margin-bottom: 3px;}
#copry p {font-size: 10px;margin-bottom: 0;}
/* Komment Button */
#comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
#comment {font-size: 11px;} /* Button from comment */
#form {font-size: 14px;} /* size from comment window */
</style>
</head>
<body>
<header></header>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
<aside id="externalLinks">
<ul>
<li class="dropdown">
<a href="#" class="dropbtn">Computer</a>
<div class="dropdown-content">
<a href="windows.php">Windows</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<li><a href="#">News</a></li>
<li><a href="#">Bucher</a></li>
</ul>
</aside>
<main>
<br>
<p>hallooooooooooooo</p>
</main>
<aside id="furtherInformation"></aside>
<footer id="copry" >
<p>My Website: Linux and More © 2018. All Rights Reserved.</p>
<a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" width="120px" height="40px" src="/Bilder/f601296864.png" ></a>
<p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0<br> International License.
Content of this site cannot be republished<br> either online or offline without our permissions. </p>
</footer>
</body>
</html>
i know that i do not gut , but i don’t what…