• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite dynamisch an die Fenstergröße anpassen

g0drealm

g0drealm

Neues Mitglied
Hallo,

habe hier eine einfache Startseite mit anklickbaren iframes entworfen. Habe jetzt nur das Problem, dass die Seite zwar auf meinem Monitor (1900x1200) im Firefox-Fullscreen gut aussieht, weil ich Sie halt daran angepasst habe, jedoch wenn ich das Fenster verkleinere oder der Monitor eine andere Auflösung hat, passt alles nicht mehr.

Wie kann ich das machen, dass die Seite sich anpasst. Bestimmt mit Javascript oder CSS möglich, oder ?


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--[if IE]>
<style>#frame {    zoom: 0.2;}</style><[endif]-->
     

<style type="text/css">

#myDiv1:hover {cursor:pointer;}
#myDiv1:hover {border : thick black solid;}
#myDiv2:hover {cursor:pointer;}
#myDiv2:hover {border : thick black solid;}
#myDiv3:hover {cursor:pointer;}
#myDiv3:hover {border : thick black solid;}
#myDiv4:hover {cursor:pointer;}
#myDiv4:hover {border : thick black solid;}
#myDiv5:hover {cursor:pointer;}
#myDiv5:hover {border : thick black solid;}

    
#image {

margin-left:20px;
margin-top:25px;

}
#myDiv1 {
        display:block;
      
    position:absolute;
    margin-left:115px;
    margin-top:10px;
        width:1600px;
    height:1200px;
    background-color:transparent;
    z-index:2;
    border:none;
    -moz-transform: scale(0.3);
        -moz-transform-origin: 0 0;

    }
#frame1 {
    position:absolute;
    margin-left:115px;
    margin-top:10px;
    width: 1600px;
    height: 1200px;
    border: none;
    z-index: 1;
    -moz-transform: scale(0.3);
    -moz-transform-origin: 0 0;
}

#frame2 {
    position:absolute;
    margin-left:710px;
    margin-top:10px;
    width: 1600px;
    height: 1200px;
    border: none;
    z-index: 1;
    -moz-transform: scale(0.3);
    -moz-transform-origin: 0 0;
}

#myDiv2 {
        display:block;
      
    position:absolute;
    margin-left:710px;
    margin-top:10px;
        width:1600px;
    height:1200px;
    background-color:transparent;
    z-index:2;
    border:none;
    -moz-transform: scale(0.3);
        -moz-transform-origin: 0 0;

    }

#frame3 {
    position:absolute;
    margin-left:1305px;
    margin-top:10px;
    width: 1600px;
    height: 1200px;
    border: none;
    z-index: 1;
    -moz-transform: scale(0.3);
    -moz-transform-origin: 0 0;
}

#myDiv3 {
        display:block;
    position:absolute;
    margin-left:1305px;
    margin-top:10px;
        width:1600px;
    height:1200px;
    background-color:transparent;
    z-index:2;
    border:none;
    -moz-transform: scale(0.3);
        -moz-transform-origin: 0 0;

    }

#frame4 {
    position:absolute;
    margin-left:410px;
    margin-top:410px;
    width: 1600px;
    height: 1200px;
    border: none;
    z-index: 1;
    -moz-transform: scale(0.3);
    -moz-transform-origin: 0 0;
}

#myDiv4 {
        display:block;
    position:absolute;
    margin-left:410px;
        margin-top:410px;
        width:1600px;
    height:1200px;
    background-color:transparent;
    z-index:2;
    border:none;
    -moz-transform: scale(0.3);
        -moz-transform-origin: 0 0;

    }

#frame5 {
    position:absolute;
    margin-left:1005px;
    margin-top:410px;
    width: 1600px;
    height: 1200px;
    border: none;
    z-index: 1;
    -moz-transform: scale(0.3);
    -moz-transform-origin: 0 0;
}

#myDiv5 {
        display:block;
    position:absolute;
    margin-left:1005px;
        margin-top:410px;
        width:1600px;
    height:1200px;
    background-color:transparent;
    z-index:2;
    border:none;
    -moz-transform: scale(0.3);
        -moz-transform-origin: 0 0;

    }


</style><title>ASMC Dashboard</title></head>

    <div id="image"><h1><img title="" alt="" src="">
      <span style="font-family: Ubuntu;">Dashboard</span></h1></div>


<hr style="color: rgb(255, 0, 0);"><br>

    <iframe id="frame1" style="border-style:solid;border-color:#BFBDC1 " src="http://www.google.de" scrolling="no"></iframe>
    <div id="myDiv1" onclick="window.open('http://www.google.de')"></div>
    
    <iframe id="frame2" style="border-style:solid;border-color:#BFBDC1; " src="http://www.google.de" scrolling="no"></iframe>
    <div id="myDiv2" onclick="window.open('http://www.google.de')"></div>

    <iframe id="frame3" style="border-style:solid;border-color:#BFBDC1 "src="http://www.google.de" scrolling="no"></iframe>
    <div id="myDiv3" onclick="window.open('http://www.google.de')"></div>

<iframe id="frame4" style="border-style:solid;border-color:#BFBDC1 "src="http://www.google.de" scrolling="no"></iframe>
<div id="myDiv4" onclick="window.open('http://www.google.de')"></div>

<iframe id="frame5" style="border-style:solid;border-color:#BFBDC1 "src="https://www.google.de" scrolling="no"></iframe>
<div id="myDiv5" onclick="window.open('https://www.google.de')"></div>



</body>
</html>
 
Hallo g0dreaml,
ich weiß, dieser Tipp kommt spät, aber löse dich am besten von den absoluten Positionierungen und den iframes und arbeite mit prozentualen Breitenangaben. Dann klappt's!

Gruß
Körnerbrötchen
 
Danke für deine Antwort.

Das Problem ist, dass die iframes benutzt werden, damit die Verbindung immer hergestellt wird, sobald man den Browser startet.

Hat was mit Websiten-Ranking unseres Webshops zu tun.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben