Homepage an Bildschirmauflösung anpassen

O

ochriso

Grünschnabel
hi

bin gerade beim aufbau meiner ersten homepage für meine band und hatte zuvor wenig zu tun mit html. meine werkzeuge sind adobe dreamweaver cs5.

soweit so gut. bis jetzt komm ich ganz gut klar, aber bevor ich richtig an den aufbau gehe möchte ich sicherstellen, dass die seite auch in jeder auflösung "richtig" angezeigt wird. ich hab da auch schon ein wenig gegoogelt und ein paar hilfreiche tipps gefunden (vor allem in diesem forum).

dass das hintergrundbild sich an die größe anpasst hätte ich schon hinbekommen, da sich aber auf diesem hintergrundbild ein text als beschreibung befindet ist dieser text bei ner bildschirmauflösung von 1024x786 nicht mehr zu lesen, da sich ja das hintergrundbild (1701x1050) ja vollständig an die auflösung anpasst und somit stark verkleinert.

was ich jetzt gerne hätte ist dass dieses bild in 100% seiner größe (also wenn man das bild im windows betrachtet kann man tatsächliche größe klicken dann wird es in 100% dargestellt) dargestellt wird, da der text dann gut zu lesen wäre. sprich, sich der ausschnitt auf die mitte des bildes beschränkt und nach unten zu scrollen ist für die ganze info. in größeren auflösungen sollte dies natürlich nicht vergrößert werden.

hier ein link zu dem besagten bild um sich meine bedürftigen erklärungsversuche veranschaulichen zu lassen.

und hier der derzeitige code:
Code: 
<!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>
<title>Main</title>
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}

/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}

/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: 100%;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{
	position: absolute;
	top: 1px;
	left: 470px;
	z-index: 2;
	overflow: auto;
	width: 100%;
	height: 100%;
	text-align: center;
}

/* Layoutelemente */
#mainDiv{ width: 600px;
          height: 100px;
          text-align: left;
          margin: 18px auto;}
#headDiv{ border: 1px solid #000;
          background: #efefef;}
#contentDiv{ border: 1px solid #000;
             background: #f0fff0;
             margin-top: 6px;
             height: 1000px;}
#footerDiv{ border: 1px solid #000;
            background: #fffff0;
            margin-top: 6px;}
 //body,td,th {
	font-family: BlackBeard;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="Main.jpg" alt="" name="bgImg" width="1701" height="1050" border="0" usemap="#bgImgMap" id="bgImg" />
<map name="bgImgMap" id="bgImgMap">
  <area shape="rect" coords="292,143,305,155" href="#" />
  <area shape="rect" coords="303,148,315,238" href="#" />
  <area shape="rect" coords="710,346,740,372" href="http://www.facebook.com/ourceasingvoicemusic" target="_new" />
</map> 
</body>
</html>


hoff es kann mir wer helfen und ich bedanke mich schonmal im voraus.

mfge, chris
 
Zuletzt bearbeitet:
Hallo,

dein Anliegen lässt sich allein mit HTML und dem gezeigten Imagemap-Beispiel nicht verwirklichen. Wenn du tatsächlich den Hintergrund mit einem IMG-Element emulierst (nur die Stylesheets deines Beispiels weisen darauf hin), dann passen die absoluten Koordinaten der Shapes dort nur dann rein, wenn die Grafik zufälligerweise genau so groß wie das Originalbild ist. Geht also nicht.

Du könnstest eventuell eine serverseitige verweissensitive Grafik benutzen. Dort werden mit der URL zwar auch nur die absoluten Bildkoordinaten eines Mausklicks übermittelt, aber wenn du dann per Javascript die tatsächliche Bildgröße während des Klick-Events auslesen und an den Server schicken kannst, dann hast du dort eine Möglichkeit diese Koordinaten auf die originale Bildgröße umzurechnen. Allerdings hast du dann auf dem Server jetzt das Problem, dass du nun auch die Koordinaten der Shapes kennen und rechnerisch ermitteln musst, ob sich der Mausklick innerhalb eines Shapes befand.

Also nicht trivial lösbar.
 
hmm, kann man nicht einfach die mitte des hintergrundbildes irgendwie definieren und von da aus die seite darstellen lassen, dass die ränder je nach bildschirmauflösung abgeschnitten werden, nach unten aber gescrollt werden kann bei bedarf?

die buttons werden durch hotspots definiert. meinst du dass sich die nach auflösung verschieben oder wie?

wie gesagt, rookie ;)
 
Du könntest über das Bild der Hintergrundemulation einen transparenten DIV-Block legen, der ebenfalls die Größe des Viewports hat und dort schlicht und einfach Links mit relativer Position und relativer Größe (CSS) unterbringen. Allerdings darfst du darüber dann keine weitere Ebene legen, da diese Links sonst nicht mehr erreichbar wären...
 
Hallo

Wieso trennst du das Bild und den Text nicht einfach.

Das Bild ohne Text verwendest du als Hintergrund.
Und den eigentlichen Text mit den Links legst du darüber (als Text, nicht als Bild).

Die einfachste Möglichkeit wäre den Mittleren Schwarzen Teil extra zu machen und zentriert auf der Seite zu plazieren.
Dann kannst du die Bereiche links und rechts entsprechend als Hintergrund plazieren.

Das Menü kannst du dann auch als einzelne Elemente ausführen und ersparst dir dadurch die ganzen Imagemaps.

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück