✔ HTML / CSS Hintergrund UND Inhalt dynamisch anpassen

@SpiceLab

ok, dann erstelle ich euch morgen einen Dummy meiner Homepage und lade sie bei einem Free-Hoster hoch damit ihr euch ein Bild davon machen könnt. Den Link stelle ich morgen (gegen Abend) rein.
Danke euch bis hierher erst mal und .. ja... bis morgen denn ;)

LG
 
Du kannst diesen Link verwenden.

http://jsfiddle.net/o8qu09m8/

Wenn Du etwas ändert, dann klick auf "Update" oben und schick uns den aktuellen Link der Seite. Das ist ein Online-Editor. Damit kann man z.B. in Foren schnell "sein Problem" zeigen, ohne ganze Romane verfassen zu müssen. Wenn du es einmal raus hast, wirst Du die Seite lieben, da sie sehr praktisch ist.
 
Hallo,

@Alice Danke für den Tipp, werde ich mal bei Gelegenheit ausprobieren.. Im Moment komme ich glaube ich nicht so ganz damit zurecht ;) Also hier erst mal der Link zu der Seite, auf die ich meinen "Prototypen" hochgeladen habe: prototyp.zz.mu
Wenn ihr dort das Browserfenster diagonal von oben rechts nach unten links verschiebt, dann seht ihr dass sich Hintergrund und Inhalt stets an das Browserfenster anpassen. Aber... Ich habe auf den Button (Link 1) über Fireworks einen Hotspot (Hyperlink) erstellt. der befindet sich aber etwas weiter links des Buttons und wenn man den Browser verkleinert ist er überhaupt nicht mehr anklickbar. Und dieses Problem möchte ich beseitigen! Also... Ich möchte einen dynamischen Hintergrund inkl. Inhalt so wie mit dieser Seite dargestellt, aber die Links sollen verständlicherweise da hin wo sie hingehören. Vielleicht kann ich das Ganze auch anders lösen (HTML oder CSS technisch). Wäre euch sehr dankbar wenn ihr mir Tipps geben könntet.

LG
 
Durch das Skalieren des Viewports rutschen die Koordinaten der verweis-sensitiven (Link-)Fläche nach unten.

Mein Vorschlag: Auf das Image-Map verzichten, stattdessen die Links mit dem <a>-Element auszeichnen, und mit CSS entsprechend formatieren (Erscheinungsbild, Ausrichtung/Position im Viewport).
 
Zuletzt bearbeitet:
Zu meinem Vorschlag hab dir mal ein Beispiel erstellt, in welche Richtung es gehen kann :)

1. HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="hintergrund.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>TESTPAGE</h1>
    <p>Mein Inhalt</p>
    <div id="nav">
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ul>
    </div>
  </body>
</html>
2. CSS:
CSS: 
* {
  margin:0;
  padding:0
}
html,body {
  height:100%
}
body {
  background-image:url(http://prototyp.zz.mu/bg.jpg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  text-align:center
}
h1,p,a {
  color:#115d6b
}
h1 {
  font-size:275%
}
p {
  font-size:200%
}
#nav {
  width:100%;
  height:10%;
  position:absolute;
  bottom:5%;
  left:0
}
#nav ul {
  list-style:none;
  display:table;
  width:60%;
  height:100%;
  margin:0 auto
}
#nav ul li {
  display:table-cell;
  text-align:center
}
#nav ul li a {
  text-decoration:none;
  font-size:175%;
  padding:10% 15%;
  background:#11a8c3;
  border:thin solid #12b3d0
}

Wie du siehst, habe ich zudem das skalierbare <img>-Element (bg.jpg) durch ein Hintergrundbild für <body> ersetzt, und speziell mit der CSS3-Eigenschaft background-size formatiert, um auf die Skalierung des Viewports zu reagieren.

Mein Beispiel erhebt hier keinen Anspruch auf Vollständigkeit. Das "Fine-Tuning" meiner gewählten Proportionen überlasse ich dir.
 
Zuletzt bearbeitet:
@SpiceLab .... DU BIST EIN SCHATZ!!! VIELEN DANK!! Hat super geklappt! Genauso habe ich es mir vorgestellt, bin aber selbst nicht darauf gekommen wie ich das Ganze in CSS umsetzen könnte. Werde dich in meine Abendgebete einschließen :D Bin echt happy. Vielen lieben Dank nochmal! :)

LG aus dem hohen Norden :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück