✔ Hintergrund läuft nicht mit

Status
Nicht offen für weitere Antworten.
U

UrmeldieMurmel

Grünschnabel
Hallo,

ich habe folgendes Problem. Ich möchte, dass bei meiner Seite sich der Hintergrund des Menüs links mit automatisch anpasst und sich also verlängert und mitzieht.

Leider funktioniert es bei mir nicht und ich bin mittlerweile ratlos, was ich bei meinen CSS Code falsch gemacht habe.

Ich hoffe, ihr könnt mir helfen.

Hier ist ein Screenshot: http://www.clanpaket.de/problem.jpg

Und hier der Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welt</title>

<SCRIPT language="JavaScript">
<!--

if (document.images)
   {

     pic1on= new Image(182,25);
     pic1on.src="Grafiken/Links/Menue/Hover/startseite.jpg";
     pic1off= new Image(182,25);
     pic1off.src="Grafiken/Links/Menue/Normal/startseite.jpg";

     pic2on= new Image(182,25);
     pic2on.src="Grafiken/Links/Menue/Hover/ueberuns.jpg";
     pic2off= new Image(182,25);
     pic2off.src="Grafiken/Links/Menue/Normal/ueberuns.jpg";

     pic3on= new Image(182,25);
     pic3on.src="Grafiken/Links/Menue/Hover/onlineshop.jpg";
     pic3off= new Image(182,25);
     pic3off.src="Grafiken/Links/Menue/Normal/onlineshop.jpg";

     pic4on= new Image(182,25);
     pic4on.src="Grafiken/Links/Menue/Hover/produkt.jpg";
     pic4off= new Image(182,25);
     pic4off.src="Grafiken/Links/Menue/Normal/produkt.jpg";

     pic5on= new Image(182,25);
     pic5on.src="Grafiken/Links/Menue/Hover/kontakt.jpg";
     pic5off= new Image(182,25);
     pic5off.src="Grafiken/Links/Menue/Normal/kontakt.jpg";

     pic6on= new Image(182,25);
     pic6on.src="Grafiken/Links/Menue/Hover/partner.jpg";
     pic6off= new Image(182,25);
     pic6off.src="Grafiken/Links/Menue/Normal/partner.jpg";

   }

function lightup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->
</SCRIPT>

<style type="text/css">

      body {
           background-image: url( Grafiken/back.jpg );
           padding: 0px;
           }

      #oben {
            height: 64px;
            width: 784px;
            position: relative;
            top: 60px;
            left: 250px;
            margin: 0px;
            padding: 0px;
            }

     #menue {
           height: 208px;
           width: 182px;
           position: relative;
           top: 60px;
           left: 250px;
           margin: 0px;
           padding: 0px;
           }

     #header {
          height: 214px;
          width: 598px;
          position: relative;
          top: -148px;
          left: 432px;
          margin: 0px;
          padding: 0px;
          }

     #menue2 {
         width: 243px;
         position: relative;
         background-image: url(Grafiken/Links/Menue/wieder.jpg);
         background-repeat:repeat-y;
         float: left;
         top: -148px;
         left: 250px;
         margin: 0px;
         padding: 0px;
         }

    #inhalt {
       width: 453px;
       background-image: url(Grafiken/Rechts/Inhalt/back.jpg);
       position: relative;
       top: -148px;
       right: 301px;
       float: right;
       }

    h1 {
       width: 420px;
       font-family: Verdana;
       text-transform: none;
       font-weight: normal;
       font-size: 11px;
       color: #000000;
       position: relative;
       top: 5px;
       left: 10px;
       }

    #untenpano {
       position: relative;
       width: 696px;
       height: 145px;
       left: 250px;
       top: -148px;
       clear: both;
       }

 </style>
</head>
<body>

