✔ HTML / CSS Hintergrund UND Inhalt dynamisch anpassen

M

Mozo75

Gesperrt
Hallo Leute,

ich bin neu in diesem Forum, hoffe aber dass ich hier richtig bin. ;)

Ich habe ein Problem beim erstellen einer Webseite. (Ich arbeite mit Fireworks (zum Layouten) und Dreamweaver). Und zwar würde ich gerne einen dynamischen Hintergrund erstellen, der sich also jeweils zu 100 Prozent komplett an jedes Browserfenster anpasst. Wie das funktioniert weiß ich, aber nun möchte ich dass sich zusätzlich auch der Inhalt dynamisch anpasst. Das klappt zwar mit dem selben CSS im großen und ganzen, aber ein Problem habe ich dabei. Hier zunächst einmal der CSS Code den ich dafür verwende:

CSS: 
#fsbg {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: -100;
    left: 0px;
    top: 0px;
    min-height: 100%;
    min-width: 1040px;
}

Funktioniert soweit wie gesagt alles einwandfrei. Egal wie groß ich das Browserfenster ziehe (bewege), das Hintergrundbild und der Inhalt werden immer komplett (dynamisch) angezeigt. Aber jetzt das Problem: Sobald ich Links einfüge, (z.B. mit einem Hotspot über Fireworks) verschieben die sich und befinden sich nicht mehr da wo sie eigentlich hin sollen. Sie bewegen sich also nicht dynamisch mit. Vielleicht ist die Lösung auch ganz simpel aber ich versuche mich daran schon seit Tagen und habe keine Idee woran das liegen könnte.
Würde mich echt freuen wenn mir jemanden erklären würde was ich falsch mache, oder mir einen anderen Lösungsweg aufzeigt wie ich Hintergrund und Inhalt immer zu 100 Prozent im Browser anzeigen lassen kann, egal wie groß das Browserfenster gerade ist. :)

Danke schon mal im voraus

LG Mozo75

Ps: An die Moderatoren: Falls mein Beitrag hier nicht richtig ist dann bitte verschieben. ;) Wie gesagt ich bin neu hier und kenne mich noch nicht so wirklich aus :)
 
Zuletzt bearbeitet von einem Moderator:
Kannst du bitte auch den HTML-Code und das übrige CSS zeigen?

Ich hab da nämlich eine Vermutung...
 
Zuletzt bearbeitet:
Hallo SpiceLab,

danke für die schnelle Antwort. Hier der HTML Code:

Edit [ComFreek | Mod]: Codetags hinzugefügt
HTML: 
<html>
<head>
<title>Startseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks CS6 Dreamweaver CS6 target.  Created Wed Nov 12 20:41:07 GMT+0100 2014-->
<link href="bg.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#layer {
    width: 100%;
    position: fixed;
    left: 10px;
    top: 0px;
    min-height: 100%;
    min-width: 500px;
    z-index: -100;
    height: 100%;
}
</style>
</head>
<body bgcolor="#ffffff">
<img src="Mein_Hintergrundbild.jpg" name="bg" width="1619" height="1082" id="bg" />
<img name="layer" src="index.png" width="1024" height="768" id="layer" usemap="#m_index" alt="" /><map name="m_index" id="m_index">
<area shape="rect" coords="86,677,237,729" href="www.externer-link.de" alt="" />
</map>
</body>
</html>

Weitere CSS Codes (die der Buttons)? Oje... da gehts schon los... Also ich habe auf den Buttons in meinem Inhalt in Fireworks, das Hotspot Rechteck als Hyperlink verwendet. Nach dem exportieren nach Dreamweaver, und nachdem ich alle CSS definiert (dem Hintergrund und dem Inhalt zugewiesen habe) hat auch alles soweit funktioniert. Nur die Links stehen eben nicht da wo sie hin sollen. (Sind verschoben) Und wenn ich das Browserfenster verschiebe sind sie überhaupt nicht mehr anklickbar!

Hoffe habe das einigermaßen erklärt damit ihr etwas damit anfangen könnt. :)
 
Zuletzt bearbeitet von einem Moderator:
Bitte verwende Code-Blöcke.

1. Klick auf den Button (hier im Editor) links vom Disketten-Symbol (Einfügen...)
2. Wähle "Code" aus
3. Wähle eine "Sprache" aus

HTML: 
<html>
   <head>
      <title>Startseite</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <!--Fireworks CS6 Dreamweaver CS6 target. Created Wed Nov 12 20:41:07 GMT+0100 2014-->
      <link href="bg.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      #layer
      {
          width: 100%; 
          position: fixed;
          left: 10px;
          top: 0px;
          min-height: 100%;
          min-width: 500px;
          z-index: -100;
          height: 100%;
      }
      </style>
   </head>
   <body bgcolor="#ffffff">
      <img src="Mein_Hintergrundbild.jpg" name="bg" width="1619" height="1082" id="bg" />
      <img name="layer" src="index.png" width="1024" height="768" id="layer" usemap="#m_index" alt="" />
      <map name="m_index" id="m_index">
         <area shape="rect" coords="86,677,237,729" href="www.externer-link.de" alt="" />
      </map>
   </body>
</html>

Das macht das ganze - deutlich - lesbarer. ;)
 
Die Links sind also mit gewissen Koordinaten (siehe coords-Attribut) in einer verweis-sensitiven Grafik enthalten, die wiederum zum darunterliegenden Bild angeordnet werden soll.

Da würde ich jetzt gerne eine Kostprobe incl. der beiden verwendeten Grafiken sehen, um ein genaueres Bild von der Situation zu erlangen.

Soviel kann ich aber schon sagen: durch die definierten Koordinaten lassen sich die Verweise nicht analog zum "Hintergrundbild" skalieren (vergrößern/verkleinern).
 
Zuletzt bearbeitet:
Hi Alice,

ja sieht irgendwie übersichtlicher aus. ;) Danke. Und? Hast du schon eine Idee was ich falsch gemacht haben könnte. ( Eine Lösung meines Problems) ??
 
@ SpiceLab,

öhm... ja und nun? Was soll ich machen? Also wenn ich das ganze im Browser teste bewegt sich Hintergrund und Inhalt ja anhand der CSS dynamisch mit. Nur wie kann ich nun am Besten das Ganze umsetzen dass die Buttons auch da platziert werden können wo sie hin gehören? Oder kannst du mir eine andere Möglichkeit aufzeigen wie ich Hintergrund und Inhalt an Browsern dynamisch anzeigen lassen kann? (Je nach dem wie ich das Browserfenster ziehe, soll der Inhalt und das Hintergrundbild KOMPLETT angezeigt werden - sprich ohne Scrollen zu müssen, egal bei welcher Fenstergröße)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück