Antworten zum Thema „[HTML bzw. CSS] Ich bekomm so eine Liste nicht hin“

[papiertiger]

Hi Ihr!

Ich hoffe ihr könnt mir helfen! Ich habe ein Problem beim Formatieren einer Liste, die mehr oder minder so aussehen soll wie eine Tabelle...

Und zwar so in etwa:

Bei täglicher Betreuung:
(hier soll ca. 5px eingerückt sein)4-5 Stundenhier soll soviel Platz sein, dass alle Preise untereinander stehen)92,- ?
(hier soll ca. 5px eingerückt sein)5-6 Stundenhier soll soviel Platz sein, dass alle Preise untereinander stehen)108,- ?
(hier soll ca. 5px eingerückt sein)6-7 Stundenhier soll soviel Platz sein, dass alle Preise untereinander stehen)120,- ?

Bei wöchentlicher Betreuung:
(hier soll ca. 5px eingerückt sein)12-18 Stundenhier soll soviel Platz sein, dass alle Preise untereinander stehen)92,- ?
(hier soll ca. 5px eingerückt sein)18-34 Stundenhier soll soviel Platz sein, dass alle Preise untereinander stehen)108,- ?

etc.

Ich würd das gern ohne Tabellen machen. Ich weiß nur leider nicht mehr weiter...

Vielleicht kann mir jemand von euch weiterhelfen. Würde mich freuen!

LG papiertiger

 

[Duddle]

Warum willst du das ohne Tabellen machen?

Semantisches HTML sieht vor, Tags so einzusetzen, wie sie sinnvoll erscheinen. Überschriften als h1 bis h6 (7?), Paragraphen als p, Zitate als blockquote.

Tabellen sind genau für deinen Zweck gemacht: Die schnelle Gegenüberstellung von Zahlen.
Tabellenlos schreiben heisst ja vorallendingen, nicht mit Tabellen zu layouten (-> Todessünde).

Wenn du absolut kein <table> setzen willst, kannst du es auch mit <pre> versuchen, obwohl du da wieder eine Schrift mit gleich breiten Buchstaben brauchst, damit es perfekt untereinander sitzt?


Duddle

 

[papiertiger]

Hi Du!

Jetzt wird's peinlich für mich :lol:

Ich wollte das ohne Tabelle versuchen, weil ich dachte ich komm dann schneller zu meinem gewünschten Ergebnis...

Ich hab das alles mal so gemacht:

<table width="100%" border="0">
	<tr>
		<td colspan="3"><h4>T&gliche Betreuung</h4></td>
	</tr>
	<tr>
		<td width="5px">&</td>
		<td width="170px">4-5 Stunden:</td>
		<td>92,- &</td>
	</tr>
	<tr>
		<td width="5px">&</td>
		<td width="170px">5-6 Stunden:</td>
		<td>108,- &</td>
	</tr>	
</table>

etc...

Jetzt hab ich allerdings das Problem, dass die erste Tabellenspalte nicht um 5px wie angegeben sondern um ca. 80px eingerückt wird! Und ich mach da seit heute morgen daran rum, ohne, dass ich versteh woran es liegen könnte :evil:

LG papiertiger

 

[adrian]

Jetzt schau dir doch nochmal den Code an. Die Breite der ersten Spalte wird immer den höchstwert annehmen. Deshalb gibt es keinen 2px Abstand. Nachher kannst du dann mal weiterschauen.

 

[papiertiger]

Naja, wenn ich in die erste Spalte width="80px" reingeschrieben hätte, würd ich es verstehen...! Hab ich aber nicht und im Stylesheet ist auch nichts angegeben!

Bin ich blind und du siehst den Fehler oder ist dir das genauso rätselhaft?

LG papiertiger

 

[TRex2003]

<div>
<h2 class="titel">T&gliche Betreuung</h2>
<ul>
[*]4-5Stunden:<span class="preis">92,-€</span>
[/list]
<h2 class="titel">W&chentliche Betreuung</h2>
<ul>
[*]12-18 Stunden:<span class="preis">92,-€</span>
[/list]

und css:

.titel { display: block; background-color: red; line-height: 150%; }
li {margin-left: 5px; }
.preis { text-align: right }

probiers mal damit..ich weiß nich ganz, ob man innerhalb von [*] weitere tags einfügen darf aber ein versuch ists wert

 

[blackout]

hey, nicht tabellen sind schlecht, nur die designer, die sie zum layouten verwenden. eine tabelle aus divs etc zu basteln ist absolut miserabler möchtegern-stil - leider sind mir einige seiten bekannt, die das empfehlen.
<table> steht nun mal für tabelle - und ich wüsste auch keinen einzigen grund warum das eine falsche anwendung sein sollte.

 

[TRex2003]

ok, für tabellenform die css:

tr { margin-left: 5px }
td+td {text-align: left}

sollte gehen..

 

[blackout]

td+td? wann liegt denn schon mal ein td gleich neben einem td?

 

[Herr_D]

<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="2"><h4>Tägliche Betreuung</h4></td>
    </tr>
    <tr>
      <td style="width: 170px; text-align: left; vertical-align: top; padding-left: 10px;">4-5 Stunden:</td>
      <td style="text-align: left; vertical-align: top;">92,- ?</td>
    </tr>

usw. usw.

  </tbody>
</table>

5px sind für die Katz, deswegen hab ich mal beim padding-left (Innenabstand der Zeile nach Links) 10px eingesetzt... kannste natürlich auf 5px reduzieren...



im <tr> werden keine Angaben gemacht, wenn du nicht padding im <td> einsetzen willst, kannst du margin (Aussenabstand) im Inhalt der Zeile benutzen ... etwa so:

<td><span style="margin-left:5px;">5-6 Stunden</span></td>

 

[papiertiger]

Herr_D, das war genau das, was ich gesucht hab! DANKE!

Euch anderen auch Danke für die Vorschläge!

LG papiertiger

 

[blackout]

seh ich das richtig wenn du gar keine liste sondern eine tabelle brauchtest?

 

[papiertiger]

Hi blackout!

Ja, klar, das siehst du richtig... Ich war allerdings so naiv zu glauben, dass ich mit einer anderen Lösung schneller mein Problem gelöst bekomme... Ich hatte nämlich einige Stunden damit verbracht an der Tabelle rum zu basteln, ohne, dass ich es geschafft hatte die Zeilen einzurücken! *schäm*

LG papiertiger