Erstes Site-Layout in CSS, fast ohne Tabellen, okay?

Multikulti · #1 (**permalink**) 01.05.2006, 05:50

Hallo CSSler,

ich bin gerade dabei, meine erste Site ohne Tabellen zu erstellen, naja nahezu ohne...ganz scheint es mir doch nicht zu gehen bzw. nicht sinnvoll zu sein. Ich verwende CSS bereits seit längerem, aber es ist das erste Mal, dass ich nun versuche, das "komplette" Layout über CSS zu steuern, deswegen würde ich mich sehr über eure Meinungen zu meinem bisherigen Schaffen freuen.
Browsercam.com (Online-Browservergleichstool) zeigt mir bis auf IE 5.0 + 5.5 (nur noch ein hr-Problem beim IE 6.0) nahezu komplett stimmige Ergebnisse an. IE 5.0 + 5.5 scheinen mit einem float nicht zurecht zu kommen, ich nehme an, weil ich da ne table mit eingestrickt habe. Ich hatte dann mal versucht, um die table noch ne div mit float: left zu legen, aber das hat rein Gar Nix bewirkt. Habt ihr noch ne Idee, kümmert ihr euch überhaupt noch um die beiden?

Bei allen IE´s, also auch 6.0 wird hr mit nem imaginären margin dargestellt, habe mich da bereits durch einige Foren + Lösungen gequält, aber keine der vorgeschlagenen Lösungen greift, werde da wohl auf border-bottom in der jeweiligen Zelle umsteigen oder nen Bild machen...leider.

Bin auf eure Antworten / Meinungen gespannt, bitte nicht gleich drauf einprügeln, wenns nicht 100% semantisch oder Code-optimiert ist, wie gesagt, ist mein erster Versuch ner kompletten CSS-Site.

Saludos
Multikulti

The Doc · #2 (**permalink**) 01.05.2006, 12:59

Auch wenn's der erste Versuch ist - gerade dann solltest du ganz von Tabellen wegkommen. Mach den Schritt einmal, anstelle von immer wieder.

Also: Tabellen ganz weg, das geht, wenn du nicht weiter kommst, poste dein Problem (in einem angemessenen sprich auf's Wesentliche reduzierte testcase)

Die Frage mit den IE's hängt von deiner Zielgruppe ab, hast du die Seite bereits länger? Dann kannst du die Statistiken angucken und sehen, ob deine Besucher noch diese Browser benutzen und wenn ja, wieviele und ob das vernachlässigbar ist.

Zu den restlichen Fragen musst du uns einen testcase vorstellen.

Multikulti · #3 (**permalink**) 02.05.2006, 05:22

@ The Doc

Danke für deine Antwort. Puh mit der Tabelle ist das so ne Sache, ich wüsste gar nicht, wie ich da sinnvoll anfangen sollte, um die zu beseitigen. Der Code zur Tabelle :

Code:

<table id="exposeeckdatentext" cellpadding="0" cellspacing="0">
		  <tr>
			<td class="exposeeckdatentextrubrik">
			  

RUbrik 01 Abschnitt 01</p>
			  

Rubrik 02 Abschnitt 01</p>
			</td>
			<td>
			  

Datensatz 01 Abschnitt 01</p>
			  

Datensatz 02 Abschnitt 01</p>
			</td>
		  </tr>
		  <tr><td colspan="2"><hr class="exposeeckdatenlinie"></td></tr>
		  <tr>
			<td class="exposeeckdatentextrubrik">
			  

RUbrik 01 Abschnitt 02</p>
			  

Rubrik 02 Abschnitt 02</p>
			</td>
			<td>
			  

Datensatz 01 Abschnitt 02</p>
			  

Datensatz 02 Abschnitt 02</p>
			</td>
		  </tr>
</table>

Der dazugehörige CSS-Teil:

Code:

table#exposeeckdatentext {
padding: 3px 10px 7px 0px;
width: 345px;
}

hr.exposeeckdatenlinie {
border-top: 1px solid #F1F0C2;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
height: 1px;
padding: 0px;
margin: 4px 0px 4px 0px; 
}

td.exposeeckdatentextrubrik {
padding-right: 15 px;
font-weight: bold; 
width: 115px;
}

Es gehören natürlich immer eine Rubrik und ein Datensatz zusammen, müsste also in einer Box stehen, sonst wäre es ja ein reines Boxen-Getümmel und das kann ja auch nicht Sinn und Zweck der Sache sein...Hier fehlt mir aber jeglicher Ansatzpunkt, dass mit einer Box zu lösen. Hat wer ne Idee?

Multikulti

RoToRa · #4 (**permalink**) 02.05.2006, 10:16

Ah, du bist da ein dem einem weitverbreiteten Irrtum aufgesessen. Wenn man von "tabellenlosem Layout" spricht, dann heisst das *nicht* das Tabellen generell verboten sind. Für tabellarische Daten - wie du sie auch hier hast - sollen (und müssen) sie weiterhin eingesetzt werden.

Gerade indem du jetzt die Tabellenzeilen "aufgerissen" hast geht die Zuordung Rubrik zu Daten verloren. Versuche es mal so:

Code:

table#exposeeckdatentext {
border-collapse: collapse;
border-spacing: 0;
padding: 3px 10px 7px 0px;
width: 345px;
}

table#exposeeckdatentext th {
text-align: left;
padding-right: 15 px;
}
.exposeeckdatenabschnittanfang th, .exposeeckdatenabschnittanfang td {
border-top: 1px solid #F1F0C2;
}

Code:

<table id="exposeeckdatentext">
  <tr>
    <th>Rubrik 01 Abschnitt 01</th>
    <td>Datensatz 01 Abschnitt 01</th>
  </tr>
  <tr>
    <th>Rubrik 02 Abschnitt 01</th>
    <td>Datensatz 02 Abschnitt 01</th>
  </tr>
  <tr class="exposeeckdatenabschnittanfang ">
    <th>Rubrik 01 Abschnitt 01</th>
    <td>Datensatz 01 Abschnitt 01</th>
  </tr>
  <tr>
    <th>Rubrik 02 Abschnitt 01</th>
    <td>Datensatz 02 Abschnitt 01</th>
  </tr>
</table>

Robin

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Umsetzung eines grafischen Rahmens von Tabellen in CSS	HeyJ	CSS	8	23.03.2009 15:24
Gliederungen (Tabellen???) mit CSS	Boof	CSS	6	14.02.2009 20:21
Wie findet ihr mein erstes Css layout?	Css'Benutzer	CSS	8	17.05.2006 21:28
includes bei css layout	dan	CSS	2	10.03.2004 18:21
Wie am besten alte HTML Seite mit Tabellen in CSS Layout ?	Fidi	CSS	0	07.01.2004 11:27