-1
Also fing ich an, eine Webseite zu erstellen (Anmerkung: meine erste) und nachdem ich mit der Homepage fertig war, bemerkte ich, dass sie nicht scrollte. Ich habe versucht, es zu beheben, einige Antworten auf dieser Website gefunden, aber es ist nicht gelungen. Hier ist der Code:Meine Seite scrollt nicht
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<div "page">
<head>
<title>Make-A-Wish Romania</title>
<div id="social" style="position: fixed; top: 0px; left: 10%; width: 100%;">
<ul>
<li>SOCIAL</li>
<li> <a href="https://www.facebook.com/" target="_blank"><img src="fb.png"><a href="https://www.youtube.com/" target="_blank"><img src="yt.gif"></a></li>
</ul>
</div>
<div id="toolbarbottom" class="toolbar" style="position: fixed; top: 70px; left: 0px; width: 100%;">
<ul id="buttons">
<li></li>
</ul>
</div>
<div id="maw" style="position: fixed; top: 80px; width: 100%;">
<a href="#"><img src="maw1.png" style="height:100px;">
</div>
<div id="meniu" class="toolbar" style="position: fixed; top: 110px; left: 56%; width: 100%;">
<ul>
<li><a href="#">DORINTE</li>
<li><a href="#">AJUTA</li>
<li><a href="#">DESPRE NOI</li>
</ul>
</div>
<div id="don" style="position: fixed; top: 100px; left: 90%; width: 100%;">
<p><a href="#">DONATI</p>
</div>
</head>
<body bgcolor="#e3e7ed">
<div id="img1" style="position: fixed; top: 200px; left: 0px; width: 100%;">
<img src="bg.png">
</div>
<div id="img2" style="position: fixed; top: 200px; left: 10%; width:100%;">
<img src="buna.jpg">
</div>
<div id="mawro" style="position: fixed; top: 820px; right: 4%;">
<img src="mawro.png">
</div>
<div id="loc" style="position: fixed; top: 850px; left: 4%;">
<img src="location.png">
</div>
<div id="loctxt" style="position: fixed; top: 850px; left: 9%;">
<p>Piata Presei nr 1, etaj 6, camerele 16-17, sector 1,Bucuresti, Romania</p>
</div>
<div id="phone" style="position: fixed; top: 850px; left: 39%;">
<img src="phone.png">
</div>
<div id="phonetxt" style="position: fixed; top: 850px; left: 42%;">
<p>+40 746 192 515</p>
</div>
<div id="mail" style="position: fixed; top: 850px; left: 53%;">
<img src="mail.png">
</div>
<div id="mailtxt" style="position: fixed; top: 850px; left: 57%;">
<p>[email protected]</p>
</div>
</body>
</div>
</html>
und die CSS:
@font-face {
font-family: font1;
src: url(font2.ttf);
}
#toolbarbottom ul{
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
width: 100%;
background-color: #b3c3d6;
top: 300px;
}
#toolbarbottom li {
float: left;
width: 14%;
height: 150px;
border-top: 15px;
text-align: center;
line-height: 44px;
text-decoration: none;
}
#toolbarbottom li a{
display: block;
height: 1px;
text-decoration: none;
color: #2a2f35;
font-family: font1;
}
#toolbarbottom li span{
position: absolute;
clip: rect(20px, 20px, 20px, 20px);
clip: rect(20px, 20px, 20px, 20px);
}
#img1 img{
width: 100%;
cursor: default;
}
#img2 img{
width: 77.2%;
cursor: default;
}
#social ul{
list-style: none;
}
#social li{
float: left;
font-size: 30px;
font-family: font1;
width: 110px;
color: #777777;
font-weight: bold;
}
#social img{
height: 35px;
width: 35px;
}
#meniu ul{
list-style: none;
}
#meniu li{
float: left;
width: 10%;
text-decoration: none;
font-family: font1;
font-size: 24px;
}
#meniu li a{
text-decoration: none;
color: #4c4c4c;
}
#maw img{
width: 400px;
}
#don p{
float: left;
text-decoration: none;
font-family: font1;
font-size: 24px;
width: 120px;
text-align: center;
}
#don p a{
text-decoration: none;
font-family: font1;
font-size: 24px;
color: #4c4c4c;
display: block;
background-color: #bf5d5d;
border-radius: 25px;
transition-duration: 0.5s;
}
#don p a:hover{
text-decoration: none;
transition-duration: 0.5s;
background-color: #e28a8a;
}
#mawro img{
width: 320px;
}
#loc img{
width: 12%;
}
#loctxt p{
font-family: font1;
font-size: 17px;
color: #7a7a7a;
}
#loctxt p a{
color: #7a7a7a;
text-decoration: none;
}
#phone img{
width: 10%;
}
#phonetxt p{
font-family: font1;
font-size: 17px;
color: #7a7a7a;
}
#phonetxt p a{
color: #7a7a7a;
text-decoration: none;
}
#mail img{
width: 10%;
}
#mailtxt p{
color: #7a7a7a;
text-decoration: none;
font-family: font1;
font-size: 17px;
}
#mailtxt p a{
color: #7a7a7a;
text-decoration: none;
}
html {
overflow-y: scroll;
}
body {
position: absolute;
}
Ihre HTML-Struktur ist falsch. Versuchen Sie [Ihre Seite validieren] (https://validator.w3.org/) und beheben Sie die Fehler. Dann verwende nicht so viel absolute Positionierung, wenn dein Inhalt scrollbar sein soll. 'Position: absolut;' bricht das im Allgemeinen und ist kein guter Weg, Dinge zu positionieren. –