CSS-button-Positionierung verändern sich bei einer Größenänderung/zoom

Ich habe große Probleme mit css-buttons... Mein Bildschirm ist 1366 x 768 Pixel und Ihre position ist nur gut, bis ich heraus Zoomen im browser oder zeigen Sie es an jemanden, der größere Bildschirm.

Kann mir jemand helfen, bitte?

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

  • Ihr Loch HTML-markup ist sehr schlecht:(
  • Dein problem ist die absolute Positionierung der Tasten. Aber Sie sollten nachdenken über Ihre komplette Architektur. Die Seite ist so aufgebaut das in einer Art von seltsamen Art und Weise.
InformationsquelleAutor dvlden | 2012-03-26
  1. 1

    Gelangweilt bei der Arbeit heute und Sie 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>
    • weitere Optimierungen wäre die Verwendung von image-sprites.
    • Vielen Dank an alle ya Menschen und insbesondere für TimWickstrom 😉 Cheers! Funktioniert wie ein Charme.
    InformationsquelleAutor Tim Wickstrom
  2. 3

    Platzieren Sie Ihre Schaltflächen absolutley den Dokument-Körper:

    Beispiel Links-Taste:

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

    Alle buttons in einen container aufgestellt, über Ihr Papier und legen Sie die position auf relative oder absolute und dann spielen Sie mit der Platzierung der buttons.

    InformationsquelleAutor Tim Wickstrom
  3. 2

    Wenn Sie absolute Positionierung, Sie brauchen einen Ankerpunkt. Der Ankerpunkt ist das erste element des HTML-Baum, der hat position:relative definiert. Wenn kein element gefunden wird, wird der BODY-tag wird der Ankerpunkt.

    Da haben Sie einen wrapper mit Zeug drin, dies sollte kommen Ihren Ankerpunkt in Ordnung zu halten alles drinnen, selbst wenn der browser die Größe, nicht der KÖRPER.

    InformationsquelleAutor Diodeus - James MacFarlane
Schreibe einen Kommentar