Wer kann mir mit Divs/Css helfen?

Junge, junge. Also ich werd da weder aus dem Code noch aus dem was Firefox aus dem Tabellen-Code generiert schlau, was das werden soll.

Auch wenn Tabellenlayouts verpöhnt sind - wenn du eine Art Tabelle brauchst (was hier der Fall scheint, soweit ich das überblicke), dann bleib auch bei der Tabelle. DIV-Suppen sind nämlich noch dämlicher.

Kannst du nicht mal bildlich darstellen, was du haben willst? Dann kann ich, falls notwendig, mal meinen Senf dazu abgeben. Aber momentan hab ich keine Plan was du willst. In der Regel lässt sich mit Tabellen und CSS kombiniert der lesbarste und sauberste Code erzeugen.

Jap, mit CSS kann man die Höhe von Boxen nicht aneinander ausrichten lassen. Da fällt so ziemlich jeder Neuling mal rein.
Es gibt aber in der Regel nur selten Fälle (aber es gibt sie), wo man das wirklich benötigt, meistens probiert man bloss ein Tabellenlayout auf CSS zu portieren, und das ist nicht Sinn der Sache.

Das "Tabellenlayout sind out" haben 80% aller Leute im Web nicht Sinngemäss verstanden und meinen, jegliches verwenden von <table> müsse geahndet werden, hauen dafür überall ein <div> rein, wo es andere Tags dafür gäbe.
Tabellen sind dann out, wenn sie zur Gestaltung der Seite missbraucht werden, nicht aber, wenn es einen logischen Zusammenhang im Inhalt gibt.

Wenn du erlaubst, mach ich mal einen Vorschlag, wie die Seite meines Errachtens codetechnisch auszusehen hat.

Mein Vorschlag. Benutzt nach wie vor ein paar Tabellen, aber trennt strikt CSS und HTML (mit Ausnahme der unterschiedlichen Hintergrundfarben, die man lediglich mit CSS-Versionen realisieren könnte, die grad mal die modernsten Browser-Engines (WebKit (u.a. Safari) und afaik Presto (Opera)) unterstützen).
Tabellen werden nur dort verwendet, wo es inhaltlich Sinn macht. Und <div> verwende ich gar nicht.

HTML-Code:

<table id="WindowsTabelle">
    <tr>
        <td class="WinEpoche" colspan="2" style="background-color:#000000" >Epoche</td>
    </tr>
    <tr>
        <td class="WinJahre" style="background-color:#000000" >1981 - 2000</td>
        <td class="WinInfo">
            <h3>Betriebsystem</h3>
            <p>
                Viel Beschreibung hier
            </p>
            <ul class="WinBilder">
                <li>
                    <a href="bildLink" onClick="">
                        <img src="vorschau/blindLink">
                    </a>
                </li>
            </ul>
            <table class="WinMoreInfo">
            <tr>
                <th colspan="3">Weitere Informationen verf&uuml;gbar &uuml;ber:</th>
            </tr>
            <tr>
                <td>
                    <ul class="WinLinks">
                        <li><img src="iconLink"><a href="link">Linkbeschreibung</a></li>
                        <li><img src="iconLink"><a href="link">Noch ein Link</a></li>
                    </ul>
                </td>
                <td>
                    <img class="WinSupport" src="SupportBild">
                </td>
                <td>
                    Ne CPU, nen Floppy und nen Bildschirm. Tastatur von Vorteil
                </td>
            </tr>
            </table>
        </td>
    </td>
<table>

CSS-Code:

table#WindowsTabelle {
    border-collapse: collapse; 
    width: 780px;
}


table#WindowsTabelle tr {
    border-bottom: thin solid #808080;
}


table#WindowsTabelle tr td.WinEpoche {
    border-bottom: thin solid #808080;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}


table#WindowsTabelle tr td.WinJahre {
    border-right: thin solid #808080;
    width: 50px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}


td.WinInfo ul.WinBilder {
    list-style: none;
}


td.WinInfo ul.WinBilder li {
    display: inline;
    padding-right: 20px;
}


td.WinInfo ul.WinBilder li a img {
    border: none;
}


td.WinInfo ul.WinBilder li a {
    text-decoration: none;
}


table.WinMoreInfo tr th {
    text-align: left;
    font-weight: normal;
    font-style: italic;
}


table.WinMoreInfo *  ul.WinLinks {
    list-style: none;
    width: 320px;
}


table.WinMoreInfo * ul.WinLinks li img {
    vertical-align: middle;
}

Jedenfalls, da du vermutlich am Ende was eigenes hast: Verwende style="" nur, wenn es wirklich gar nicht anders geht. Das Attribut wird eh bald abgeschafft.

Aber das geht mal gar nicht. Stopp! Halt! Polizei!

id="irgendwas" darf genau [size=7]ein (1)[/size] mal auf der gesamten Seite vorkommen. id ist eindeutig. Genau ein Element auf der Seite darf die id "irgendwas" haben.

Jeder Browser der das trozdem anzeigt gehört eigentlich verboten.

Was du brauchst, ist class.

dciwam | FAQ : Unterschied zwischen id und class

Zitat von Dirk

ich muss echt sagen css ist wirklich das linux unter den webseiten. gefrickel überall, alle machen es anders und an banale sachen hat wieder keiner gedacht.

Wenn’s jeder auf Anhieb verstünde, würde es auf dem Webdesigner-Stellenmarkt ja auch noch schlechter aussehen als sowieso schon. Insoweit bin ich froh, dass man beim CSS-Coden noch hin und wieder die ein oder andere Hürde überwinden muss.

Ich weiss echt nicht was alle immer gegen CSS haben.

