✔ 16:9 Hintergrundbild will nicht :(

Status
Nicht offen für weitere Antworten.
K

Kipperlenny

Erfahrenes Mitglied
Moin Moin

Nach langem Hin und Her habe ich es hinbekommen, dass die Website sich auf einem "normalen" Monitor richtig darstellt, also Auflösungen wie 1024*768, 1280*960 etc. sind kein Problem, Seite (sollte) sich anpassen.
Alle Auflösungen die auf den tollen Breitbildbildschirmen (seltsames Wort) vorrangig genutzt werden (1280*768 z.b.) machen mit der Site Blödsinn im unteren Bereich...
http://www.rae-schreiber-notar.de ist die Seite, hier noch zwei Screens mit dem "Problembereich", und der Code:

HTML: 
<html>

<head>
<title>Die Kanzlei</title>
<script language="JavaScript" fptype="dynamicanimation">

<!--

function dynAnimation() {}

function clickSwapImg() {}

//-->

</script>

<style type="text/css">
body {margin:0px;}

#bg_image {
width: 100%;
height: 99%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}

#bg_image[id] {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}

</style>

<script language="JavaScript1.2" fptype="dynamicanimation" src="./animate.js">

</script>

</head>

<body onload="dynAnimation()" language="Javascript1.2" style="background-image:url(BGver.jpg); background-repeat: no-repeat; background-position: 100% 100%; background-position: center center;">

<div id="bg_image">
<img src="BGver.jpg" style="width: 100%; height: 100%;">
</div>

<!-- this puts the contents of the page ontop of the background image -->
<div id="contents" style="margin-top :10%; margin-left:18%;">
<p><a href="./index.php"><img border="0" src="./startButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="margin-top :20%; margin-left:15%;">
<p><a onmouseover="document['fpAnimswapImgFP2'].imgRolln=document['fpAnimswapImgFP2'].src;document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].lowsrc;" onmouseout="document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].imgRolln" onclick="document['fpAnimswapImgFP2'].imgRolln=document['fpAnimswapImgFP2'].src;document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].lowsrc;"  href="./index.php?action=link2"><img border="0" src="./kanzlBut.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="./kanzlButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="margin-top :30%; margin-left:12%;">
<p><a onmouseover="document['fpAnimswapImgFP3'].imgRolln=document['fpAnimswapImgFP3'].src;document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].lowsrc;" onmouseout="document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].imgRolln" onclick="document['fpAnimswapImgFP3'].imgRolln=document['fpAnimswapImgFP3'].src;document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].lowsrc;"  href="./index.php?action=link3"><img border="0" src="./notBut.gif" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="./notButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="margin-top :40%; margin-left:15%;">
<p><a onmouseover="document['fpAnimswapImgFP4'].imgRolln=document['fpAnimswapImgFP4'].src;document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].lowsrc;" onmouseout="document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].imgRolln" onclick="document['fpAnimswapImgFP4'].imgRolln=document['fpAnimswapImgFP4'].src;document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].lowsrc;"  href="./index.php?action=link4"><img border="0" src="./infoBut.gif" id="fpAnimswapImgFP4" name="fpAnimswapImgFP4" dynamicanimation="fpAnimswapImgFP4" lowsrc="./infoButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="margin-top :50%; margin-left:18%;">
<p><a onmouseover="document['fpAnimswapImgFP5'].imgRolln=document['fpAnimswapImgFP5'].src;document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].lowsrc;" onmouseout="document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].imgRolln" onclick="document['fpAnimswapImgFP5'].imgRolln=document['fpAnimswapImgFP5'].src;document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].lowsrc;"  href="./index.php?action=link5"><img border="0" src="./imprBut.gif" id="fpAnimswapImgFP5" name="fpAnimswapImgFP5" dynamicanimation="fpAnimswapImgFP5" lowsrc="./imprButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="margin-top :10%; margin-left:40%; margin-right :10%; margin-bottom:10%; height: 80%; width:50%; resize: no; overflow-x: hidden; overflow-y: auto; word-wrap:break-word;">
<img border="0" src="./pics/thumbnail.php?src=15-05-07_1818.jpg&w=300" align="right" vspace="10" hspace="10"><P><FONT size=+0><STRONG>Anwalts- und Notarkanzlei <EM>Schreiber</EM></STRONG></FONT></P>
<P><STRONG><EM></EM></STRONG>&nbsp;</P>
<P><STRONG><EM>Willkommen auf unserer Homepage</EM></STRONG></P>
<P>&nbsp;</P>
<P>Rechtsanwalt und Notar Peter Schreiber</P>
<P>Rechtsanwältin Barbara Schreiber</P>
<P>&nbsp;</P>
<P>Hildesheimer Str. 48</P>
<P>30169 Hannover</P>
<P>&nbsp;</P>
<P>Tel.: 0511/8071970</P>
<P>Fax: 0511/8071977</P>
<P>kanzlei@rae-schreiber-notar.de</P></div>

</body>

</html>
 

Anhänge

  • normal.jpg
    normal.jpg
    13,7 KB · Aufrufe: 19
  • anders.JPG
    anders.JPG
    13,4 KB · Aufrufe: 22
Zuletzt bearbeitet:
Hi,

und was erwartest du von uns nun an Hilfestellung?

Mit der Auszeichnungssprache HTML bzw. der Formatierungssprache CSS wird sich an dem Umstand wohl kaum was ändern lassen, dass sich das 4:3-Format der Grafik auf einem 16:9-Monitor nicht sauber skalieren lässt.
 
dann verschieben wir es halt in den php bereich - dessen bin ich auch mächtig - nur was mir das helfen soll weiß ich nicht so genau - weil css ist doch eigentlich immer das mittel der wahl? *confused*
 
JavaScript wäre hier eher angebracht.
Einfach mit Javascript die Bildschirmauflösung ausrechnen lassen, und der Rest ist eigentlich nur ein bisschen Arbeit.

Code: 
<script language="JavaScript" type="Text/JavaScript">

<!--

   var hoehe, breite;
   
   hoehe = screen.height;
   breite = screen.width;

 //-->

</script>

Jetzt noch Variablen an PHP übergeben und fertig.

Da hab ich noch schnell was für dich gefunden: JS-Vars an PHP übergeben
 
gut, damit bekomme ich die bildschirmauflösung raus - nun fehlt mir anscheinend noch die logik:

PHP: 
if (isset($_GET['width']) AND isset($_GET['height'])) {
  // Ausgabe der beiden Größenangaben
  $widthe=$_GET['width'];
  $heighte=$_GET['height'];
  } else {
  // Übergabe der Größenangaben
  // (der ursprüngliche 'QUERY_STRING' wird beibehalten;
  //  POST-Variablen müssen anders behandelt werden)

  echo "<script language='javascript'>\n";
  echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
           . "&width=\" + screen.width + \"&height=\" + screen.height;\n";
  echo "</script>\n";
  exit();
}

habe nun die variablen für die auflösung, soll ich nun per if/else eine html/css version für "normale" und eine für 16:9 Auflösungen? Wahrscheinlich oder?

Aber zum Teufel noch mal wie?! Momentan ist ja erst mal das Hintergrundbild ein Problem, dieses ist bei "normalen" Bildschirmen und 100% Breite und Höhe korrekt dargestellt, bei den anderen nicht - obwohl 100% höhe und Breite eingestellt ist....

Ich mache jetzt mal einen neuen Post, weil es so gar nichts mit meinem letzten zu tun hat:

Meiner Meinung nach ist das was ihr vorschlagt unnötig, denn das Problem scheint nicht zu sein, dass das Hintergrundbild zu klein wird bei anderen Auflösungen sondern, dass die Buttons nach unten rutschen, wo ja kein Hintergrundbild mehr ist - zu sehen an dem Impressumsbutton der ohne zu Scrollen gar nicht mehr zu sehen ist.

Könnt ihr euch mal bitte den Code der Buttons anschauen (margin-top Werte) wo da der Fehler liegt?




EDIT:

Also ich habe das Problem nun so gelöst, dass ich alle margin-top Werte durch top Werte mit anderen Prozentangaben ersetzt habe, hier der Code:

HTML: 
<html>

<head>
<title>Die Kanzlei</title>
<script language="JavaScript" fptype="dynamicanimation">

<!--

function dynAnimation() {}

function clickSwapImg() {}

//-->

</script>

<style type="text/css">
body {margin:0px;}

#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}

#bg_image[id] {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}

</style>

<script language="JavaScript1.2" fptype="dynamicanimation" src="./animate.js">

</script>

</head>

<body>

<div id="bg_image">
<img src="BGver.jpg" style="width: 100%; height: 100%;">
</div>

<!-- this puts the contents of the page ontop of the background image -->
<div id="contents" style="top :21%; margin-left:18%;">
<p><a href="./index.php"><img border="0" src="./startButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="top :35%; margin-left:15%;">
<p><a onmouseover="document['fpAnimswapImgFP2'].imgRolln=document['fpAnimswapImgFP2'].src;document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].lowsrc;" onmouseout="document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].imgRolln" onclick="document['fpAnimswapImgFP2'].imgRolln=document['fpAnimswapImgFP2'].src;document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].lowsrc;"  href="./index.php?action=link2"><img border="0" src="./kanzlBut.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="./kanzlButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="top :49%; margin-left:12%;">
<p><a onmouseover="document['fpAnimswapImgFP3'].imgRolln=document['fpAnimswapImgFP3'].src;document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].lowsrc;" onmouseout="document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].imgRolln" onclick="document['fpAnimswapImgFP3'].imgRolln=document['fpAnimswapImgFP3'].src;document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].lowsrc;"  href="./index.php?action=link3"><img border="0" src="./notBut.gif" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="./notButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="top :63%; margin-left:15%;">
<p><a onmouseover="document['fpAnimswapImgFP4'].imgRolln=document['fpAnimswapImgFP4'].src;document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].lowsrc;" onmouseout="document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].imgRolln" onclick="document['fpAnimswapImgFP4'].imgRolln=document['fpAnimswapImgFP4'].src;document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].lowsrc;"  href="./index.php?action=link4"><img border="0" src="./infoBut.gif" id="fpAnimswapImgFP4" name="fpAnimswapImgFP4" dynamicanimation="fpAnimswapImgFP4" lowsrc="./infoButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="top:77%; margin-left:18%;">
<p><a onmouseover="document['fpAnimswapImgFP5'].imgRolln=document['fpAnimswapImgFP5'].src;document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].lowsrc;" onmouseout="document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].imgRolln" onclick="document['fpAnimswapImgFP5'].imgRolln=document['fpAnimswapImgFP5'].src;document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].lowsrc;"  href="./index.php?action=link5"><img border="0" src="./imprBut.gif" id="fpAnimswapImgFP5" name="fpAnimswapImgFP5" dynamicanimation="fpAnimswapImgFP5" lowsrc="./imprButrein.gif" width="129" height="50"></a></p>
</div>

<div id="contents" style="margin-top :10%; margin-left:40%; margin-right :10%; margin-bottom:10%; height: 80%; width:50%; resize: no; overflow-x: hidden; overflow-y: auto; word-wrap:break-word;">
<img border="0" src="./pics/thumbnail.php?src=15-05-07_1818.jpg&w=300" align="right" vspace="10" hspace="10"><P><FONT size=+0><STRONG>Anwalts- und Notarkanzlei <EM>Schreiber</EM></STRONG></FONT></P>
<P><STRONG><EM></EM></STRONG>&nbsp;</P>
<P><STRONG><EM>Willkommen auf unserer Homepage</EM></STRONG></P>
<P>&nbsp;</P>
<P>Rechtsanwalt und Notar Peter Schreiber</P>
<P>Rechtsanwältin Barbara Schreiber</P>
<P>&nbsp;</P>
<P>Hildesheimer Str. 48</P>
<P>30169 Hannover</P>
<P>&nbsp;</P>
<P>Tel.: 0511/8071970</P>
<P>Fax: 0511/8071977</P>
<P>kanzlei@rae-schreiber-notar.de</P></div>

</body>

</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück