✔ Einzelne Bilder unabhänig von Tabelle verschieben

[weedo]

Hallo,

ich arbeite gerade an einer Homepage habe ein kleines Problem, an dem ich momentan etwas feststecke.

Ich habe eine sehr große Tablle. Diese enthält eine Spalte, wie im Anhang dargestellt.

Da ich nicht umbedingt den kompletten Code verändern möchte und auch keine zweite Tabelle einbauen möchte, wollte ich mal fragen ob es eine Möglichkeit gibt das auf dem Anhang dargestellte Bild 3 unabhänig von Tabelle und bereits hinzugefügten Inhalten an das Ende der Spalte zu setzen.

Zur verständigung: Ich habe in der Spalte 2 Informationen, die ich aus der Mysql Datenbank auslesen möchte. Das Bild 3 ist das Firmenlogo, was am Ende der seite dargestellt werden soll.

Hat jemand da eine idee?

lg weedo

 

[Maik]

Hi,

einen Lösungsansatz stelle ich in meinem Webmaster-FAQ-Artikel CSS Wie richte ich eine Box am unteren Rand der Elternbox aus? vor.

Hierfür müsstest du lediglich die Tabelle in ein übergeordnetes DIV einbetten, und das Logo außerhalb der Tabelle solo oder in einem weiteren DIV am unteren Rand der Elternbox positionieren.

mfg Maik

 

[weedo]

Danke, das hat mir schon sehr geholfen.

Gibt es auch eine Möglichkeit, das dynamisch zu machen? Wir sind ja jetzt bei 300px, wenn ich den Code übernehme. Ich will das die DIV-Parentbox 100% groß ist und die Childbox sich am Ende verankert.

300Pixel verschieben hätte ich ja auch mit einem unsichtbaren Image hinbekommen, dass ich auf 300px height setze. Aber dann ist es mittig und nicht am Ende.

Mein Problem ist ja, dass die Seite sich nach unten hin verschiebt.

 

[Maik]

Hi,

Gibt es auch eine Möglichkeit, das dynamisch zu machen? Wir sind ja jetzt bei 300px, wenn ich den Code übernehme. Ich will das die DIV-Parentbox 100% groß ist und die Childbox sich am Ende verankert.

die Mindesthöhe von 300px ist in dem Beispiel von mir frei gewählt

Der CSS-Code für eine 100%-Mindesthöhe im Viewport lautet dann:

html,body {
height:100%;
margin:0;
padding:0;
}

div#parentBox {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}

mfg Maik

 

[weedo]

Genau das habe ich bereits auch versucht.

Mein Code ist jetzt wie folgt:

Css:

html,body {
  height:100%;
  margin:0;
  padding:0;
  font-family: tahoma, arial, verdana, sens-serif;
  font-size: 14px;
[...]
}

div#parentBox {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}

div#childBox {
position:absolute;
left:0;
bottom:0;
height:50px;
}

HTML:

<td rowspan="4" valign="top" background="Bilder/index_05.gif" width="176">
  <div id="parentBox">
    <? include("sys/kontakt.php"); ?>
    <br>
    <img src="Bilder/index_09.gif" width="176" height="32" alt="">
    <br>
    <? include("sys/shortinfo.php"); ?>
    <div id="childBox">
      <a href="http://www.crpromotion.ch/" target="_blank">
        <img src="Bilder/cr.jpg" valign="buttom" border="0" ALT="C.R. Promotion" />
      </a>
    </div>
  </div>
</td>

Das ergebniss ist im Anhang zu erkennen. Ich find leider keinen Fehler

 

[Maik]

In diesem Fall ist für die Tabellenzelle und ihre umschliessende Tabelle ebenfalls die height:100%-Deklaration erforderlich.

mfg Maik

 

[weedo]

Super, jetzt sitzt es so wie es soll.

Danke dir