Es geht viel nicht in CSS. CSS hat seine Kinderkrankheiten. Das stimmt. Jedenfalls in dem CSS, was die gemeinsame Menge alle Browser darstellt.

Und trotzdem ist das verfügbare CSS immer noch tausendmal besser als das HTML-Gefrickel. Schaut nur mal den Quellcode an. CSS kann nicht alles, was mit HTML mal in Mode war, dafür kann es andere Dinge. Vor allem ist es aber sauberer und bequemer.

Und meistens ist das CSS-Bashing eh ungerechtfertigt. In 80% aller Fälle hat der Programmierer es einfach nicht verstanden, was das Konzept von CSS ist, und wie man damit umgeht.

Viele Fangen an, mit <div>s ihre eigenen Elemente zu kreieren. Völliger Blödsinn, HTML bietet auch für logische Elemente eine passende Standardformatierung an. Andere wiederum wollen CSS dazu missbrauchen, ihre Tabellenlayouts anders umzusetzen.

@Nachtrag; Dirk: "würde ich nen browser schreiben, würde ich nicht jedesmal nachprüfen ob ein element mit dem namen schon gerendert worden ist."
Völliger Blödsinn. Es geht hier gar nicht um die Darstellung. id ist ein Attribut, was für den logischen Dokumentaufbau gedacht ist. Benötigt man vor allem bei Javascript. Die Browser zeigen das lediglich richtig an, weil die davon ausgehen müssen, dass Leute zu dämlich sind, sich mit HTML und CSS mal anständig auseinanderzusetzen. Willst du jedenfalls auf der Seite was Javascript verändert, wird es kläglich scheitern.

Sich mit CSS abmühen tut man sinnvollerweise aus nur zwei Gründen:

1. Sauberer Code (bessere Quelltextlesbarkeit, weniger Wartungsaufwand)
2. Barrierefreiheit für Menschen mit Sehbehinderung

Das gilt aber nur, wenn man auch nur Standard-CSS verwendet.

Sobald man eine bestimmtes Verhalten auf Teufel komm raus erzwingen will, endet man wieder bei Hacks, was im Endeffekt (den HTML-Code eher weniger, den CSS-Code dafür um so mehr) den Code wieder unlesbarer macht.

Will man sauber Programmieren, muss man sich sowohl bei reinem HTML als auch bei CSS auf bestimmte Dinge beschränken.

Wie gesagt, die meisten haben das Konzept von CSS nicht verstanden, ob jetzt Befürworter oder Gegner.

Zitat von gandro

Wie gesagt, die meisten haben das Konzept von CSS nicht verstanden, ob jetzt Befürworter oder Gegner.

Allerdings, also noch mal für alle zum Mitschreiben: Mit (X)HTML gestaltet man (idealerweise) ausschließlich die inhaltliche Seite, mit CSS, wie der Inhalt auszusehen hat.

Wenn also Dirk, wenn er den Inhalt von windows.htm per Hand auf Papier wiedergeben würde, eine Tabelle zeichnen würde, um die verschiedenen Microsoft-Betriebssysteme zu erklären, so ist die logische Folge, dass er auch dafür im Virtuellen dafür <table> verwenden und nicht erst andere Allzweck-Designwaffen dazu missbrauchen sollte.
Anders herum, wie schon von gandro angesprochen, sollte man Tabellen nicht wie noch zu HTML-3.2-Zeiten dazu verwenden, den (gesamten) Inhalt auf einer Seite anordnen zu wollen, zumal auch hier immer optische Diskrepanzen zwischen IE und Netscape-basierten Browsern bestehen.

Das Forum ist schon ein gutes Negativ-Beispiel. Ich schreibe nicht das Wort „nicht“ fett, um es besonders hervorzuheben, sondern möchte es besonders vorheben, wozu man zunächst das Tag <strong> und nicht das Tag <b> (das ja auch wieder ein Gestaltungs-Tag ist!) benutzen sollte. Dem Browser und dessen Benutzerkonfiguration ist dann überlassen, wie Zeichen besonders hervorgehoben werden – ob nun nach Gusto durch (die übliche) Fettschrift oder Kapitälchen etc.

Zitat von DosAmp

Das Forum ist schon ein gutes Negativ-Beispiel. Ich schreibe nicht das Wort „nicht“ fett, um es besonders hervorzuheben, sondern möchte es besonders vorheben, wozu man zunächst das Tag <strong> und nicht das Tag <b> (das ja auch wieder ein Gestaltungs-Tag ist!) benutzen sollte.

Moment. Hier im Forum ist <b> völlig legitim. Sowohl im Editor, als auch in der Beschreibung steht, dass [b] den Text fett macht. Es geht gar nicht um logische Hervorherbung.

Aus dem selben Grund habe ich damals [tt] als <tt> und nicht als <code> implementiert. Die BB-Codes hier dienen zur gestalterischen Formatierung, nicht zur logischen.

Zitat von gandro

Moment. Hier im Forum ist <b> völlig legitim. … Aus dem selben Grund habe ich damals als <tt> und nicht als <code> implementiert. Die BB-Codes hier dienen zur gestalterischen Formatierung, nicht zur logischen.[/quote]gandro hat mal wieder völlig (und wesentlich mehr als ich) recht – zumal man von einem Buelletin-Board auch nichts anderes erwartet. Auch wenn es mich designmoralisch wurmt, dass zum Beispiel genug Leute – darunter auch Gestalter ach-so-toller Web-2.0-Seiten, die angeblich sonst jeden möglichen hippen offenen Standard unterstützen – eindeutig bei Wörtern, die man betont aussprechen würde immer noch [tt]<i> bzw. <span style="font-style:italic"> benutzen.