Hallo , versuche die aside-Element bewegt nach Unten , aber ich weiss nicht…
Hier wie meine Website aussiehst .
Meine Idee ist die aside-Element auf main-Element zu legen , ...
Wie das Bild zeigt
Ich habe versuche mit verschidene Methode , aber habe es nicht geschaft....
Mein html Code
<?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, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Computer</title>
<style>
<?php
include 'CSS/windows.css';
include 'CSS/tablet.css';
?>
</style>
</head>
<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>
<aside id="furtherInformation"></aside>
<main>
<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>
<?php include ('links_change.php'); ?>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</main>
<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>
Mein Grid Code:
@media (min-width: 64.0625em) and (max-width: 80em) {
body {
display: grid;
display: -ms-grid;
background-color: #ebf5d7;
grid-row-gap: 5px;
grid-template-columns: 8% 74% 18%;
grid-template-areas:
"header header header"
"nav nav nav"
"main main infoBox"
"footer footer footer";
-ms-grid-columns: 8% 74% 18%;
-ms-grid-row: 120px 80px 103px 200px 110px 90px;
-ms-grid-gap: 5px;
}
.dropdown-content a {
padding: 10px 12px;
}
.dropdown:hover .dropdown-content {
top: 28px;
}
}
body > 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/view.JPG");
background-repeat: no-repeat;
padding: 65px;
}
body > nav {
grid-area: nav;
-ms-grid-column: 1/3;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
background-color: #d2f5c4;
margin: 1px;
}
body > main {
grid-area: main;
display: block;
-ms-grid-column: 2;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 2px;
background-color: #eaf6e5;
box-sizing: border-box; /* margin wo der test anfang */
padding: 10px; /* margin wo der test anfang , padding für den margin */
}
body > #furtherInformation {
grid-area: infoBox;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #d2f3c6;
}
body > 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;
}
Mein css code:
nav {background-color: #d2f5c4; display: flex; }
nav a{
color: black;
text-decoration: none;
display: inline;
padding: 10px 8px 10px;
font-size: 16px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
nav ul {list-style-type: none; flex: 1 0 auto;}
nav li { display: inline-block;}
nav ul:nth-of-type(2) {
text-align:right;
padding-right:120px;
}
#navs {
padding: 8px 0px 8px;
}
.dropdown {
position: relative;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #f1ebeb;
}
.dropdown-content {
display: none;
font-size: 12px;
position: absolute;
background-color: #f1f1f1 ;
min-width: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content {
color: black;
text-decoration: none;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #9f9e9e;
}
.dropdown:hover .dropdown-content {
display: block;
}
input, textarea{
background:rgba(220,220,220,0.75);
border:1px solid rgba(220,220,220,0.75);
font:inherit;
border-radius:0.2941em;
padding:0.4118em;
outline:none;
}
input:focus, textarea:focus{
background:#fff;
border:1px solid #000;
outline: none;
}
input[type=submit]{
background:#be633c;
border:none;
color:#fff;
border-radius:50% 50%;
box-shadow:inset 0 0 1em #fb9d23;
padding:0.5882em;
}
input[type=submit]:focus, input[type=submit]:active{
background-color:#A33202;
}
#copry {
overflow: auto;
font-size: 10px;
list-style-type: none;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
#img1 {float: left; margin: 5px; }
#copry a {text-decoration: none; margin-bottom: 3px;}
#copry p {font-size: 10px; margin-bottom: 0px; }
#content-wrap {
padding-bottom: 2.5rem;
}
#comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
#comment {font-size: 11px;}
#form {font-size: 14px;}
ich versuche seit einige Stunde , aber ohne erfolgt…
Kann bitte jemand hilfe um dieser probleme zu losen , danke !
liebewinter
Rolf B
Gunnar Bittersmann
marctrix
