productlisting für online shop ohne tabelle via div lösen

[amidala82]

hallo,

ich versuche gerade das produktlising eines online shops so umzubauen, dass die tabellen rausfliegen und das ganze via div läuft.

es sollen immer zwei produkte nebeneinander dargestellt werden und dann in die teife, nach dem motto

produkt 1 | produkt 2
produkt 3 | produkt 4
produkt 5 | produkt 6
....

ich habe mit divs bisher 0 erfahrung und habe schon viele tutorials hinter mir. leider bin ich hängen geblieben mit diesem code hier:

<style type="text/css">
  div#table {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 250px;
    float:left;
    left: 0;
    padding: 0.5em;
    border: 2px ridge silver;
  }
</style>
<br /><br />
<div id="table">Produkt 1</div>
<div id="table">Produkt 2</div>
<br /><br />
<div id="table">Produkt 3</div>
<div id="table">Produkt 4</div>

Dieser Code stellt leider die Produkte nicht untereinander wie es sein soll.

Ich denke mal eine Lösung dieses Problems wird nicht mein ganzes Problem lösen. Ziel ist es diesen Tabellenmüll irgendwie als div zu bauen:

<table width="750" border="1">
<tr>
<td>Produkt 1<br />
<table width="300" border="1">
<tr>
<td>bild</td>
<td>text</td>
</tr>
</table>
Text 1<br /></td>
<td>Produkt 2<br />
<table width="300" border="1">
<tr>
<td>bild</td>
<td>text</td>
</tr>
</table>
Text 1<br />
<br /></td>
</tr>
<tr>
<td>Produkt 3<br />
<table width="300" border="1">
<tr>
<td>bild</td>
<td>text</td>
</tr>
</table>
Text 3<br />
<br /></td>
<td>Produkt 4<br />
<table width="300" border="1">
<tr>
<td>bild</td>
<td>text</td>
</tr>
</table>
Text 4<br /></td>
</tr>
</table>

Ich weiß nur, dass es oft mit browsern probleme gibt. wobei ich nur das html tabellenframework irgendwie via div darstellen will. wobei die die produkte auf der zeile immer wagerecht sind, d.h. so:

produkt 1 | produkt 2
produkt 3 | produkt 4
produkt 5 | produkt 6

und nicht so (falls ein produkt mal etwas mehr platz braucht)

produkt 1 | produkt 2
|
produkt 3 |
| produkt 4
produkt 5 | produkt 6

Kann man mein Problem einfach lösen? Ich habe wohl in nem Forum folgendes gelesen:

"Gibt es nicht auch eine Möglichkeit, das zweite Element "automatisch" unterhalb des ersten anzeigen zu lassen, ohne spezifische Angaben zu Position zu machen?

indem du sie in ein umgebendes div packst und dieses absolut positionierst, die inneren divs aber nicht."

amidala

[Steel]

Hi,

Manchmal ist eine Tabelle auch eine Tabelle.

ansonsten:

Du definierst ein element mit einer ID.
Komsicherweise haben aber 4 LEmente diese ID. Das ist schonmal ziemlich ungueltiges HTML und wird von vernuenftigen (und weniger vernueftigen) Browsern nicht umgesetzt. Eine ID ist einmalig. Du denkst da wohl eher an Klassen. (was aber auch unnoetig ist)

Was machen denn Die <br> da? Die koennen weg. Wenn du einen Rand willst dann setz einen mit margin.

Wie stellt dein Code die Produkte denn dar? Wenn das Stylesheet mal angewendet werden sollte, dann muessten in einem 504px breitem Container in allen Browsern je 2 Boxen nebeneinander stehen. (so spontan behauptet, ohne gewaehr)

Dein Codeschnipsel ist nicht besonders, aehm... schoen. Welchen Doctype benutzt du z.b.? Ich hoffe die Style angeben stehen da nicth wirklich mitten im Code rum, sondern in einer externen Datei oder wenigstens im header?

Naja. Fang erstmal an und komm dann wieder, wenns nicht klappt.

[Matze]

Hallo,

Wenn du einen Rand willst dann setz einen mit margin.

margin ist Abstand nach aussen, padding nach innen.
"Rand" ist ein Schuster der keinen Absatz macht.

Grüße, Matze

[Jonathan]

Hallo amidala82,

ich versuche gerade das produktlis[t]ing eines online shops so umzubauen, dass die tabellen rausfliegen und das ganze via div läuft.

Ein Produkt_list_ing würde ich aber nicht als tabelle oder div sondern als Liste realisieren. ;-)

Jonathan

[Struppi]

ich versuche gerade das produktlis[t]ing eines online shops so umzubauen, dass die tabellen rausfliegen und das ganze via div läuft.

Ein Produkt_list_ing würde ich aber nicht als tabelle oder div sondern als Liste realisieren. ;-)

Wieso? Ist eine Tabelle keine Auflistung?

Struppi.