tabellen nebeneinander

[ronny]

hi,
für meine bilder habe ich mir ne kleine tabelle erstellt, die bild und bildbesitzer enthält. ausgelesen aus der datenbank, rein in ein array,

echo $data["id"]."
<table width="100%" height="150" border="0" cellspacing="1" bgcolor="#FFFFFF">
        <tr>
          <td><table width="90%" height="120" border="0" align="center" cellspacing="1">
              <tr>
                <td><img src="gallerie/bilder/".$data["benutzername"]."/bild1.jpg" width="90" height="69" ></td>
              </tr>
              <tr>
                <td height="10">".$data["benutzername"]."</td>
              </tr>
              <tr>
                <td height="10">".$data[erstellt_am]."</td>
              </tr>
            </table></td>
        </tr>
      </table>

nun werden die tabellen eine nach der anderen untereinander dargestellt, ich hätte aber gern 3 oder 4 nebeneinander und 3 oder 4 untereinander. wie kann ich das lösen?

danke

ronny

[Dieter Raber]

Hallo,

Eine Moeglichkeit waere, die Tabellen innerhalb einer Tabelle mit zwei Spalten zu nesten. Du koenntest auch jede Tabelle in ein <div> mit float:left stecken, allerdings musst Du dann wissen, wie breit die <div> sein sollen (u.Umstaenden auch, wie hoch).

Dieter

[Thomas Luethi]

Hallo Dieter,

OK, Du warst eine Minute schneller... ;-)

Du koenntest auch jede Tabelle in ein <div> mit float:left stecken, allerdings musst Du dann wissen, wie breit die <div> sein sollen (u.Umstaenden auch, wie hoch).

Der DIV ist doch voellig ueberfluessig.
Du unterliegst offenbar dem weit verbreiteten Aberglauben, dass man CSS
nur mit DIVs und SPANs anwenden koenne...

Es reicht, wenn er den Tabellen eine Breite gibt. Dann kann er sie auch direkt "floaten".
Wenn Du ins erste Posting von Ronny guckst, siehst Du, dass er sowieso schon
fixe Breiten hat.

Folgendes koennte funktionieren (ungetestet):

CSS:

table.thumbs { width:150px; float:left; }

HTML:

<table class="thumbs">
  <!-- ... -->
</table>

<table class="thumbs">
  <!-- ... -->
</table>

<table class="thumbs">
  <!-- ... -->
</table>

---

Das ist doch viel uebersichtlicher als:

<div class="thumbs">
<table>
  <!-- ... -->
</table>
</div>

<div class="thumbs">
<table>
  <!-- ... -->
</table>
</div>

Gruesse,

Thomas

P.S. Netscape 4 kriegt bei mir schon lange kein CSS mehr. :-)

[ronny]

hi,

CSS:

table.thumbs { width:150px; float:left; }

HTML:

<table class="thumbs">
  <!-- ... -->
</table>

<table class="thumbs">
  <!-- ... -->
</table>

<table class="thumbs">
  <!-- ... -->
</table>

bedeutet das, das meine "tabellen" sich quasi von rechts nach links aufbauen in der ansicht des benutzers? ( siehe beschr. float:"Der zweite Block versucht also um den ersten Block herumzufliessen, daher der Name der CSS-Eigenschaft float.
" )

und um das noch genau zu machen, ich beginne mit "table.thumbs { width:150px; float:left; }" auch innerhalb meines echo befehls? oder gehört die definition woanders hin? sorry, aber diese spezifischen html/css dinge sind mir noch relativ neu, da ich bisher fast nur geflasht habe. danke

ronny

[Thomas Luethi]

Hallo Ronny,

bedeutet das, das meine "tabellen" sich quasi von rechts nach links aufbauen in der ansicht des benutzers?

Nein. Von Links nach rechts. Und wenn Du lauter Bloecke verwendest, "fliesst" nichts umeinander.

Probier es doch einfach mal aus.

Nach dem letzten Element, das gefloatet wird, braucht es ein "Stop-Signal".

Ich mache das meist so, dass das naechste Element die Klasse "putzer" kriegt:

<!-- gefloatete Dinge... -->

<p class="putzer">

In CSS definiere ich dann:
 .putzer { clear:both; }

Die veraltete HTML-Schreibweise geht so:
<br clear="all">

und um das noch genau zu machen, ich beginne mit "table.thumbs { width:150px; float:left; }" auch innerhalb meines echo befehls?

Du bist offenbar in zu vielen Gebieten aufs Mal ein +/- blutiger Anfaenger.

Mach zuerst mal eine statische Seite, die so aussieht, wie Du moechtest.

Die richtige Reihenfolge ist:
1. HTML => Struktur, logische Auszeichnung.
   Z.B. Bild und zusammengehoeriger Kommentar werden irgendwie
   zusammen als "Block" (Einheit) gruppiert.
   Das muss nicht einmal eine Tabelle sein.

2. CSS => Layout.
    Hier kannst Du jetzt festlegen, wie die Bloecke aussehen sollen,
    und wie sie positioniert werden sollen.

Nun heisst es: Testen in den verschiedenen Browsern.

3. PHP
Erst jetzt, wenn das HTML und CSS in Ordnung sind,
kannst Du daran gehen, mit PHP rumzubasteln.
Sorge einfach dafuer, dass PHP die richtigen Dinge ausgibt.

Dass Du zuerst geflasht hast und nun erst mit HTML/CSS anfaengst,
ist eigentlich auch schon die falsche Reihenfolge, aber immerhin
bist Du jetzt auf dem richtigen Weg... :-)

