CSS: Grafik / Hintergrundlinie wiederholen

[medium22]

Hallo,

Ziel ist es, den Inhalt des jeweils innersten div-Elements (pos2) mittig & bottom zu positionieren. Ich kann mit den Positionen hin & her testen (im Beispiel entfernt) wie ich will, es verändert sich immer etwas, nur nicht dort hin wo ich es gerne hätte. Kann doch irgendwie nicht so schwierig sein den Inhalt zu positionieren, oder?

<div id="sm_box2">
  <div id="pos1">
    <div id="pos2">
      <img src="s/a.gif" alt=""> Beschreibung A
    </div>
  </div>
  <div id="pos1">
    <div id="pos2">
      <img src="s/b.gif" alt=""> Beschreibung B
    </div>
  </div>
  <div id="pos1">
    <div id="pos2">
      <img src="s/c.gif" alt=""> Beschreibung C
    </div>
  </div>
</div>

#sm_box2 {
  // height: 100;
  height: 100px; 
  width: 456px;
  max-height: 100px;
  max-width: 456px;
  border: 0px;
  margin: 1px;
}
#sm_box2 #pos1 {
  float: left;
  // height: 100;
  height: 100px;
  width: 150px;
  max-height: 100px;
  max-width: 150px;
  border: 0px; 
  overflow: visible;
  margin: 0;
}
#sm_box2 div:hover {
  float: left;
  background-color: #EAD9F7;
}
#sm_box2 #pos1 #pos2 {
  height: 100px;
  width: 150px;
  // text-align: bottom;
  padding: 0;
}

Sowohl lt. Firebug als auch selfhtml-validator (4.01 Strict) keine Fehler vorhanden, valide ist das also schonmal - was in der Vergangenheit wohl zu Fehlern geführt hat.

Edit: 3 CSS-Fehler auskommentiert & behoben

[wahsaga]

Validiere bitte dein CSS ebenfalls - The W3C CSS Validation Service

Außerdem ist die Mehrfach-Verwendung von IDs in einem Dokument selbstverständlich nicht valide. Sollten dir deine verwendeten Validatoren diesen Fehler nicht anzeigen, verwende bitte auch für die Validierung deines HTMLs den offiziellen Validator des W3C, The W3C Markup Validation Service

[medium22]

3 Fehler im CSS behoben.
Wie meinst du das mit Mehrfachwendung? Das man zb. 'pos1' nur einmal verwenden darf und nicht öfters?

[wahsaga]

3 Fehler im CSS behoben.

Ist damit noch irgendwas übrig geblieben, das dafür sorgen könnte, dass die Inhalte wie gewünscht „unten“ positioniert werden?

Wie meinst du das mit Mehrfachwendung? Das man zb. 'pos1' nur einmal verwenden darf und nicht öfters?

Ja, natürlich. http://de.selfhtml.org/html/attribut...htm#uebersicht

Gerade noch mal getestet - auch der SELFHTML-Validator unter http://validator.de.selfhtml.org/ (ich nehme an, du meintest diesen?) weißt auf einen solchen Fehler hin. Wieso du dann behauptest, der hätte dein Dokument als valide bezeichnet, verstehe ich ehrlich gesagt nicht ...

[medium22]

Weil diese Inhalte dynamisch erzeugt / ausgegeben werden und ich mit jenem Dokument den Test gemacht habe - dementsprechend hatte es dort auch keinen Inhalt, da dieser erst nach Auswahl in einer Select-Box kommt. Für den Beitrag hier habe ich diese Inhalte dann manuel eingefügt um die Fehlerzone aufzeigen zu können.

Ebenso schrieb ich, dass ich das ganze Positionierungs-Zeugs aus dem Beispiel entfernt habe.


Aber wenn eine Mehrfachverwendung nicht möglich ist, muss ich mir sowieso Gedanken über eine andere Lösung machen. Die Anzahl der div's (also des Inhaltes) ist nicht festgelegt und ändert sich je nach Anzahl der darin enthaltenen Grafiken welche dynamisch (mit JS) eingefügt werden.

Hättest du eine Idee oder einen Ansatz wie man das lösen kann?
Ich kann aber leider kein Onlinebeispiel öffentlich posten (ich habe (noch) keine Rechte an den Inhalten, bzw. darf diese noch nicht veröffentlichen). Alternativ kann ich dir aber anbieten, dir ein Beispiel per PM zukommen zu lassen.

[wahsaga]

Aber wenn eine Mehrfachverwendung nicht möglich ist, muss ich mir sowieso Gedanken über eine andere Lösung machen. Die Anzahl der div's (also des Inhaltes) ist nicht festgelegt und ändert sich je nach Anzahl der darin enthaltenen Grafiken welche dynamisch (mit JS) eingefügt werden.

Erst mal überlegen, ob diese Elemente überhaupt eine ID brauchen.

Und auch beim dynamischen Ausgaben von Elementen mit PHP sollte es kein großes Problem darstellen, einen Zähler mitlaufen zu lassen, und den an ein ID-Präfix anzuhängen, so dass du letztendlich „durchnummerierte“ IDs heraus bekommst.

[medium22]

Hm.., ja. Das hatte ich auch schon. Aber auch da hatte es nicht so wirklich geklappt. Habe nun einfach die beiden div-Bereich im CSS gelöscht und nochmal neu aufgebaut. Manchmal ist der Baum doch näher als man denkt.

#sm_box2 {
  height: 100px;
  width: 456px;
  max-height: 100px;
  max-width: 456px;
  border: 0px;
  margin: 0;
}
#sm_box2 div {
  position: relative;
  float: left;
  height: 100px;
  width: 150px;
  max-height: 100px;
  max-width: 150px;
  border: 0px; 
  overflow: visible;
  margin: 0;
}
#sm_box2 div:hover {
  float: left;
  background-color: #EAD9F7;
}
#sm_box2 div div {
  height: auto;
  position: absolute;
  left: auto;
  bottom: 0;
  padding-bottom: 5px
}

Damit wird unten mittig positioniert.