<div> mit CSS in einem Table verschachteln

[JPS]

Hallo,
stehe gerade auf dem Schlauch.
Ich will in einem table <td> zwei divs so positionieren wie auf dem Bild


Uploaded with

Wobei das beide divs unten zentriert sein sollen und das Schrift DIV das andere überlagern soll mit - sagen wir mal - 10px abstand zum unteren Rand des <td>. Muss da noch ein DIV um die beiden anderen drumherum?
Hat jemand einen Ansatz.
Danke im voraus

 

[fexx]

AW: <div> mit CSS in einem Table verschachteln

gegenfrage: brauchst du die tabelle?

 

[JPS]

AW: <div> mit CSS in einem Table verschachteln

Ja leider.... im unteren Teil gibt es DB Ausgaben in Spalten und Reihen usw.
Deswegen war ja meine Idee evtl um beide divs ein weiteres drumherum zu packen????

 

[fexx]

AW: <div> mit CSS in einem Table verschachteln

zu deinen divs ... du könntest es so machen

<div class="bild">
<img src="" alt="" />
<span class="beschreibung">Headline</span>
</div>

.bild { position: relative; }
.beschreibung { position: absolute; bottom: 10px; }

*ungetestet*

das mit deiner tabelle hab ich noch nich so ganz verstanden ... gibts einen link?

 

[JPS]

AW: <div> mit CSS in einem Table verschachteln

Alles super bis auf den Fakt, dass sich der DIV mit der Schrift nicht zentriert.

.bikehead {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 24px;
 font-weight: bold;
 color: #F00;
 left: auto;
 right: auto;
 bottom: 10px;
 z-index: 80;
 position: absolute;
}

 

[fexx]

AW: <div> mit CSS in einem Table verschachteln

hast du mal einen link?

width: 100%;
text-align: center;

sollte funktionieren

 

[Flashede]

AW: <div> mit CSS in einem Table verschachteln

da kann ich nur (fexx) zustimmmen, lege doch alles in div containern an (Tabellen sind nicht mehr zeitgemäß)

 

[sokie]

AW: <div> mit CSS in einem Table verschachteln

das ist daber wieder eine 'Divterie' wenn es wirkich um eine headline geht!
die elemente h1,h2,h3 etc sind Blockelemente, da ist ein umgebender Div einfach überflüssig.

<h1>meine header Übeschrift</h1>

h1 {
  background: url(meinbild.jpg);
 font-family: Verdana, Geneva, sans-serif;  
 font-size: 24px;  
 font-weight: bold;  
 line-height: 100%;
 padding-top: /*deine Werte*/
 padding-bottom: 10px;
 text-align: center;

für height musst du nun den wert angeben, der deine Bildhöhe abzüglich der paddings und der Überschrift(24px) ist.
oder anders, das padding-top muss so gewählt werden, dass dein background voll zu sehen ist.

 

[Landorien]

AW: <div> mit CSS in einem Table verschachteln

zu deinen divs ... du könntest es so machen

<div class="bild">
<img src="" alt="" />
<span class="beschreibung">Headline</span>
</div>

Wie schon einen post über mir erwähnt wurde: Headline = h1-h6 - Tag in logischer Struktur. Ein span-Tag ist ebenso wie ein div-Tag bedeutungslos.

Um "ruckeliges" Seitenaufbauen zu verhindern: immer width und height-Attribute bei img-Tags mit angeben!

Sollte das bild keinen relevanten Inhalt besitzen, also zu Designzwecken verwendet werden -> CSS background.


Gruß
Landorien


P.S.: Periodic Table of the Elements - Josh Duck

 

[fexx]

AW: <div> mit CSS in einem Table verschachteln

alles reine spekulation ... um es wirklich perfekt zu machen, hätte man mal das layout sehen müssen, nicht nur eine skizze. wenn die kombination nämlich öfter auf einer seite vorkommt ist das mit den headlines auch nicht die beste wahl ;-) ich dachte eher an eine gallerie (mehrere bilder mit beschreibungen).

 

[Landorien]

AW: <div> mit CSS in einem Table verschachteln

alles reine spekulation ... um es wirklich perfekt zu machen, hätte man mal das layout sehen müssen, nicht nur eine skizze....

Layout hat in erster Linie nichts mit HTML zu tun.

wenn die kombination nämlich öfter auf einer seite vorkommt ist das mit den headlines auch nicht die beste wahl ;-)

wieso? Ich kann doch mehrere Überschrift für mehrer Absätze haben?

ich dachte eher an eine gallerie (mehrere bilder mit beschreibungen).

Wieso steht dann Headline und nicht Description da? Eine "Beschreibung" kann, je nach Art eine Textabsatz sein (<p>) oder vllt sogar eine Auflistung von Stichpunkten (<ul>).

Achja..wenn du eine Galerie erstellen willst, dann wäre das eine Auflistung von Bildern:

<ul>
   <li>Bild 1</li>
   <li>Bild 2</li>
   <li>Bild 3</li>
</ul>

gallerie

Gruß
Landorien