Ich vermute, dass sich Dein Ziel ohne eine einzige Tabelle erreichen laesst.
Poste doch mal einen Link (</faq/#Q-19>) zu einer Testseite, die ungefaehr
so aussieht, wie Du es moechtest.
Dann koennen wir Dir konkrete Vorschlaege machen.

Vermeide verschachtelte Tabellen. Sie sind ueberfluessig.

Gruesse,

Thomas

[ronny]

hi,

Nein. Von Links nach rechts. Und wenn Du lauter Bloecke verwendest, "fliesst" nichts umeinander.

http://www.kaipahl.de/brain/web_cssfloat.html

ich meinte das unter singlefloat --> herumfliessen ;)

Du bist offenbar in zu vielen Gebieten aufs Mal ein +/- blutiger Anfaenger.

mag sein, aber wer hat mal nicht angefangen ;) ich würde das sicherlich auch ohne hilfen hinbekommen, mit wilden schleifen die zusätzlich durchzählen, wieviel von den veralteten tabellen gezeichnet werden müssen ;), aber ich suche nach einer eleganteren lösung. bisher wollte ich CSS nur vermeiden, denn als ich das letzte mal was mit CSS gemacht habe, hat es kaum ein browser verstanden*gg*

nuja, die zeiten ändern sich :)

Mach zuerst mal eine statische Seite, die so aussieht, wie Du moechtest.

kann manchmal hilfreich sein,aber

3. PHP
   Erst jetzt, wenn das HTML und CSS in Ordnung sind,
   kannst Du daran gehen, mit PHP rumzubasteln.
   Sorge einfach dafuer, dass PHP die richtigen Dinge ausgibt.

ich habe es mir angewöhnt kaum html als reinen code zu verwenden. dh. so wie du es sagts, müsste ich mir doppelte arbeit machen, erst kompletten funktionierenden html code ( ich weiß, es ist kein code *fg* ) und dann, bastel ich mir mein php, dort kopier ich dann per copy und paste meinen fehlenden html code rein und mach auch noch aus jedem " ein " ..... ist das nicht etwas zuviel sinnlose arbeit?

Dass Du zuerst geflasht hast und nun erst mit HTML/CSS anfaengst,
ist eigentlich auch schon die falsche Reihenfolge, aber immerhin
bist Du jetzt auf dem richtigen Weg... :-)

na eigentlich nicht, solange reines flash verlangt ist ;), aber flash gehört immer mehr zur spielerei. 5 sekunden stauneffekt, 2 minuten sucheffekt ;)

Poste doch mal einen Link (</faq/#Q-19>) zu einer Testseite, die ungefaehr

ich gugg mal, muss mal noch suchen, stehe etwas auf individuell, also mag nichts "nachgemachtes"

... stunden vergehen... *fg*
so, hab glaube ich was passendes gefunden.
http://www.levis.de/produkte.htm

etwas runter scrollen, --> die vier eimer nebeneinander

so in der art, habe ich es mir vorgestellt. ohne schnickschnack und spielerei. einfach ein bild und drunter 1-2 infos. 3-4 nebeneinander und nicht mehr als 4 untereinander.

danke

ronny

[Thomas Luethi]

Hallo,

nun werden die tabellen eine nach der anderen untereinander dargestellt, ich hätte aber gern 3 oder 4 nebeneinander und 3 oder 4 untereinander. wie kann ich das lösen?

Mit HTML (verschachtelte Tabellen, boese) oder CSS (z.B. float).
http://www.alistapart.com/articles/practicalcss/ koennte Dir ein paar Ideen geben.

Wenn Du wirklich mit verschachtelten Tabellen rumbasteln willst,
musst Du halt den HTML-Code entsprechend mit PHP generieren.
Ansatz: Zaehler in die Schleife einbauen, wenn Zaehler Grenze ueberschreitet,
=> neue Zeile anfangen und Zaehler auf Null setzen.

Gruesse,

Thomas