Hintergrund mit Layer an Seite anpassen...wie?

Status
Nicht offen für weitere Antworten.

Company_Q

Mitglied
Habe ein aktuelles Problem mit meiner Seite. Ich möchte, dass meine Seite http://www.company-q.de ringsrum das Hintergrundbild anzeigt, was ja funktioniert, allerdings soll darüber ein Layer (also Ebene) die mit einer Hintergrundfarbe angepasst wird in dem fall #505050 (dunkel grau). Allerdings musste ich für jede Seite die Größe vorgeben. Was ich jetzt allerdings nicht bedacht habe: Wenn jemand eine kleinere Auflösung als 1280x1024 hat, so zieht sich der Text, der auf einem Layer darüber ist, zu weit nach unten über den grauen Hintergrund hinweg. Meine erste Frage: Wie kann ich das Einstellen, dass der Hintergrund (dunkel grau) sich jetzt der Seite anpasst, so dass Text und Hintergrund sich automatisch der Auflösung und Fenstergröße anpassen
2. Das sich der untere Layer (weiß) immer ganz unten ausrichtet

Ich hoffe ich konnte mich verständlich ausdrücken, geht ruhig in meinen Quelltext um eine Fehleranalyse zu machen, lohnt nicht alles hier anzubieten, wäre zuviel.

THX

The _Q
 
Mit der Auszeichnungssprache HTML lässt sich das nicht lösen, deshalb wandert das Thema in's CSS-Forum.
 
Hier der modifizierte Lösungsvorschlag:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Company_Q.de - There's House</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
var ns4class=''
//-->
</script>
<link rel="stylesheet" type="text/css" href="company.css">
</head>
<body>
<div id="Layer1" style="margin: 85px 15px 0 15px; background-color: #666666; layer-background-color: #666666; border: 1px solid #666666;">
<div id="Layer2" style="float: left; margin: 15px 0 0 5px; width:128px; height:150px;">
  <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
    <tr>
      <td class="guide" bgcolor="#FF9900">Guidebook</td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="index.htm" class="navigation" class=&{ns4class};>.: Home :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="bilder.htm" class="navigation" class=&{ns4class};>.: Bilder :.</a> </div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="retuschen.htm" class="navigation" class=&{ns4class};>.: Retuschen :.</a> </div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="berichte.htm" class="navigation" class=&{ns4class};>.: Berichte :.</a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="cocktails.htm" class="navigation" class=&{ns4class};>.: Cocktails :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="clubs.htm" class="navigation" class=&{ns4class};>.: Clubs &amp; Bars :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="specials.htm" class="navigation" class=&{ns4class};>.: Specials :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="http://www.onlinewebservice6.de/gastbuch.php?id=77721" target="_blank"  class="navigation" class=&{ns4class};>.: Gästebuch :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="http://companyq.friendtest.de/" target="_blank" class="navigation" class=&{ns4class};>.: Friendstest :. </a></div></td>
    </tr>
  </table>
</div><!-- END DIV LAYER2 -->
<div id="Layer3" style="margin: 0 5px 0 140px;" class="text">
  <p>Hi Fans! Ich heiße euch  auf _Q's kleiner Homepage herzlich Willkommen. Wie einige richtig erkannt haben, hat sich das Design grundlegend geändert. Weg von Photoshop, rein ins HTML Wunderland. Nun was zu dieser Page. Warum gibt es sie? Ganz einfach: Um all den Schwachsinn festzuhalten, den ich in meiner Jugend verbrochen habe und diese Erfahrungen mit der ganzen Welt zu teilen. Ganz dem Motto: Carpe diem. Memento morie. Demnach stehen auch zahlreiche Bereiche zur Verfügung, die auch interaktives zulassen. Deswegen schaut doch in mein Gästebuch und wagt euch an den "Ihr-schafft-die-100-Punkte-ja-doch-nicht" Friendstest. Dabei vorab viel Spaß. Wer die 100 Punkte denn noch schafft hat entweder gefudelt oder kennt mich doch besser als ich dachte ;-) Unter Bilder findet ihr, wie soll es anders sein, keine Nacktbilder von mir, aber welche von Freunden...nein, war nur Spaß, natürlich nicht...noch nicht. Unter Retuschen gibt es ein paar Lebenswerke aus der Digitalen Welt und was es sonst noch so gibt, da habe ich jetzt keine Lust drüber zu reden...schaut einfach selbst. Gut, dass war die Einführung und jetzt, viel Spaß beim durchwühlen der Seite!</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Du bist Besucher Nr.
  <!--Freeware!de - Counter-Tag Start-->
  <!--Dieser Code darf nur unver&auml;ndert in die Seite eingebunden werden!-->
  <script language="JavaScript" src="http://counter2.freeware.de/counter_js.php?user=companyq" type="text/javascript"></script>
