Dannnnke !
Ich habe gemacht wie du geschrieben hast , der screenshot..
Die html Code;
<body>
<header style="background-image: url('Bilder/night.JPG'); background-repeat: no-repeat"; >
</header>
<nav id="navs">
<ul>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<ul>
<li><a href="index.php">Home</a></li>
<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>
<li><a href="#">News</a></li>
<li><a href="#">Bucher</a></li>
</ul>
</nav>
<main>
<article id="schreibe">
<h4> Das letzte von Windows 8</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</p>
<a style="text-decoration: none;" href="windows8.php">Read more...</a>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
<?php include ('links_change.php'); ?>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</main>
<div class="werbung">
<h2>Buy me!</h2>
I am good for you!
</div>
<aside>
<p>Ceterum censeo googlem delendum esse</p>
</aside>
<footer id="copry" >
<p>My Website: Computer 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/copry.png" ></a>
<p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Content of this site cannot be republished either online or offline without our permissions. </p>
</footer>
</body>
</html>
Die css Code;
body {
display: grid;
display: -ms-grid;
background-color: #eaf6e5;
grid-row-gap: 5px;
grid-template-columns: 8% 74% 18%;
grid-template:
"header header header" auto
"nav nav nav" auto
"main main gap1" 1em
"main main werb" 10em
"main main gap2" 3em
"main main info" 1fr
"footer footer footer" auto;
-ms-grid-columns: 8% 74% 18%;
-ms-grid-row: 120px 80px 103px 200px 110px 90px;
-ms-grid-gap: 5px;
}
#schreibe {
box-sizing: border-box; /* margin wo der test anfang */
padding: 1px; /* margin wo der test anfang , padding für den margin */
padding-right: 310px;
}
.dropdown-content a {
padding: 10px 12px;
}
.dropdown:hover .dropdown-content {
top: 28px;
}
}
header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
background-image: url("Bilder/night.JPG");
background-repeat: no-repeat;
padding: 65px;
}
nav {
grid-area: nav;
-ms-grid-column: 1/3;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
background-color: #d2f5c4;
margin: 1px;
}
main {
grid-area: main;
display: block;
-ms-grid-column: 2;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 2px;
background-color: #eaf6e5;
}
.werbung {
grid-area: werb;
background-color: #f88;
}
aside {
grid-area: info;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #d2f3c6;
}
footer {
grid-area: footer;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 6;
-ms-grid-row-span: 6;
background-color: #99ee7a;
}
ich bedanke mich dir , ich war seit zwei Tage mit dieser Probleme...