✔ class an bottom fixieren

[freakcx]

Ich habe irgend wie keine Lösung gefunden um diese Klasse an den bottom zu fixieren das sie sich immer mit dem browser fenster zusammen oder runter zieht wenn z.B wenig Inhalt in der Divbox ist ist sie nicht ganz unten und das sieht in meinem design nix aus hier die Klasse:

.content_back
{
position:absolute;
top:293px;
left:0px;
background-image: url(assets/design-thorsten_08.jpg);
border: 0px;
width: 739px;
height: 100%;
}

so hab ich das probiert geht aber nicht mein ganzes design wird noch von einer auflösungsid umgeben die dafür sorgt das sich das design immer in der mitte ausrichtet hier die id:

#done
{
	position:	relative;
	margin:		0 auto;
	width:		773px;
	text-align:	left;
}

 

[freakcx]

weiß echt niemand wie man eine Klasse an den Bottom fixieren kann?

 

[Maik]

Mit der CSS-Eigenschaft top:293px sicherlich nicht ;-]

.content_back
{
position: absolute;
bottom: 0px;
left: 0px;
background-image: url(assets/design-thorsten_08.jpg);
border: 0px;
width: 739px;
height: 100%;
}

 

[freakcx]

das Problem ist ja das, diese Klasse zum design gehört und mit top:280px; ans design ausgerichtet wird aber trotzdem bis an den bottom reichen soll egal wie viel Inhalt im DIV vorhanden ist...

.content_back
{
position:absolute;
background-image:url(assets/design-thorsten_08.jpg);
top:280px;
bottom:0px;
left:0px;
border: 0px;
width: 773px;
height: 100%;
}

und so gehts ja eben auch nicht

 

[Maik]

Es hilft ungemein weiter, wenn du den vollständigen HTML- und CSS-Code der Problemseite zeigst ;-]

 

[freakcx]

<div id="done">
<div class="banner"></div>
<div id="sax"><a href="sax.htm"></a></div>
<div id="unterricht"><a href="unterricht.htm"></a></div>
<div id="guestbook"><a href="guestbook.htm"></a></div>
<div id="gallerie"><a href="gallerie.htm"></a></div>
<div class="gallerie_spacer"></div>
<div class="spacer"></div>
<div class="content_back">
  <table width="660" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="93" height="268"></td>
      <td width="530" valign="top"><p class="Stil1">Diese Seite befindet sich noch im Aufbau..... demn&auml;chst, wie gewohnt, alles um das Thema </p>
        <p class="Stil1">&nbsp;</p>
        <p align="center" class="Stil1">Saxophon und Musikunterricht</p>        <p>&nbsp;</p>
        <p class="Stil2">Diese Seite ist von Christian Krause kreiert worden. <a href="http://www.christiankrause.de/index.php?action=gbook" target="_blank">klicke hier.... </a></p></td>
      <td width="37"></td>
    </tr>
	    <tr>
      <td width="93"></td>
      <td width="530" valign="top">&nbsp;</td>
      <td width="37"></td>
    </tr>
  </table>
</div>
<div class="right_top"></div>
<div id="bio"><a href="bio.htm"></a></div>
<div id="audio"><a href="audio.htm"></a></div>
<div id="about"><a href="about.htm"></a></div>
<div class="rightmenubottom"></div>
<div class="right_top"></div>

/* CSS Document */
body
{
margin:0px;
padding:0px;
text-align:center;
}
#done
{
	position:	relative;
	margin:		0 auto;
	width:		773px;
	text-align:	left;
}

.banner
{
position:absolute;
top:0px;
left:0px;
background-image: url(assets/design-thorsten_01.gif);
border: 0px;
width: 773px;
height: 86px;
background-repeat:no-repeat;
}
#sax a
{
display:block;
background-image: url(assets/design-thorsten_02.gif);
position:absolute;
top:86px;
left:0px;
border: 0px;
width: 213px;
height: 153px;
}

