Daniel: (&CSS?) Tabelle

Beitrag lesen

Ahoi Efchen,

Das steht in Deinen bisherigern Postings anders.

seh ich nid so.

Und wo ist die Beziehung zwischen einer Spalte und einer anderen?

na da wir in deutschland leben läuft die von links nach rechts und von oben nach unten.

Bei Dir sind ja pro Zeile in einer Spalte verschiedene Bedeutungen untergebracht.

die gleiche wäre wohl auch sinnfrei.

Das ist nicht Sinn einer Tabelle. Da werden mehrere Daten einer Spalten in bezug zu anderen Daten gebracht.

stehen sie ja auch.

CSS-Layout baut nunmal auf div's & co
Nein. Das ist definitiv falsch.

natürlich, ohne div's ist meines erechtens ein Layout mit CSS nicht möglich

Darstellung sollst Du ja auch mit CSS erreichen und nicht mit HTML! Deswegen gibt es kein Element dafür. -> Trennung von Inhalt und Layout.

es ist getrennt.

Mit HTML-Tags zeichnest Du nur die Struktur aus und sorgst nicht für die Darstellung. das macht allein CSS.

schon klar.

hier in diesem fall finde ich es nicht
angebracht.
Ich auch nicht. Aber auch Tabellen sind hier nicht angebracht.

wie denn dann?

Nimm Deinen Inhalt, zeichne ihn semantisch korrekt aus (dazu gehören divs zum Gruppieren von mehreren Elementen), und wende dann CSS auf Deine Struktur an. DAS ist ein CSS-Layout.

da siehstes, sagst ja selber DIV!

Weil man mit denen die Nutzbarkeit einer Site beeinträchtigen kann, und DAS ist fatal für eine Website.

tu ich doch garnicht.

hier jetzt mal der umbau in DIV:

mein.html:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
  <head>  
    <title>Test</title>  
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
    <link rel="stylesheet" type="text/css" href="mein.css">  
  </head>  
  <body>  
      <div class="links">  
  
      <div class="news">News</div>  
      <div class="ueber"><div class="schrift">TEST-&Uuml;berschrift</div>  
        <div class="datum">25.07.2005</div>  
      </div>  
      <div class="newstext">Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text Test-text      </div>  
    </div>  
  
    <div class="rechts">  
       <img's>  
        </div>  
  </body>  
</html>  

mein.css

  
html { color: #696969; font-size: 9pt; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background: #fff; margin: 0em; padding: 0em; border: 0em; height: 100%; width: 100%;}  
  
body {width: 100%; height: 100%; margin: 0; padding: 0; vertical-align: top; text-decoration: none;}  
  
h1{font-size: 19pt;}  
  
a { color: #696969; font-weight: bold; text-decoration: none; border: 0em; }  
img { border: 0em; }  
  
div.links{width: 70%;  height: 100%; float: left;}  
div.rechts{width: 20%;  height: 100%; float: left;}  
  
div.news{width: 99%;  height: 3em; text-align: center; font-weight: bold; margin-top: 1em; padding-top: 1em; vertical-align: middle; border: 2px solid #696969; float: left;}  
  
div.ueber{width: 100%;  height: 3em; text-align: center; font-weight: bold; border: 0em; padding-top: 1em; vertical-align: middle; float: left;}  
  
div.schrift{width: 70%;  height: 3em; text-align: left; font-weight: bold; border: 0em; padding-top: 1em; vertical-align: middle; float: left;}  
  
div.datum{width: 29%;  height: 3em; text-align: right; font-weight: bold; border: 0em; padding-top: 1em; vertical-align: middle; float: left;}  
  
div.newstext{width: 99%;  height: 100%; text-align: left; font-weight: normal; border: 0em; padding-top: 1em; vertical-align: top; float: left;}  
  
img.news{width: 100%; border: 0em;  vertical-align: top;}  

MfG