<div id="body">

 <div id="oben">
     <img src="Grafiken/Oben/1.jpg" width="258" height="64" border="0" alt=""><img src="Grafiken/Oben/startseite.jpg"            width="79" height="64" border="0" alt=""><img src="Grafiken/Oben/impressum.jpg" width="97" height="64" border="0"           alt=""><img src="Grafiken/Oben/sitemap.jpg" width="75" height="64" border="0" alt=""><img                                   src="Grafiken/Oben/kontakt.jpg" width="67" height="64" border="0" alt=""><img src="Grafiken/Oben/rest.jpg" width="204"      height="64" border="0" alt="">
 </div>

 <div id="menue">
     <img src="Grafiken/Links/Menue/Normal/obenmenue.jpg" width="182" height="33" border="0" alt=""><br>
     <a href="#" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
     <img src="Grafiken/Links/Menue/Normal/startseite.jpg" name="pic1" width="182" height="25" border="0" alt=""></a><br>
     <a href="#" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')">
     <img src="Grafiken/Links/Menue/Normal/ueberuns.jpg" name="pic2" width="182" height="25" border="0" alt=""></a><br>
     <a href="#" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')">
     <img src="Grafiken/Links/Menue/Normal/onlineshop.jpg" name="pic3" width="182" height="25" border="0" alt=""></a><br>
     <a href="#" onMouseover="lightup('pic4')" onMouseout="turnoff('pic4')">
     <img src="Grafiken/Links/Menue/Normal/produkt.jpg" name="pic4" width="182" height="25" border="0" alt=""></a><br>
     <a href="#" onMouseover="lightup('pic5')" onMouseout="turnoff('pic5')">
     <img src="Grafiken/Links/Menue/Normal/kontakt.jpg" name="pic5" width="182" height="25" border="0" alt=""></a><br>
     <a href="#" onMouseover="lightup('pic6')" onMouseout="turnoff('pic6')">
     <img src="Grafiken/Links/Menue/Normal/partner.jpg" name="pic6" width="182" height="25" border="0" alt=""></a><br>
     <img src="Grafiken/Links/Menue/Normal/untenmenue.jpg" width="182" height="31" border="0" alt="">
 </div>

 <div id="header">
     <img src="Grafiken/Rechts/Header/flash1.jpg" width="199" height="214" border="0" alt=""><img                                src="Grafiken/Rechts/Header/flash2.jpg" width="214" height="214" border="0" alt=""><img                                     src="Grafiken/Rechts/Header/1.jpg" width="75" height="214" border="0" alt=""><img src="Grafiken/Rechts/Header/2.jpg"        width="51" height="214" border="0" alt=""><img src="Grafiken/Rechts/Header/3.jpg" width="59" height="214" border="0"        alt="">
 </div>

 <div id="menue2">
     <img src="Grafiken/Links/Menue/back.jpg" width="243" height="250" border="0" alt="">
     <img src="Grafiken/Links/Menue/wieder.jpg" width="243" height="0" border="0" alt="">
     <img src="Grafiken/Links/Menue/rest.jpg" width="243" height="12" border="0" alt="">
 </div>

 <div id="Inhalt">
  <h1>
dbd – der Dresdner-Bilderdienst steht Ihnen bei Ihrer Bildrecherche zur Seite, erweitert seinen Bildbestand ständig und hat sich zum Ziel gesetzt, schnell und in hoher Bildqualität auf vielfältigste Wünsche zu reagieren.
<br><br>
Wir arbeiten mit einer großen Zahl freier Fotografen aus Dresden und Umgebung zusammen, um ein breites Themenspektrum zu garantieren.
<br><br>
Digitale Online-Bildrecherche und Übermittlung per ISDN, Internet oder auf ihren FTP-Server sind binnen kürzester Zeit realisierbar. Sie haben die Möglichkeit direkt in unserem Archiv nach den Bildern zu suchen, die Sie benötigen.
<br><br>
Sollten sie fündig geworden sein, erfolgt nach kurzer Rücksprache eine umgehende Bereitstellung der Fotos in Druckqualität.
<br><br>
Beim Anklicken des aktuellsten Fotos gelangen Sie in die an diesem Tag bearbeitete Bildserie, die sich selbstverständlich immer wieder verändert und dann über eine entsprechende  Verschlagwortung im Archiv zu finden ist.
<br><br>
Die umfangreichen analogen Bildbestände werden derzeit digitalisiert und stehen ihnen zunehmend zur Verfügung. Darunter auch viele Fotos aus der Zeit vor 1989, dem DDR-Alltag und der Historie Dresdens.

  </h1>

 </div>

 <div id="untenpano">
     <img src="Grafiken/Unten/1.jpg" width="146" height="146" border="0" alt=""><img src="Grafiken/Unten/2.jpg" width="135"      height="146" border="0" alt=""><img src="Grafiken/Unten/3.jpg" width="109" height="146" border="0" alt=""><img              src="Grafiken/Unten/4.jpg" width="120" height="146" border="0" alt=""><img src="Grafiken/Unten/5.jpg" width="186"           height="146" border="0" alt="">
 </div>

</div>

</body>
</html>
 
Hi,

wenn ich dein Anliegen richtig verstanden habe, dürften dir die vorgestellten Techniken für "Equal-Height-Columns" in dem Artikel AnyColumnLongest weiterhelfen.
 
Dann vereine mal die beiden Hintergründe in einer Grafik, und wiederhole sie in einem übergeordneten Element - Stichwort: Faux Columns.
 
So, habe es jetzt fast. Wie kriege ich jetzt nur noch hin, dass sich der Hintergrund nicht bis ganz runter wiederholt.

Habe jetzt ein neues Div angelegt, welches unter dem Menü und der Inhaltsausgabe liegt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück