YunPo: Website automatisch an Browserfenster anpaßen

Beitrag lesen

Sehr geehrte forum.selfhtml.org-Teilnehmer,

meine Kenntnisse im Webdesign sind sehr ru­di­men­tär.

Ich habe eine neue Website mit dem SeaMonkey Composer erstellt.

Hier die html-Daten:

<html lang="de">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">

<title>JUERGEN HEDWIG IMAGEFACTORY Fotografie Grafik- WebDesign</title>

<link rel="stylesheet" type="text/css"

href="./css/enlarge_website2.css">

<link rel="stylesheet" type="text/css" href="./css/css.css">

<!--[if IE]-->

<link rel="stylesheet" href="./css/ie.css" type="text/css">

<!--[endif]-->

<link rel="stylesheet" href="css/lightbox.css" media="screen"

type="text/css">

<meta name="viewport" content="width=device-width, initial-scale=1,

minimum-scale=1, maximum-scale=1">

<meta name="content-language" content="de">

<meta name="language" content="Deutsch">

</head>

<body>

<span id="fc-18626"></span>

<script>

var fcr = Math.floor(Math.random()*99999999999);

var _fcc = _fcc || []; _fcc.push(["18626"]); _fcc.push(["trans"]);(function(){

var fc = document.createElement("script");fc.async = true;

fc.src = "https://www.fastcounter.de/fcount.php?rnd=" + fcr;

var sc = document.getElementById("fc-18626");

sc.appendChild(fc);

})();</script><noscript style="color: rgb(255, 255, 255);">

<a href="https://www.fastcounter.de/stats/18626/dashboard" rel="nofollow" style="display: none;" target="_blank" title="Free

Counter"><img src="https://www.fastcounter.de/fcounter.php?id=18626;" alt="Free Counter" title="Free Counter"></a>

</noscript>

<div class="mittig">

<div style="height: 75px; width: 378px; z-index: 1; left: 11px;

top: -8px; position: absolute;">

<table style="top: 2px; height: 677px; width: 942px; left: 0px;"

cellspacing="2" cellpadding="2" border="0">

<tbody>

<tr>

<td style="background-color: rgb(255, 255, 255);">

<div id="logo">

<table cellspacing="2" cellpadding="2" border="0">

<tbody>

<tr>

<td style="background-color: rgb(255, 255,

255);">

<div id="logo">

<div style="height: 75px; width: 378px;

left: 38px; top: 33px; position:

absolute;"><a><img src="Bilder/logo.jpg"

alt="" style="border: 0px solid ;

width: 354px; height: 35px;"></a></div>

</div>

<div id="logo"><img style="width: 930px;

height: 647px;"

src="Bilder/hg_imagefactory.jpg" alt=""></div>

<div style="position: absolute; left: 103px;

top: 175px; width: 357px;"> <img

style="top: 0px; left: 0px; width: 544px;

height: 371px;" src="Bilder/Test.gif"

alt=""></div>

<br>

</td>

</tr>

</tbody>

</table>

</div>

<div style="position: absolute; left: 103px; top: 80px;

width: 557px;"><b><a href="firmen-philosophie.html"><font

style="font-family: Arial;" color="#333333"><small>IMAGEFACTORY</small></font></a></b><font

style="font-family: Arial; color: rgb(64, 64, 64);"></font><b><a href="references.html"><font

style="font-family: Arial; color: rgb(64, 64,

64);"><small>REFERENCES</small></font></a></b><a><font

style="font-family: Arial; color: rgb(64, 64,

64);"> </font></a><font style="font-family:

Arial; color: rgb(64, 64, 64);"><a></a> <b><small><a

href="contact.html"><span style="color:

rgb(51, 51, 51);">CONTACT</span></a></small></b><a></a> <b><small><a href="network.html"><span

style="color: rgb(51, 51, 51);">NETWORK</span></a></small></b></font><br

style="font-family: Arial;">

<small><b><small style="color: rgb(64, 64, 64);

font-family: Arial;"><a href="imaginativ.html"><font

size="-2"><font style="color: rgb(64, 64,

64);"><font><font>IMAGINATIV</font></font></font></font></a></small></b>

<span style="font-family: Arial;"><span

style="color: rgb(64, 64, 64);"></span></span>

<b> </b><b><a href="kreativ.html"><font

