Eine Tabelenvoralge in CSS..

MrFreeze · #1 (**permalink**) 08.05.2007, 01:01

Hallo ich habe bei der Umsetzung einer derzeit auf Table basierenden Vorlage in CSS Probleme

Code:

<table width="652" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="233">DER TEXT IN DIESER ZEILE</td>
    <td width="201">kleiner text</td>
    <td width="218">[GRAPHIC]</td>
  </tr>
  <tr>
    <td>DER TEXT IN DIESER ZEILE</td>
    <td>kleiner text</td>
    <td>[GRAPHIC]</td>
  </tr>
  <tr>
    <td>DER TEXT IN DIESER ZEILE</td>
    <td>kleiner text</td>
    <td>[GRAPHIC]</td>
  </tr>
</table>

Meine Probleme sind zB.: die Texte müssen alle absolut untereinander stehen
so wie es mit eienr Table ja dank von Spalten recht einfach ist...

Wer kann mir dabei helfen...?

Danke

RoToRa · #2 (**permalink**) 08.05.2007, 11:05

Bei CSS-Layouts ist als erster Schritt ein "stabiles", "sauberes" HTML-Grundgerüst nötig. (Stichwort: Semantisches HTML).

Und auf den ersten Blick sieht das was du hast aus wie eine Tabelle. Gib mal realistische (also echte) Beispiele für den Inhalt, dann können wir weitersehen.

Robin

MrFreeze · #3 (**permalink**) 08.05.2007, 13:29

Realistischer Inhalt ist das: wobei Grapic ein kleiner Button von 48x48 grösse ist

die Texte stimmen aber zu 80%

Code:

<table width="652" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="233"> Formular f&uuml;r Angst</td>
    <td width="201">hier geht es weiter</td>
    <td width="218">[GRAPHIC]</td>
  </tr>
  <tr>
    <td>Link zum Forum</td>
    <td>hier geht es weiter</td>
    <td>[GRAPHIC]</td>
  </tr>
  <tr>
    <td>Kontakt zum gesamten Team</td>
    <td>hier geht es weiter</td>
    <td>[GRAPHIC]</td>
  </tr>
</table>

mazzo · #4 (**permalink**) 08.05.2007, 13:32

die Inhalte sind nicht tabellarisch, Du benutzt die Tabelle nur um den Text und die Grafiken zu platzieren. Aus vielen Gründen besser ist ein semantischer Code mit Design/Layout nur per CSS.

RoToRa · #5 (**permalink**) 08.05.2007, 14:31

Zunächst einmal ist "hier geht es weiter" ein äußerst schlechter Text für Links. Einfach den Link auf den "richtigen" Text (und die Grafik) legen und fertig.

Ansonsten wäre interesaant, ob die Bilder eine inhaltliche Bedeutung haben. Ich vermute nicht, und das es nur ergänzende Schmuckgrafiken für die Links sind.

Beides in Betracht gezogen wird das ganze recht trivial:

Code:

* {
   margin: 0;
   padding: 0;
}

#links {
   width: 15em; /* Nach Geschmack anpassen. Bitte in auch in das Thema "flexibele Layouts" und warum Größenangaben in Pixel unschön sind einlesen. */
}

#links a {
   display: block;
   padding-right: 48px; /* Platz die Grafik */
   min-height: 48px; /* dito - Bekannte Workarounds (Google!) für IE5/6, der min-height nicht kann, einbauen */
   background-repeat: no-repeat;
   background-position: right;
}

#links #formular-link a {
   background-image: url(...);
}

#links #forum-link a {
   background-image: url(...);
}

#links #kontakt-link a {
   background-image: url(...);
}

<ul id="links">
   <li id="formular-link"><a href="...">Formular f&uuml;r Angst</a><li>
   <li id="forum-link"><a href="...">Link zum Forum</a><li>
   <li id="kontakt-link"><a href="...">Kontakt zum gesamten Team</a><li>
</ul>

Robin

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 02:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 08:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 11:39