✔ DIV am Ende anhängen

Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Moin Moin,

zuerst muss ich mich für den wenig aussagekräftigen Titel entschuldigen. Ich wusste es nicht anders zu formulieren :(

Nun zum Problem:
Ich habe einen großen DIV-Container, der eine Grafik beinhaltet. Um Inhalt auf dieser Grafik gezielt platzieren zu können, verwende ich 2 weitere DIVs, die absolut positioniert sind.
Klappt soweit gummi-gut.
Nun möchte ich aber am Ende des Inhalts noch ein DIV mit einer abschliessenden Grafik einbinden.
Da der Inhalt aber von der Länge her variiert, kann ich diesen Container nicht absolut positionieren.
Welche Alternative(n) habe ich?

CSS:
Code: 
#wrap
{
  width:920px;
  height:820px;
  padding:0px;
  position: absolute;
  margin-left:-450px;
  left:50%;
  margin-top:50px;
  background:url(../gfx/bg.jpg);
  background-repeat:no-repeat;
}

#menu
{
  position:absolute; 
  left:150px;
  top:230px;
  width:550px;
  height:30px; 
  padding-left:25px;
  font-weight:bold;
}

#content
{
  position:absolute;
  left:150px;
  top:250px;
  width:550px;
  padding-left:25px;
}

*html #content
{
  padding-top:15px;
}

#bottom
{
?
}

Seite:
HTML: 
 <body>
  <div id="wrap">
      <div id="menu">
        Hier das Menu
      </div>
      <div id="content">
       Hier der Content
       </div>
      <div id="bottom">
       Abschlussgrafik
      </div>
    </div>
   </body>

Bin dankbar für jeden Tipp!
 
Hi,

mach es einfach so:
CSS: 
#content
{
  position:absolute;
  left:150px;
  top:250px;
  width:550px;
  padding-left:25px;
  padding-bottom:50px; /* Höhe der Abschlußgrafik */
  background:url(Abschlußgrafik) left bottom;
}

mfg Maik
 
Maik hat gesagt.:
Hi,

mach es einfach so:
CSS: 
#content
{
  position:absolute;
  left:150px;
  top:250px;
  width:550px;
  padding-left:25px;
  padding-bottom:50px; /* Höhe der Abschlußgrafik */
  background:url(Abschlußgrafik) left bottom;
}

mfg Maik
Zum Vergrößern anklicken....

Moin Maik,
leider geht das nicht, da die Abschlußgrafik breiter ist, als der Content-DIV.
Uuuuund, ich hab's grad mal probiert (Grafiken kann man ja anpassen), aber im FireFox drückt er die Grafik dann mitten in den Text (also nicht ans Ende) - im IE funktioniert es allerdings.

Nachtrag:
Hab das Design nun so angepasst, dass es passen könnte, wenn der FireFox es richtig darstellen würde.
Tipps zu nem Hack o.ä.?
 
Zuletzt bearbeitet:
Dann heb mal die absoluten Positionierungen der beiden inneren DIVs #menu u. #content auf, die der Knackpunkt bei deinem Vorhaben sind:
CSS: 
#menu
{
  margin-left:150px;
  margin-top:230px;
  width:550px;
  height:30px;
  padding-left:25px;
  font-weight:bold;
}

#content
{
  margin-left:150px;
  width:550px;
  padding-left:25px;
}

mfg Maik
 
Maik hat gesagt.:
Dann heb mal die absoluten Positionierungen der beiden inneren DIVs #menu u. #content auf, die der Knackpunkt bei deinem Vorhaben sind:
CSS: 
#menu
{
  margin-left:150px;
  margin-top:230px;
  width:550px;
  height:30px;
  padding-left:25px;
  font-weight:bold;
}

#content
{
  margin-left:150px;
  width:550px;
  padding-left:25px;
}

mfg Maik
Zum Vergrößern anklicken....

Das scheint zu funktionieren. War ja auch wieder mal zuuuu einfach :-)
Ich bedanke mich recht herzlich für die schnelle und unkomplizierte Lösung!

*Danke* *Erledigt*
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück