Meine Fußzeile positioniert sich für fast jede Bildschirmgröße neu, bis auf eine?

So habe ich getestet, wie meine Website mit verschiedenen Bildschirmgrößen aussieht und ich bemerkte meine Fußzeile ist richtig positioniert unten rechts auf dem Bildschirm für Auflösungen von 800x600 bis 1920x1080 aber auf 2560x1600 positioniert es nicht unten rechts /warum /?Meine Fußzeile positioniert sich für fast jede Bildschirmgröße neu, bis auf eine?

Im mit CrossBrowserTesting

Hier ist mein Code:

body { 
 
    font-family: 'Courier New', Courier, monospace; 
 
    background: linear-gradient(to bottom, #1D4350 , #A43931); 
 
    background-attachment: scroll; 
 
} 
 
html, body, #wrapper { 
 
    max-width: 100%; 
 
    min-height: 100%; 
 
    min-width: 960px; 
 
    margin: 0 auto; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
} 
 
#content { 
 
    height: 1200px; 
 
} 
 
.Octagon { 
 
    color: #2aa186; 
 
    text-align: center; 
 
    line-height: 30%; 
 
    margin-top: 25px; 
 
} 
 
.LT { 
 
    text-align: center; 
 
    color: #3a5454; 
 
    line-height: 0%; 
 
    font-style: italic; 
 
} 
 
.boi { 
 
    cursor: pointer; 
 
    margin-right: 30px; 
 
    padding: 8px 18px; 
 
    border: 1px solid #204156; 
 
    border-color: #52AEC9; 
 
    color: #52AEC9; 
 
    position: absolute; 
 
    top: 8px; 
 
    right: 16px; 
 
} 
 
.boi:active { 
 
    top: 2px; 
 
} 
 
.iob { 
 
    cursor: pointer; 
 
    margin-left: 30px; 
 
    padding: 8px 18px; 
 
    border: 1px solid #204156; 
 
    border-color: #52AEC9; 
 
    color: #52AEC9; 
 
    position: absolute; 
 
    top: 8px; 
 
} 
 
#verr { 
 
    
 
} 
 
.boi:active, 
 
.iob:active { 
 
    top: 2px; 
 
} 
 
#manyarms { 
 
    position: absolute; 
 
    margin-top: 30px; 
 
    margin-left: 31px; 
 
} 
 
#sensible { 
 
    position: absolute; 
 
    margin-top: 30px; 
 
    margin-right: 31px; 
 
    right: 10px; 
 
} 
 
.boi:hover, 
 
.iob:hover { 
 
    text-shadow: 0 0 10px #a193ff; 
 
} 
 
#footer { 
 
    padding-left: 93%; 
 
}

<html> 
 
<head> 
 
     <title>The Pragmatic Octopus</title> 
 
     <meta charset="utf-8"/> 
 
    \t <link rel='stylesheet' href='style.css'/> 
 
\t  <script src='script.js'></script> 
 
</head> 
 
<body> 
 
<div id="wrapper"> 
 
<div id="header"> 
 
\t  <h1 class="Octagon">The Pragmatic Octopus</h1> 
 
\t  <p class="LT">Lee Townsend</p> 
 
     <a href="www.google.com"> 
 
\t  <p class="boi">Contact</p> 
 
     </a> 
 
     <a href="www.google.com"> 
 
    \t <p class="iob">Information</p> 
 
     </a> 
 
</div> 
 
<div id="content"> 
 
    <div id="manyarms"> 
 
     <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792  .jpg" alt="mmm~" style="width:310px; height:250px;"> 
 
     <p style="color: #6458b7;" id="verr">Here comes a very special boi!</p> 
 
    </div> 
 
    <div id="sensible"> 
 
     <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;"> 
 
     <p style="color:#6458b7;">He loves to pose for photos!</p> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    &copy; Hecc 
 
</div> 
 
</div> 
 
</body> 
 
</html>

Ist das ein Fehler in meinem Code oder dies ein Fehler in CrossBrowserTesting? Jede Hilfe wird sehr geschätzt!

Quelle

2016-07-04 Anonymous

Ihre #Wrapper erstreckt und seine CSS ist - max-Breite: 100%;
und Ihr #footer ist innerhalb der # wrapper soo vielleicht Ihr Inhalt dehnt nicht die Wrapper auf volle Breite und das ist, warum die #footer ist nicht in der rechten Seite des Bildschirms (weil es in ganz rechts von #wrapper)
versuchen zu nehmen #footer aus #wrapper OR #wrapper Breite machen: 100% und Körper und hTML-Breite: 100%

Quelle

2016-07-04 22:29:03

Wenn Sie ersetzen Ihre:

#footer { 
    padding-left: 93%; 
}

mit

#footer { 
    float: right; 
    margin-right: 10px; 
}

Sie reparieren Ihre div auf t egal ob der Bildschirm groß, mittel oder klein ist.

Quelle

2016-07-04 22:30:50

Danke für Ihre Hilfe, dieser Code hält die Fußzeile immer ganz rechts! Ich fand das eigentliche Problem war, dass meine Fußzeile in einer Höhe von 1300 ~ Pixel verpackt war, so dass es auf der Unterseite der statt der Website ging. –

Meine Fußzeile positioniert sich für fast jede Bildschirmgröße neu, bis auf eine?

Antwort

Verwandte Themen