neue zeile zwischen zwei <div> tags

[andi_b]

hallo zusammen,
noch eine kurze frage vorm we: ich möchte gern für eine newsseite eine liste erstellen, bei der jede headline einen titel und das datum enthält. umd titel und datum optisch zu trennen habe ich zwei styles, einer links-, einer rechtsbündig:

.newsHeader{
 background: #cdd7e2;
 font-size: 0.9em;
}
.newsDate{
 text-align: right;
 font-size: 0.6em;
 padding: 0 7px 7px 0;
}

bei einer zuweisung:

<td>
 <div class="newsHeader">{tmpl_var name='news_title'}</div>
 <div class="newsDate">{tmpl_var name='news_date'}</div>
</td>

wird die zeile immer umgebrochen. wenn ich alter es alternativ so schreibe:

<td>
 <div class="newsHeader">{tmpl_var name='news_title'}
 <span class="newsDate">{tmpl_var name='news_date'}
 </span>
 </div>
</td>

dann geht mir beim datum das rechtsbündige verloren. hat evt einer einen tip?

danke euch, andi

[Lutz]

Am saubersten ist es, du setzt Titel und Datum in zwei Tabellenzellen und arbeitest darunter mit colspan="2" weiter - und wendest die CSS-Formatierung auf <td> an...

[andi_b]

Am saubersten ist es, du setzt Titel und Datum in zwei Tabellenzellen

hmm. genau das wollte ich vermeiden, um eine halbwegs css-getreue umsetzung zu erreichen. gibts nicht noch ne möglichkeit?

[Thomas Luethi]

Hallo,

<td>
<div class="newsHeader">{tmpl_var name='news_title'}</div>
<div class="newsDate">{tmpl_var name='news_date'}</div>
</td>
wird die zeile immer umgebrochen.

Das ist logisch. DIV ist ein Block-Level-Element.
Danach erfolgt ein Umbruch.

Du koenntest Dein Glueck mit float versuchen.
Bei float muss man immer auch width angeben.
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

Wie viele Buchstaben der Datums-String haben wird,
ist ja vorhersagbar, somit kannst Du ja die Breite des
DIVs auch in "em" angeben, z.B. bei dd.mm.yyyy Format
duerften 10em Breite reichen.

Versuch mal folgendes (ungetestet!):

div.newsDate
  {
   float:right; width:10em;
   text-align:right;
  }

<td>
  <div class="newsDate">12.12.2003</div>
  Ueberschrift Bla Bla
</td>

Die Ueberschrift solltest Du auch noch logisch auszeichnen.
Wenn Du z.B. schon <h1> und <h2> auf der Seite verwendest,
waere hier <h3> angesagt:

<td>
  <div class="newsDate">12.12.2003</div>
  <h3>Ueberschrift Bla Bla</h3>
</td>

Gruesse,

Thomas

[andi_b]

div.newsDate
  {
   float:right; width:10em;
   text-align:right;
  }

<td>
  <div class="newsDate">12.12.2003</div>
  Ueberschrift Bla Bla
</td>

alter falter - das geht :) ich danke dir!

andi

[andi_b]

mist, doch nicht ganz so toll. im ie zeigt er die überschrift mit rechtsbündig, obwohl explizit anders gesagt:

.newsHeader{text-align: left;}
.newsDate{text-align: right;}
div.newsDate{float: right; width: 18em;}

<td class="newsHeader">
  <div class="newsDate">{tmpl_var name='news_date'}</div>
  <span class="newsHeader">{tmpl_var name='news_title' escape='none'}
    </span>
  </td>

was könnte ich denn noch umbauen?

danke, andi

[at]

Hallo.

mist, doch nicht ganz so toll. im ie zeigt er die überschrift mit rechtsbündig, obwohl explizit anders gesagt:

[...]

was könnte ich denn noch umbauen?

Den IE? ;-)
MfG, at