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

Hintergrundbild bzw ganze Website skalieren zentrieren!

C

casadomar

Neues Mitglied
Hallo zusammen,

ich möchte gerne vor einem Shop eine Website machen!

Das funktioniert auch alles schön, nur die Website ist zoombar und das möchte ich nicht, sie soll sich immer automatisch skalieren, egal welche Auflösung der Kunde hat!

Habe dies auch schon mit einem einfachen Hintergrundbild hinbekommen, nur nicht wenn ich auf dieses Bild Links verteile.

Bitte keine "frag mal Onkel Google", oder "wurde schon oft im Forum besprochen" Antworten, habe hier meiner Meinung schon jeden Beitrag, der auf mein Problem hindeutet gelesen, wenn es doch schon mal das selber Problem besprochen wurde, dann habe ich es schlicht übersehen und entschuldige mich hiermit!

Wäre schön wenn jemand eine direkte Lösung hätte! :D





Mein html Code sieht momentan so aus!

</head>
<body>



</div>

<style type="text/css">
body { background-color:#000;
}
</style>

</div>

<style type="text/css">
dl.image_map {display:block; width:1920px; height:960px; background:url(bild.png); position:auto; margin:2px auto 2px auto;}
a.LINK0 {left:529px; top:875px; background:transparent;}
a.LINK0 {display:block; width:439px; height:0; padding-top:74px; overflow:hidden; position:absolute;}
a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK1 {left:1012px; top:867px; background:transparent;}
a.LINK1 {display:block; width:94px; height:0; padding-top:90px; overflow:hidden; position:absolute;}
a.LINK1:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK2 {left:1143px; top:867px; background:transparent;}
a.LINK2 {display:block; width:94px; height:0; padding-top:90px; overflow:hidden; position:absolute;}
a.LINK2:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK3 {left:1271px; top:867px; background:transparent;}
a.LINK3 {display:block; width:94px; height:0; padding-top:90px; overflow:hidden; position:absolute;}
a.LINK3:hover {background:transparent; border:1px dashed black; color:black;}
</style>

<dl class="image_map">
<dd><a class="LINK0" title="" href="http://www..de"></a></dd>
<dd><a class="LINK1" title="" href="http://www.facebook.com"></a></dd>
<dd><a class="LINK2" title="" href="https://twitter.com/"></a></dd>
<dd><a class="LINK3" title="" href="http://www.youtube.com/?gl=DE&hl=de"></a></dd>
</dl>

</body>
</html>

 
Hallo,

also der code ist nichts und deine frage leider auch :O)
was ist zoombar?

ich fang mal mit dem code an, denn deine frage verste ich nicht.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
    background-color:#000;
}
dl.image_map {
    display:block;
    width:1920px;
    height:960px;
    background:url(bild.png);
    position:auto;
    margin:2px auto 2px auto;
}
a.LINK0 {
    left:529px;
    top:875px;
    background:transparent;
}
a.LINK0 {
    display:block;
    width:439px;
    height:0;
    padding-top:74px;
    overflow:hidden;
    position:absolute;
}
a.LINK0:hover {
    background:transparent;
    border:1px dashed black;
    color:black;
}
a.LINK1 {
    left:1012px;
    top:867px;
    background:transparent;
}
a.LINK1 {
    display:block;
    width:94px;
    height:0;
    padding-top:90px;
    overflow:hidden;
    position:absolute;
}
a.LINK1:hover {
    background:transparent;
    border:1px dashed black;
    color:black;
}
a.LINK2 {
    left:1143px;
    top:867px;
    background:transparent;
}
a.LINK2 {
    display:block;
    width:94px;
    height:0;
    padding-top:90px;
    overflow:hidden;
    position:absolute;
}
a.LINK2:hover {
    background:transparent;
    border:1px dashed black;
    color:black;
}
a.LINK3 {
    left:1271px;
    top:867px;
    background:transparent;
}
a.LINK3 {
    display:block;
    width:94px;
    height:0;
    padding-top:90px;
    overflow:hidden;
    position:absolute;
}
a.LINK3:hover {
    background:transparent;
    border:1px dashed black;
    color:black;
}
</style>
</head>
<body>
<dl class="image_map">
  <dd><a class="LINK0" title="" href="http://www..de"></a></dd>
  <dd><a class="LINK1" title="" href="http://www.facebook.com"></a></dd>
  <dd><a class="LINK2" title="" href="https://twitter.com/"></a></dd>
  <dd><a class="LINK3" title="" href="http://www.youtube.com/?gl=DE&hl=de"></a></dd>