seit dem 20.05.2004
<!--Freeware!de - Counter-Tag End-->

<SCRIPT LANGUAGE="JavaScript" SRC="http://www.onlinewebservice3.de/onlinecount.php?id=c45117"></SCRIPT>
Besucher online</p>
</div><!-- END DIV LAYER3 -->
<div style="clear:left; height: 0; font-size: 0; margin: 0; padding: 0;">&nbsp;</div>
</div><!-- END DIV LAYER1 -->

<div id="Layer4" style="position:absolute; left:0px; top:22px; width:100%; height:45px; z-index:5">&lt;&lt;Hier Comany_Q &gt;&gt; Flash Animation </div><!-- END DIV LAYER4 -->

<div id="Layer5" style="position:absolute; left:0px; bottom:0px; width:100%; height:22px; z-index:3; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: visible; overflow: visible;">
  <div class="link">
    <div><a href="index.htm">Home</a> | <a href="disclaimer.htm">Disclaimer</a> | <a href="impressum.htm">Impressum</a> | <a href="#">Sitemap</a> | <a href="mailto:company_q@gmx.net">Kontakt</a></div>
  </div>
</div><!-- END DIV LAYER5 -->
</body>
</html>
 
Danke für die Antwort und den Aufwand. Leider ist mein Problem nicht gelöst, versuche es nochmal zu beschrieben. Derzeit muss ich die Position des weißen Layers manuel eingeben, was zu folgendem Problem führt. Wenn das Fenster verkleinert wird, passt sich der Text dem Fenster an und kann ggf. diese Ebene überschneiden. Ich wollte es so lösen, dass die weiße Ebene sich der Textebene Anpasst und erst darunter auftaucht. :) Eine weitere Sache wäre, dass der graue Hintergrund, der ebenfalls über eine Ebene gesteuert wird, sich am Text ausrichtet, so dass immer der Hintergrund deckend mit dem Text ist, dh das der Text beim verkleinern nicht über den Hintergrund wechst. Ich glaube, präzieser kann ich das nicht mehr erklären.

Gruß

The _Q
 
In meinem ersten Lösungsvorschlag dehnt sich doch der graue Hintergrund (= Layer1) entsprechend des Inhalts aus, und der Inhalt überlappt auch nicht das DIV, wenn das Browserfenster verkleinert wird.

Hier mein zweiter Lösungsvorschlag bzgl. des Footers (= weißer Layer, weiße Ebene):

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Company_Q.de - There's House</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
var ns4class=''
//-->
</script>
<link rel="stylesheet" type="text/css" href="company.css">
</head>
<body>
<div id="Layer1" style="margin: 85px 15px 0 15px; background-color: #666666; layer-background-color: #666666; border: 1px solid #666666;">
<div id="Layer2" style="float: left; margin: 15px 0 0 5px; width:128px; height:150px;">
  <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
    <tr>
      <td class="guide" bgcolor="#FF9900">Guidebook</td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="index.htm" class="navigation" class=&{ns4class};>.: Home :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="bilder.htm" class="navigation" class=&{ns4class};>.: Bilder :.</a> </div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="retuschen.htm" class="navigation" class=&{ns4class};>.: Retuschen :.</a> </div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="berichte.htm" class="navigation" class=&{ns4class};>.: Berichte :.</a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="cocktails.htm" class="navigation" class=&{ns4class};>.: Cocktails :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="clubs.htm" class="navigation" class=&{ns4class};>.: Clubs &amp; Bars :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="specials.htm" class="navigation" class=&{ns4class};>.: Specials :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="http://www.onlinewebservice6.de/gastbuch.php?id=77721" target="_blank"  class="navigation" class=&{ns4class};>.: Gästebuch :. </a></div></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC"><div><a href="http://companyq.friendtest.de/" target="_blank" class="navigation" class=&{ns4class};>.: Friendstest :. </a></div></td>
    </tr>
  </table>