#sax a:hover
{
background-image: url(assets/design-thorsten_02_hover.gif); no-repeat top;
color:red;
position:absolute;
top:86px;
left:0px;
border: 0px;
width: 213px;
height: 153px;
}
#unterricht a
{
display:block;
position:absolute;
top:86px;
left:213px;
background-image: url(assets/design-thorsten_03.gif);
border: 0px;
width: 181px;
height: 153px;
}
#unterricht a:hover
{
display:block;
position:absolute;
top:86px;
left:213px;
background-image: url(assets/design-thorsten_03_hover.gif);
border: 0px;
width: 181px;
height: 153px;
}
#guestbook a
{
display:block;
position:absolute;
top:86px;
left:394px;
background-image: url(assets/design-thorsten_04.gif);
border: 0px;
width: 178px;
height: 153px;
}
#guestbook a:hover
{
display:block;
position:absolute;
top:86px;
left:394px;
background-image: url(assets/design-thorsten_04_hover.gif);
border: 0px;
width: 178px;
height: 153px;
}
#gallerie a
{
display:block;
position:absolute;
top:86px;
left:572px;
background-image: url(assets/design-thorsten_05.gif);
border: 0px;
width: 160px;
height: 153px;
}
#gallerie a:hover
{
display:block;
position:absolute;
top:86px;
left:572px;
background-image: url(assets/design-thorsten_05_hover.gif);
border: 0px;
width: 160px;
height: 153px;
}
.gallerie_spacer
{
position:absolute;
top:86px;
left:732px;
background-image: url(assets/design-thorsten_06.gif);
border: 0px;
width: 41px;
height: 153px;
}
.spacer
{
position:absolute;
top:239px;
left:0px;
background-image: url(assets/design-thorsten_07.gif);
border: 0px;
width: 773px;
height: 41px;
}
.content_back
{
position:absolute;
background-image:url(assets/design-thorsten_08.jpg);
top:280px;
bottom:0px;
left:0px;
border: 0px;
width: 773px;
height: 100%;
}
.right_top
{
position:absolute;
top:280px;
left:627px;
background-image: url(assets/design-thorsten_09.gif);
border: 0px;
width: 146px;
height: 33px;
}
#bio a
{
position:absolute;
top:313px;
left:627px;
background-image: url(assets/design-thorsten_10.gif);
border: 0px;
width: 146px;
height: 33px;
}
#bio a:hover
{
position:absolute;
top:313px;
left:627px;
background-image: url(assets/design-thorsten_10_hover.gif);
border: 0px;
width: 146px;
height: 33px;
}
#audio a
{
position:absolute;
top:346px;
left:627px;
background-image: url(assets/design-thorsten_11.gif);
border: 0px;
width: 146px;
height: 28px;
}
#audio a:hover
{
position:absolute;
top:346px;
left:627px;
background-image: url(assets/design-thorsten_11_hover.gif);
border: 0px;
width: 146px;
height: 28px;
}
#about a
{
position:absolute;
top:374px;
left:627px;
background-image: url(assets/design-thorsten_12.gif);
border: 0px;
width: 146px;
height: 32px;
}
#about a:hover
{
position:absolute;
top:374px;
left:627px;
background-image: url(assets/design-thorsten_12_hover.gif);
border: 0px;
width: 146px;
height: 32px;
}
.rightmenubottom
{
position:absolute;
top:406px;
left:627px;
background-image: url(assets/design-thorsten_13.gif);
border: 0px;
width: 146px;
height: 173px;
}
#preload
{
visibility:hidden;
top:200px;
left:0px;
width: 0px;
height: 0px;
}

 

[Fiberman]

Hi,

schau mal hier! Ich habe auch sehr lange getüftelt bis der footer so funktionierte wie ich das wollte. Er ist mit IE und FF getestet. Anschauen kannst du es dir auch noch *g


http://www.tutorials.de/tutorials227351.html

Gruß

 

[freakcx]

thx werde es mir mal ansehen!

 

[Maik]

das Problem ist ja das, diese Klasse zum design gehört und mit top:280px; ans design ausgerichtet wird aber trotzdem bis an den bottom reichen soll egal wie viel Inhalt im DIV vorhanden ist...

Eventuell helfen dir diese CSS-Modelle weiter:

1. Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken
   
   
2. Stu Nicholls: 'Fixed' layout version 1
   
   
3. Stu Nicholls: 'Fixed' layout version 2

Anmerkung: innerhalb eines 'floatenden' DIVs (margin: 0 auto) lassen sich keine DIVs absolut positionieren. Die Positionsangaben beziehen sich in diesem Fall auf die Grenzen des body- Elements.

 

[freakcx]

danke an euch ich denke damit werde ich das lösen können!