• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellenspalten als div

N

nightmind

Neues Mitglied
Ich muß leider mal fragen wie ich sowas hier ohne eine herkömmliche Tabelle erstellen kann (die Rahmen und Farben dienen nur zu Hervorhebung, mir geht es nur um das Gerüst).
Habe nun schon einige Zeit bei Google gesucht, dort finde ich zwar auch einige Layouts wo es erklärt wird, aber bei allen klappts nicht so wie ich das gerne hätte (so wie eben im Link). Ich stell mich vermutlich wieder zu blöd an. Kann mir vielleicht jemand nen Denkanstoß geben ? Kann doch garnicht so kompliziert sein...

Gruß
 
Ist auch nicht kompliziert. Der Text kommt in <div> oder <p> Container und wird anschließend über IDs und Klassen in CSS angesprochen.

<div id="text" class="txt">Mein Text</div>.
 
was tronjer meint sieht dann in etwa so aus:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>"Tabelle" mit DIV</title>
<style type="text/css">
body {
    font: 12px Arial, Helvetica, sans-serif;
    color: #333;
}

p {
    padding: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.post { width: 500px; }

.headline {
    font: bold 15px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #000;
    border-bottom: 1px solid #000;
}

.data { font-size: 11px; }
</style>
</head>

<body>
<div class="post">
    <div class="headline">Überschrift der News / des Beitrags</div>
    <div class="content">
        <p>Ut labore et dolore magna aliqua. Quis nostrud exercitation excepteur sint occaecat consectetur adipisicing elit. Ullamco laboris nisi ut enim ad minim veniam, duis aute irure dolor.</p>
        <p>Lorem ipsum dolor sit amet, mollit anim id est laborum. In reprehenderit in voluptate qui officia deserunt cupidatat non proident. Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, excepteur sint occaecat. Mollit anim id est laborum.</p>
        <p>Quis nostrud exercitation lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt. Duis aute irure dolor excepteur sint occaecat ut labore et dolore magna aliqua. Qui officia deserunt lorem ipsum dolor sit amet, eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt mollit anim id est laborum.</p>
    </div>
    <div class="data">geschrieben von Musteruser (0 Kommentare)</div>
</div>
</body>
</html>
 
Hi,
dankeschön für den Code!
Das Hauptproblem mit den 2 Spalten ist damit aber nicht gelöst wenn du nochmal in mein Beispiel von oben schaust, da beiße ich mir die Zähne aus. Geht sowas auch einfach mit divs zu lösen ? Es soll ja vom Aufbau her so sein wie in meinem Tabellenbeispiel.
 
HTML: 
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #wrapper {
            width: 100%;
            background: #3399CC;
        }
        #div1 {
            text-align: center;
            background: #FFCC66;
        }
        #div2, #div3, #div6, #div7 {
            float: left;
        }
        #div2 {
            width: 90%;
        }
        #div3 {
            width: 10%;
        }
        #div4 {
            clear: left;
        }
        #div6, #div7 {
            width: 50%;
            background: red;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <p id="div1">Kategorie der News</p>
        <p id="div2">
            Titel der News<br />
            Quelle der News
        </p>
        <p id="div3">Uhrzeit</p>
        <p id="div4">
            geschrieben von Musteruser<br />
            Anzahl der Kommentare
        </p>
        <p id="div5">
            Hier kommt der Newstext<br /><br />
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr ....
        </p>
        <p id="div6">Kommentieren</p>
        <p id="div7">Weitersagen</p>
    </div>
</body>
</html>

Mehrspaltiger Text wird hier im CSS über float:left realisiert Du darfst allerdings nicht vergessen, auf das erste nicht mehr gefloatete Element ein clear:left zu setzen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben