CSS-Taste Positionierung ändern auf Größe/Zoom ändern

Ich habe große Probleme mit CSS-Tasten ... Meine Bildschirmgröße ist 1366x768 und ihre Position ist in Ordnung, bis ich im Browser verkleinern oder zeigen Sie es an jemanden, der einen größeren Bildschirm haben.CSS-Taste Positionierung ändern auf Größe/Zoom ändern

Kann mir bitte jemand helfen?

Website mit Problemen: http://riotpointscodes.info/region.html

Quelle

2012-03-26 dvLden

Ihr Loch HTML-Markup ist sehr schlecht :( – sandeep

Ihr Problem ist die absolute Positionierung Ihrer Tasten. Aber Sie sollten über Ihre komplette Architektur denken. Die Seite ist in einer Art seltsamer Art. –

Bored bei der Arbeit heute und Ihre Grafiken waren ziemlich cool so ....

Hier du bist mein Freund:

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Riot Points Codes</title> 
     <link rel="SHORTCUT ICON" href="http://agessy.com/favicon.png" /> 
     <style type="text/css"> 
      body { 
       background: url("http://riotpointscodes.info/images/background.jpg") no-repeat scroll center top #070b14; 
       margin: 0; 
       padding: 0; 
      } 
      #wrapper { 
       width: 895px; 
       height: 493px; 
       position:relative; 
       top:180px; 
       margin:0 auto; 
       background: url('region_files/paper.jpg') no-repeat top center; 
      } 

      .choice { 
       background: url("region_files/map.png") no-repeat scroll 0 0 transparent; 
       height: 212px; 
       left: 50%; 
       margin-left: -259px; 
       position: absolute; 
       top: 43px; 
       width: 517px; 
      } 

      .logo { 
       left: 50%; 
       margin-left: -205px; 
       position: absolute; 
       top: -135px; 
      } 
      #lol-custom-buttons { 
       position: absolute; 
       bottom: 107px; 
       left: 0px; 
       width: 100%; 
       height: 90px; 
       text-align:center 
      } 
      .play-free-link { 
       height: 90px; 
       width: 251px; 
       background-repeat: none; 
       color: #ECC873; 
       display: inline-block; 
      } 

      .play-free-link.one { 
       background-image: url("http://riotpointscodes.info/images/1n.png"); 
      } 

      .play-free-link.one:hover { 
       background-image: url("http://riotpointscodes.info/images/1h.png"); 
      } 

      .play-free-link.two { 
       background-image: url("http://riotpointscodes.info/images/3n.png"); 
      } 

      .play-free-link.two:hover { 
       background-image: url("http://riotpointscodes.info/images/3h.png"); 
      } 
      .play-free-link.three { 
       background-image: url("http://riotpointscodes.info/images/2n.png"); 
      } 

      .play-free-link.three:hover { 
       background-image: url("http://riotpointscodes.info/images/2h.png"); 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div class="logo"><img src="region_files/logo.png"></div> 
      <div class="choice"></div> 
      <div id="lol-custom-buttons"> 
       <a class="play-free-link one" href="http://riotpointscodes.info/"></a> 
       <a class="play-free-link two " href="http://riotpointscodes.info/"></a> 
       <a class="play-free-link three" href="http://riotpointscodes.info/"></a> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2012-03-26 19:20:06

weitere Optimierungen wäre, Bild Sprites zu verwenden. –

Danke an alle Leute und vor allem an TimWickstrom;) Prost ! Klappt wunderbar. – dvLden

Sie positionieren Ihre Tasten absolutley dem Dokument Körper:

Beispiel links-Taste:

position: absolute; 
top: 475px; 
width: 251px;

Legen Sie alle Tasten in einem Behälter über dem Papier positioniert und Stellen Sie die Position relativ oder absolut ein und spielen Sie dann mit der Platzierung der Tasten.

Quelle

2012-03-26 18:45:12

Wenn Sie absolute Positionierung verwenden, benötigen Sie einen Ankerpunkt. Der Ankerpunkt ist das erste Element im HTML-Baum, das position:relative definiert ist. Wenn kein Element gefunden wird, wird das BODY-Tag zum Ankerpunkt.

Da Sie einen Wrapper mit Sachen drin haben, sollte dies Ihr Ankerpunkt sein, um alles zu halten, auch wenn der Browser die Größe ändert, nicht der BODY.

Quelle

2012-03-26 18:47:08

CSS-Taste Positionierung ändern auf Größe/Zoom ändern

Antwort

Verwandte Themen