</div><!-- END DIV LAYER2 -->
<div id="Layer3" style="margin: 0 5px 0 140px;" class="text">
  <p>Hi Fans! Ich heiße euch  auf _Q's kleiner Homepage herzlich Willkommen. Wie einige richtig erkannt haben, hat sich das Design grundlegend geändert. Weg von Photoshop, rein ins HTML Wunderland. Nun was zu dieser Page. Warum gibt es sie? Ganz einfach: Um all den Schwachsinn festzuhalten, den ich in meiner Jugend verbrochen habe und diese Erfahrungen mit der ganzen Welt zu teilen. Ganz dem Motto: Carpe diem. Memento morie. Demnach stehen auch zahlreiche Bereiche zur Verfügung, die auch interaktives zulassen. Deswegen schaut doch in mein Gästebuch und wagt euch an den "Ihr-schafft-die-100-Punkte-ja-doch-nicht" Friendstest. Dabei vorab viel Spaß. Wer die 100 Punkte denn noch schafft hat entweder gefudelt oder kennt mich doch besser als ich dachte ;-) Unter Bilder findet ihr, wie soll es anders sein, keine Nacktbilder von mir, aber welche von Freunden...nein, war nur Spaß, natürlich nicht...noch nicht. Unter Retuschen gibt es ein paar Lebenswerke aus der Digitalen Welt und was es sonst noch so gibt, da habe ich jetzt keine Lust drüber zu reden...schaut einfach selbst. Gut, dass war die Einführung und jetzt, viel Spaß beim durchwühlen der Seite!</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Du bist Besucher Nr.
  <!--Freeware!de - Counter-Tag Start-->
  <!--Dieser Code darf nur unver&auml;ndert in die Seite eingebunden werden!-->
  <script language="JavaScript" src="http://counter2.freeware.de/counter_js.php?user=companyq" type="text/javascript"></script>
seit dem 20.05.2004
<!--Freeware!de - Counter-Tag End-->

<SCRIPT LANGUAGE="JavaScript" SRC="http://www.onlinewebservice3.de/onlinecount.php?id=c45117"></SCRIPT>
Besucher online</p>
</div><!-- END DIV LAYER3 -->
<div style="clear:left; height: 0; font-size: 0; margin: 0; padding: 0;">&nbsp;</div>
<div id="Layer5" style="width:100%; height:22px; z-index:3; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: visible; overflow: visible;">
  <div class="link">
    <div><a href="index.htm">Home</a> | <a href="disclaimer.htm">Disclaimer</a> | <a href="impressum.htm">Impressum</a> | <a href="#">Sitemap</a> | <a href="mailto:company_q@gmx.net">Kontakt</a></div>
  </div>
</div><!-- END DIV LAYER5 -->
</div><!-- END DIV LAYER1 -->

<div id="Layer4" style="position:absolute; left:0px; top:22px; width:100%; height:45px; z-index:5">&lt;&lt;Hier Comany_Q &gt;&gt; Flash Animation </div><!-- END DIV LAYER4 -->

</body>
</html>
 
Das sieht doch mal sehr richtig aus, ich versuch ein paar Sachen jetzt selbst einzubauen, aber ich denke das Grundgerüst steht! Vielen dank!

-Ich sehe das Thema als erledigt, also closed-

THX

The _Q
 
Dann bin ich aber beruhigt, daß ich deine Vorstellungen mit meinem zweiten Lösungsbeispiel richtig interpretiert und umgesetzt habe ;)
 
Status
Nicht offen für weitere Antworten.
Zurück