Optimieren der Website für unterschiedliche Auflösungen

Dieses Thema im Forum "Webdesign" wurde erstellt von silent gravity, 10. August 2008 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 10. August 2008
    Beim Bau einer Website habe ich Bilder an eine bestimmte Stelle positioniert. Das Problem ist das diese Bilder auf einen anderen Monitor ziemlich verschoben sind. Ich selbst arbeite an einen 22 Zoll Monitor mit einer Auflösung von 1680x1050 und der Monitor, wo es verschoben dargestellt wird ist ein 15 Zoll Notebookmonitor (Auflösung:1280x800). Ich habe im Internet gelesen, dass man mit Prozentangaben arbeiten soll, dass löst mein Problem aber irgendwie auch nicht. Gibt es nicht eine Möglichkeit das für die meisten gängigen Auflösungen anzupassen.
    Wenn das nicht möglich ist, würde mir auch eine Anpassung an einen 19 Zoll Monitor also 1280x1024 reichen.

    Hier mal ein Auszug mit den es nicht funktioniert: position:absolute; left:58%; top:3%

    Bitte dringend um Hilfe.

    Vielen Dank!

    *Silent Gravity*
     
  2. 10. August 2008
    AW: Optimieren der Website für unterschiedliche Auflösungen

    naja das geht glaube nur,wenn du mit festen höhen und weiten bei der erstellung deiner seite arbeitest.
    ansonsten besteht noch die möglichkeit mit javascript bevor der content der seite aufgerufen wird, die browsergröße oder desktopauflösung? abzufragen und dann mehrere seiten für verschiedene auflösungen zu bauen.

    ich habe mal ein script gesehen, dasss aber alles automatisch konnte ohne extra seiten.. kostete aber um die 200$ und wie es funktionieren soll bleibt mir schleierhaft.^^
     
  3. 10. August 2008
    AW: Optimieren der Website für unterschiedliche Auflösungen

    Ja mit Prozentangaben wirst du nicht weit kommen bei verschiedenen Auflösungen, wie b-xXx schon sagte musst du mit festen Werten arbeiten.

    Du kannst aber innerhalb eines festgelegten Div's relative angaben zur positionierung in % machen, die sind dann relativ zum div-container und werden überall gleich angezeigt.

    Bsp:
    Code:
    <div style="margin:0px auto; width:800px; border:1px solid #000000">
    <img style="position:relative; top:10%; right:10%;" src="meinbild.png" />
    </div>
    
    So in etwa müsste es gehen...
     
  4. 10. August 2008
    AW: Optimieren der Website für unterschiedliche Auflösungen

    Erstmal vielen Dank für die Antworten aber ich glaube ich hatte vergessen zu erwähnen, dass die Bilder einen mouseovereffect haben sollen.
    @Coksnuss: Wie kann ich jetzt dieses div Element in meinen Quelltext einbinden, dass der mousover effect erhalten bleibt?
    Mit dem Fett markierten mach ich den mousovereffect:
    Das kursive ist von dir und das will ich nun einbinden aber hab keine Ahnung wie
    Code:
    body {
     background-color:lightblue;
    
    }
    #menu {
     position:relative;
     float:left;
     width:300px;
     height:250px;
     background:url('Bild.png') no-repeat;
     padding:30px 110px;
     margin:0px 0px 10px 0px;
     z-index:3;
    }
    
    
    
     
     [B] .menuentry { background:url(Home.png); width:60px;height:50px;
     position:fixed; left:20%; top:20% }
     .menuentry a:hover { background:url(Homehover.png); }[/B]
     
     </style>
     
    
    
    </head>
    <body>
    <div id="menu">
    [B]<div class="menuentry"><a class="menuentry" href="http://www.heise.de" title="Willkommen">[/B]</a></div>
    
    [I]<div style="margin:0px auto; width:800px; solid #000000" >
    <img style="position:relative; top:20%; left:1%;" src="Home.png" />[/I]
    </div>
    </body>
    </html> 
    edit: habs jetzt einigermaßen hinbekommen
    Vielen Dank für die Hilfe!

    *Silent Gravity*
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.