Seite auf Bildschirmgröße anpassen

  • HTML

Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von Link.

    Seite auf Bildschirmgröße anpassen

    Hey, habe folgende Seite:


    Das Problem ist, das ganze ist ein Bild. Die Herzen setze ich separat ein. Leider ist das ganze auf meinem kleinen Bildschirm total verzogen und aufm meinem großen sauber. Wie kann ich das am besten schreiben ? Hier der aktuelle Code:


    indes.html:

    HTML-Quellcode

    1. ​<html>
    3. <head>
    4. <title>Knuts-Huus</title>
    5. <link rel="stylesheet" type="text/css" href="style.css">
    6. </head>
    7. <body>
    9. <!-- Navigation ANFANG-->
    10. <a href=""><img src="img/hbtn.tif" style="position: absolute; top: 180px; left: 95px;"></a>
    11. <a href=""><img src="img/navbtn.JPG" style="position: absolute; top: 330px; left: 95px;"></a>
    12. <a href=""><img src="img/navbtn.JPG" style="position: absolute; top: 460px; left: 95px;"></a>
    13. <a href=""><img src="img/navbtn.JPG" style="position: absolute; top: 650px; left: 95px;"></a>
    14. <!-- Navigation ENDE-->
    16. <!-- Bilderreihe Footer ANFANG-->
    17. <a href="test.html"><img src="img/Blue-Sleeproom-2.JPG" style="position: absolute; top: 670px; left: 250px;"></a>
    18. <a href=""><img src="img/Wattlaeufer.JPG" style="position: absolute; top: 670px; left: 540px;"></a>
    19. <a href=""><img src="img/Blue-Sleeproom.JPG" style="position: absolute; top: 670px; left: 694px;"></a>
    20. <!-- Bilderreihe Footer ENDE-->
    21. </body>
    23. </html>


    Style.css:

    Quellcode

    1. ​body
    2. {
    3. background-image: url(img/bg.JPG);
    4. background-repeat: no-repeat;
    5. background-size: 100% 100%;
    6. }



    Danke im vorraus für eure Hilfe

    Hi,

    ist das Absicht dass die Seite so ranzig aussieht? 1994 hat man vielleicht so Webseiten programmiert ^^

    Möglicherweise solltest du deine Herangehensweise überdenken.
    - Für Seitenleisten, Menüs, Header, Footer und Content solltest du separate Blöcke verwenden.
    - Man nimmt keine Bilder um Text anzuzeigen. Dafür nimmt man Text. Und diesem weist du die gewünschte Schriftart zu. Ggf. auch Schatten. Oder Transparenz. Dafür brauchst du keine Bilder.
    - Für img-Tags bitte das alt-Attribut verwenden.
    - Für den doctype sollte schon Zeit sein. ist ja mit HTML5 auch viel einfacher, <DOCTYPE html> und fertig.
    - Für die Herz-Bilder würd' ich vllt PNG-Dateien nehmen und das Weiß transparent machen.
    - In CSS mit *{ padding: 0px; margin: 0px; } würd' ich erstmal dafür sorgen dass dein Browser dir dein Layout nicht verhunzt. Browser legen gern mal padding und margin für Elemente fest, quasi nach gutdünken und einfach weil sie's können.

    Ich würd' dir ja gern helfen. Nur behagt mir der Gedanke nicht, dich bei dem was du da machst zu unterstützen, einfach weil's kein guter Ansatz ist. Hast du schon eine Idee wie du das umsetzen willst? Also wie es aussehen soll, vom Layout her und alles? Falls nicht, würde ich da anfangen. Falls ja, überleg dir was anderes.

    Link :thumbup:
    Hello World