</dl>
</body>
</html>
Cheffchen
 
möchte gerne das die Seite, bzw das Hintergrundbild immer gleich zentriert bleibt, selbst wenn ich in einem Browser 150fachen zoom anwende, die Seite, bzw das Hintergrundbild genau so aussieht wie auf 100%, und wenn ich zum beispiel im Browser auf nur noch 50% Zoom einstelle, dann soll die Seite, bzw das Hintergrundbild auch so aussehe als wenn die Seite, bzw das Hintergrundbild auf 100% im Browser steht!

Hoffe es ist jetzt verständlicher erklärt!

Trotzdem Danke für deine Hilfe und Mühe!
 
möchte einfach nur, dass das Hintergrundbild sich immer automatisch skaliert, also wenn der kunde die Browserfunktion auf 110% stellt, das Hintergrundbild sich dann automatisch um 10% verkleinert, also nur noch 90% seiner Größe hat, usw, das habe ich auch schon geschafft, nur leider nicht wenn ich das Hintergrundbild mit diesen Coords Links versehe!

denke ich muss was anderes bei

position:auto; margin:2px auto 2px auto;

vielleicht reinsetzten, nur egal was ich dort ändere funktioniert nicht!
​
 
Dein Quellcode weist zunächst einen grundsätzlichen Fehler aus:
Du schreibst die CSS-Style-angaben innerhalb des body, was unzulässig ist. Sie gehören komplett in den head-Bereich oder in eine ausgelagerte CSS-Datei (siehe Post von "Cheffchen").

Der zweite Fehler ist die (pixel-)absolute Positionierung der Links. Dadurch haben sie immer den gleichen oberen und linken Abstand, unabhängig von der Fenstergröße.

Hintergrundgrafiken lassen sich generell nicht skalieren. Es gibt allerdings einen - mit Nachteilen (Verpixelung/Verzerrung) behafteten - Trick, dies zu umgehen:
Bildschirmfüllende Hintergrundgrafik

In Kombination einer bildschirmfüllenden Grafik und einem Image-Maps mit CSS habe ich kürzlich dieses sich skalierende CSS-Imagemap gebastelt:
skalierendes Image-Map.
Wie dies funktioniert, kannst du am Quelltext erkennen.
Ich denke, dass dies deinen Vorstellungen nahekommt.
Der Nachteil dabei, wie deutlich zu erkennen:
Die verwendete Grafik ist für größere Viewports zu klein, so dass es zu deutlichen Qualitätsverlusten kommt.
 
Sehe ich das richtig, dass deine Links eigentlich nur Hotspots sind, und der eigentliche "Text" in deinem Hintergrundbild liegt? Dann kann die ganze Geschichte ja rein logisch gar nicht funktionieren, weil sich beim Skalieren des Hintergrundbildes natürlich der "Linktext" mit skaliert, also verschiebt, während deine Hotspots gleich (absolut) positioniert bleiben!
Jetzt hast du entweder die Möglichkeit, deine positionierten Links ebenfalls in Abgängigkeit der Fenstergröße und des Hintergrundbildes neu zu positionieren (JavaScript, prozentuale Positionierung, whatever), oder aber - was ich dringend empfehlen würde - deinen Seitenaufbau neu zu überdenken...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben