Website automatisch an Browserfenster anpaßen

YunPo · 8. März 2021

Sehr geehrte html-seminar.de Forum-Teilnehmer,

meine Kenntnisse im Webdesign sind sehr rudimentär.

Ich habe eine neue Website mit dem SeaMonkey Composer erstellt.

Hier die html-Daten:

HTML

<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">
<link rel="stylesheet" href="./css/ie.css" type="text/css">
<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>
<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>
</td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; left: 103px; top: 80px;
width: 557px;"><a href="firmen-philosophie.html"><font
style="font-family: Arial;" color="#333333">IMAGEFACTORY</a><font
style="font-family: Arial; color: rgb(64, 64, 64);">
• <a href="references.html"><font
style="font-family: Arial; color: rgb(64, 64,
64);">REFERENCES</a><a><font
style="font-family: Arial; color: rgb(64, 64,
64);"> </a><font style="font-family:
Arial; color: rgb(64, 64, 64);"><a>•</a> <a
href="contact.html"><span style="color:
rgb(51, 51, 51);">CONTACT</a><a>
•</a> <a href="network.html"><span
style="color: rgb(51, 51, 51);">NETWORK</a><br
style="font-family: Arial;">
<small style="color: rgb(64, 64, 64);
font-family: Arial;"><a href="imaginativ.html"><font
size="-2"><font style="color: rgb(64, 64,
64);">IMAGINATIV</a>
<span
style="color: rgb(64, 64, 64);">•
<a href="kreativ.html"><font
style="font-family: Arial; color: rgb(64, 64,
64);" size="-2">KREATIV</a>
<span
style="color: rgb(64, 64, 64);">•
<a href="kompetent.html" style="color:
rgb(64, 64, 64); font-family: Arial;"><font
size="-2"><span style="color: rgb(51, 51,
51);">KOMPETENT</a> <span
style="font-family: Arial;"><span style="color:
rgb(64, 64, 64);">•<font
size="-2"><span
style="font-family: Arial;"><span
style="color: rgb(64, 64,
64);"> <font
size="-2"><span
style="font-family: Arial;"><span
style="color: rgb(64, 64,
64);">
<a href="zielgerichtet.html"
style="font-family: Arial;"><font style="color:
rgb(64, 64, 64);" size="-2">ZIELGERICHTET</a>
<span
style="color: rgb(64, 64, 64);">•
<a href="termingenau.html"><font style="color:
rgb(64, 64, 64); font-family: Arial;"
size="-2">TERMINGENAU</a><span
style="color: rgb(64, 64, 64);"><a
style="color: rgb(64, 64, 64); font-family:
Arial;" size="-2"><span
style="color: rgb(51, 51, 51);"></a><span
style="color: rgb(64, 64, 64);">
<span style="font-family: Arial; color: rgb(255, 0,
0);">
</div>
<div style="position: absolute; left: 545px; top: 606px;
width: 757px;"> <a
href="firmen-philosophie.html" style="font-family:
Arial; color: rgb(64, 64, 64);"><span
style="color: rgb(51, 51, 51);">Imagefactory</a>
<a style="font-family: Arial;"><span
style="color: rgb(51, 51, 51);"></a><span
style="font-family: Arial;">•<span
style="font-family: Arial; color: rgb(64, 64, 64);">
<a
href="impressum.html" style="font-family: Arial;"><span
style="color: rgb(51, 51, 51);">Impressum</a><a
style="font-family: Arial;"> </a><a
style="font-family: Arial;">• </a><span
style="font-family: Arial;">© 2015 JÜRGEN HEDWIG
IMAGEFACTORY</div>
<script src="js/Redirect_Mobile_Devices.js">
</script> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Alles anzeigen

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

prodev · 8. März 2021

Sorry, dass ich das so sagen muss, aber der Code ist vollkommen veraltet. Lies dich bitte erstmal in HTML5 und CSS ein, dann wird das was. Damit kann man dann voll responsive Webseiten erstellen, die sich allen Geräten anpassen.

MrMurphy · 8. März 2021

Zitat

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

Nein.

Was du offensichtlich suchst ist ein flexibles, responsives Webdesign. Damit hast du schon mal ein paar Stichworte nach denen du suchen kannst.

So ein Design beruht auf aktuellem HTML und CSS. Damit hat dein aktueller Quellcode nur wenige Berühungspunkte.

tk1234 · 8. März 2021

Zur Info: https://forum.selfhtml.org/sel…anpassen/1785477#m1785477

Stef · 11. März 2021

Crosspost verboten. Thema geschlossen.