Hallo,
ich bin komplett neu im Gebiet HTML, CSS, scripten, usw. und hatte nur vor einigen Jahren mal eine Website versucht zu erstellen.
Nun habe ich mich wieder dran gesetzt, komme aber nicht weiter, da ich erstmal das Grundlegende fertig machen möchte und mich dann an die Gestaltung mache.
Wenn ich die Größe meines Browserfensters durch zoomen änder, verschieben sich alle Boxen usw.
Kann mir da jemand weiterhelfen? (Nehmt es mir nicht übel, wenn im Code größere Fehler drin sind, bin seit einem Tag erst weider dabei)
Und tut mir Leid, denn ich kann mir vorstellen, dass es genügend dieser Fragen hier im Forum gibt. Ich habe bisher nur 2 gesehen, mit welchen ich dann an der html herumprobiert habe, es aber nicht funktioniert hat.
LG
Jan
index.html:
styles.css:
ich bin komplett neu im Gebiet HTML, CSS, scripten, usw. und hatte nur vor einigen Jahren mal eine Website versucht zu erstellen.
Nun habe ich mich wieder dran gesetzt, komme aber nicht weiter, da ich erstmal das Grundlegende fertig machen möchte und mich dann an die Gestaltung mache.
Wenn ich die Größe meines Browserfensters durch zoomen änder, verschieben sich alle Boxen usw.
Kann mir da jemand weiterhelfen? (Nehmt es mir nicht übel, wenn im Code größere Fehler drin sind, bin seit einem Tag erst weider dabei)
Und tut mir Leid, denn ich kann mir vorstellen, dass es genügend dieser Fragen hier im Forum gibt. Ich habe bisher nur 2 gesehen, mit welchen ich dann an der html herumprobiert habe, es aber nicht funktioniert hat.
LG
Jan
index.html:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" href="styles.css" type="text/css"/>
<title>Home</title>
</head>
<body>
<div id="wrapper">
<header>
<img src="Bilder/Logo/50px/Logo1730x400transparent2-50.png" alt="Logo kann nicht geladen werden">
</header>
<section>
<img class="PB1" src="Bilder/igpb1.jpeg" alt="Profilbild kann nicht geladen werden">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Instagram.html">Instagram</a></li>
<li><a href="index.html">Angeln?</a></li>
</ul>
</nav>
</section>
<aside></aside>
<footer>
<p>hallo</p>
</footer>
</div>
</body>
</html>styles.css:
CSS:
@charset "utf-8";
html, body {
font-family: "Open Sans", sans-serif;
color: #212121;
margin: 0px auto;
padding: 0px;
width: 1920px;
height: 100%;
overflow: auto;
}
#wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 1920px;
height: 100%;
margin-right: auto;
margin-left: auto;
}
header {
margin-left: 10px;
}
section {
width: 20%;
height: 89%;
float: left;
background: red;
}
.PB1 {
border: 5px solid #E1C6C7;
border-radius: 100px;
width: 200px;
height: 200px;
position: relative;
margin-left: 20%;
margin-top: 20%;
margin-bottom: 10%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 350px;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: grey;
color: white;
}
li a:hover:not(.active) {
background-color: white;
color: black;
}
aside {
width: 80%;
height: 89%;
float: right;
background: green;
}
footer {
width: 100%;
max-width: auto;
height: auto;
clear: both;
background: orange;
position: absolute;
bottom: 0;
}