style="font-family: Arial; color: rgb(64, 64,

64);" size="-2"><font><font><font>KREATIV</font></font></font></font></a></b>

<span style="font-family: Arial;"><span

style="color: rgb(64, 64, 64);"></span></span>

<b> </b><b><a href="kompetent.html" style="color:

rgb(64, 64, 64); font-family: Arial;"><font

size="-2"><span style="color: rgb(51, 51,

51);">KOMPETENT</span></font></a></b> <span

style="font-family: Arial;"><span style="color:

rgb(64, 64, 64);"></span></span><small><small><small><small><font

size="-2"><small><small><small><small><small><span

style="font-family: Arial;"><span

style="color: rgb(64, 64,

64);"></span></span> </small></small></small></small></small></font></small></small></small></small></small><small><small><small><small><small><small><font

size="-2"><small><small><small><small><small><span

style="font-family: Arial;"><span

style="color: rgb(64, 64,

64);"></span></span>&nbsp;

<b> </b></small></small></small></small></small></font></small></small></small></small></small><b>

</b><b><a href="zielgerichtet.html"

style="font-family: Arial;"><font style="color:

rgb(64, 64, 64);" size="-2"><font><font><font>ZIELGERICHTET</font></font></font></font></a></b>

<span style="font-family: Arial;"><span

style="color: rgb(64, 64, 64);"></span></span>

<b><a href="termingenau.html"><font style="color:

rgb(64, 64, 64); font-family: Arial;"

size="-2"><font><font><font>TERMINGENAU</font></font></font></font></a></b></small><span

style="color: rgb(64, 64, 64);"></span><small><small><a

style="color: rgb(64, 64, 64); font-family:

Arial;" size="-2"><font><font><font><span

style="color: rgb(51, 51, 51);"></span></font></font></font></a></small></small><span

style="color: rgb(64, 64, 64);"><br>

<span style="font-family: Arial; color: rgb(255, 0,

0);"></span><br>

</span></div>

<div style="position: absolute; left: 545px; top: 606px;

width: 757px;"> <small><a

href="firmen-philosophie.html" style="font-family:

Arial; color: rgb(64, 64, 64);"><font size="-2"><span

style="color: rgb(51, 51, 51);">Imagefactory</span></font></a></small>

<font size="-2"><a style="font-family: Arial;"><span

style="color: rgb(51, 51, 51);"></span></a><span

style="font-family: Arial;"></span></font><span

style="font-family: Arial; color: rgb(64, 64, 64);"></span>

<font size="-2"><span style="font-family: Arial;"></span><a

href="impressum.html" style="font-family: Arial;"><span

style="color: rgb(51, 51, 51);">Impressum</span></a></font><a

style="font-family: Arial;"> </a><font size="-2"><a

style="font-family: Arial;"></a><span

style="font-family: Arial;">© 2015 JÜRGEN HEDWIG

IMAGEFACTORY</span></font></div>

<script src="js/Redirect_Mobile_Devices.js">

</script> </td>

</tr>

</tbody>

</table>

</div>

</div>

</body>

</html>

Nun versuche ich den html-Text so zu verändern, daß sich die Website automatisch an die Browserfenster-Größe anpaßt.

So daß die Website immer formatfüllend im Browser-Fenster angezeigt wird, unabhängig von der Größe des Browser-Fensters.

Das sollte mit allen gängigen Browsern funktionieren - Firefox, IE, Chrome, SeaMonkey, etc..

Nun habe ich schon lange Zeit gegougled - habe aber leider für dieses Problem keine Lösung gefunden.

Mit folgendem css konnte ich die Website schon vergrößern:

body {

transform: scale(2.0);

transform-origin: 1 1;

// add prefixed versions too.

}

Damit wird jedoch nur eine fixe Größe erreicht, die sich nicht der Browser-Fenstergröße anpaßt.

Nun meine Frage:

Gib es vielleicht eine css transform Variante mit der sich die Website wie oben beschrieben der Browser-Fenstergröße anpaßt?

Bzw. gibt es eine andere Möglichkeit, so daß sich die Website wie oben beschrieben der Browser-Fenstergröße anpaßt?

Über hilfreiche Tipps von Euch würde ich mich sehr freuen!

Dafür schon jetzt meinen herzlichsten Dank!

Freundliche Grüße

Jürgen Hedwig / YunPo