Boxen erstellen
Guten Abend,
ich habe sozusagen die Grundausrüstung für meine Webseite erstellt und möchte die nun mit Inhalt erstellen.
Ich möchte gerne ein Header, Navigation, Sidebar, Content und Footer erstellen, mit jeweils 6px Abstand.
Kann mir da jemand weiterhelfen?
Viele Grüße
Niklas
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Homepage</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
}
header {
background-color: deepskyblue;
margin:6px;
}
#mehrspaltig {
flex: 1;
display: flex;
margin:0 6px 0 6px;
flex-direction: row; }
nav {
background-color: darkgray;
margin:0 6px 6px 6px;
}
article {
background-color: orange;
margin-right:6px;
flex: 5;
}
aside {
background-color: gray;
flex: 1;}
footer {
display:flex;
justify-content:center;
margin:6px;
justify-content:space-between;
}
#foot_left{
background:green;
flex:5;
}
#foot_right{
background:green;
flex:1;
}
</style>
</head>
<body>
<script src="Hier kommt der pfad oder link zum javascript rein"></script>
<div id="wrapper">
<header>Kopfzeile</header>
<nav >Navigation</nav>
<div id="mehrspaltig">
<article>Inhalt</article>
<aside>Zusatz</aside>
</div>
<footer>
<div id="foot_left">links</div>
<div id="foot_right"><div class="clock">
</div></div>
</footer>
</div>
<script>
function clock() {// We create a new Date object and assign it to a variable called "time".
var time = new Date(),
// Access the "getHours" method on the Date object with the dot accessor.
hours = time.getHours(),
// Access the "getMinutes" method with the dot accessor.
minutes = time.getMinutes(),
seconds = time.getSeconds();
document.querySelectorAll('.clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);
function harold(standIn) {
if (standIn < 10) {
standIn = '0' + standIn
}
return standIn;
}
}
setInterval(clock, 1000);
</script>
</body>
</html>