0
Meine horizontale Bildlaufleiste funktioniert nicht, wenn ich die Größe meines Browserfensters ändere. Heres my fiddle. Kann jemand mir helfen, dieses Problem zu beheben, das ist meine erste Website, die ich versuche zu bauen.Meine horizontale Bildlaufleiste funktioniert nicht, wenn die Größe geändert wird
{
position:absolute;
background-color:black;
height: 30%;
top:0;
right: -6.8%;
width:212px;
height:200px;
}
.zacspicture2
{
position:relative;
background-color:black;
height: 30%;
right:10%;
bottom:10%;
top:0;
width:1180px;
height:200px;
}
.zacspicture3
{
position:relative;
background-color:black;
height: -1%;
right: -7%;
bottom:10%;
top:0;
width:200px;
height:430px;
}
.topnav {
background-color: #333;
overflow: hidden;
width:114.1%;
left:-13%;
top:98%;
position:absolute;
padding-left: 81px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.wrapper
{
position: absolute;
left:95%;
top:-1%;
background-color:black;
margin-left: 0;
}
.wrapper2
{
position: absolute;
right: 38%;
}
.centerbottompage
{
position: absolute;
background-color: #D3D3D3;
height:200%;
width: 70%;
left:8%;
top:121.1%;
padding-right: 30px;
padding-left: 30px;
overflow: scroll;
padding-bottom:25px;
}
.leftbottompage
{
position: absolute;
width: 17%;
height:200%;
left:-10%;
top:121.1%;
padding-bottom:25px;
}
.rightbottompage
{
position: absolute;
background-color: #C0C0C0;
width: 25%;
height:200%;
right:-8%;
top:121.1%;
border-left-style: solid;
overflow: scroll;
padding-bottom:25px;
}
.breakWord
{
width:40em;
overflow-wrap: break-word;
}
table
{
position:absolute;
bottom:0%;
width: 100%;
border: double 6px #000000;
}
table.updatesTable
{
border: double 6px #000000;
position:absolute;
top:15%;
word-wrap:break-word;
border-collapse: collapse;
}
table.updatesTable, th, td
{
border: 1px solid black;
}
td.updatesTable
{
width: 5em;
word-wrap:break-word;
}
th.updatesTable
{
}
html,
body {
width: 98Hi, 9px;
margin: 0 auto;
min-height: 100%;
min-width: 100%;
}
}<div class="wrapper">
<div class="wrapper2">
<div class="zacspicture">
<img class="zacspicture" src="zacs.website.photo.jpg" alt="Mountain View"></div>
<div>
<img class="zacspicture2" src="binary-2302728_1280.jpg" alt="Mountain View" ></div>
<div>
<div class="topnav" id="header">
<a href="index.php">Home</a>
<a href="resume.php">Resume</a>
<a href="contact.php">Contact</a>
<a href="projects.php">Projects</a>
</div>
<div class="centerbottompage">
<h1>Biography</h1>
<br>
<p Class="breakWord">
</div>
<div class="leftbottompage">
<img class="zacspicture3" src="programming-898961_1920.jpg" alt="Mountain View"></div>
</div>
<div class="rightbottompage">
<center> <h1> Updates </h1> </center>
</div>
</div>
Willkommen auf der Website! Ich habe Ihre Frage bearbeitet, um den PHP-Code und das [tag: php] -Tag zu entfernen, die für Ihr Problem nicht relevant sind. Siehe: [Erstellen eines minimalen, vollständigen und überprüfbaren Beispiels.] (Http://stackoverflow.com/help/mcve) –
Es tut mir leid zu sagen, dass die horizontale Bildlaufleiste das einzige ist, was _does_ funktioniert. Das Problem ist mit allem anderen. –