Wer kann mir mit Divs/Css helfen?

[Dirk]

Ich will die uralte Tabelle bei WH in Divs ändern. So sieht es jetzt aus:

Code:

<tr>
      <td
style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium;"
align="center" bgcolor="#000000" width="7%">
      <h5><font color="#ffffff">1987- 1990</font></h5>
      </td>
      <td
style="border-top: 1px solid rgb(128, 128, 128); border-right-style: none; border-right-width: medium;"
width="93%">
      <h3>OS/2 1.x</h3>
      <p>Ein .....</p>
  <table border="0" width="100%" id="table36" style="border-collapse: collapse">
   <tr>
    <td width="25%" align="center"> <a href="bilder/os2_11_1.gif" onClick="return vergroessern('bilder/os2_11_1.gif',event,'center',640,480)"> <img
src="vorschau/os2_11_1_small.gif" border="0" height="92" width="123"></a></td>
    <td width="25%" align="center">
      <a href="bilder/os2_13_1.gif" onClick="return vergroessern('bilder/os2_13_1.gif',event,'center',640,480)"> <img
src="vorschau/os2_13_1_small.gif" border="0" height="92" width="123"></a></td>
    <td width="25%" align="center">&nbsp;</td>
    <td width="25%" align="center">&nbsp;</td>
   </tr>
   <tr>
    <td width="50%" align="center" colspan="2">
      <table style="border-collapse: collapse;" id="table56" border="1"
bordercolor="#c0c0c0" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td colspan="2" width="100%"><i>Weitere Informationen
verf&uuml;gbar &uuml;ber:</i></td>
          </tr>
          <tr>
            <td width="15%">
            <p align="center"> <img src="../style/prog.gif" border="0"
height="16" width="16"></p>
            </td>
            <td width="85%">
   <p align="left"><a href="os2.htm">MS OS/2 1.x
Versionsgeschichte</a></td>
          </tr>
        </tbody>
      </table>
         </td>
    <td width="25%" align="center">
      <img src="../style/dosred.gif" border="0" height="35" width="32"></td>
    <td width="25%" align="center">286er Prozessor, 3 MB Hauptspeicher, 30 MB
Festplatte</td>
   </tr>
  </table>
      </td>
    </tr>

und soweit hab ich schon die grundstruktur:

Code:

<div id="winbox">
<div id="winjahr">1981-2000</div>
<div id="wininnerbox" >
  <div id="wintext">
  <p>MS-DOS</p>
  <p>....1994).</p>
  <p>Die erste Version, 1.0, wurde im August 1981 (!!) ausgeliefert.</p>
</div>
  <div id="winbild">Bilder</div>
  <div id="winsubbox">
   <div id="winlinks" style="float: left;">Links</div>
   <div id="winsystem" style="float: left;">System</div>
   <div id="winsupp" >Support</div>
  </div>
</div>
</div>

Das problem ist das ich es nicht ordentlich formatiert bekomme. unter ffx habe ich eine css datei hinbekommen die nur grob buggt, im ie sieht die aber ganz anders aus. im web finde ich nicht wirklich was. geschweige nen wysiwyg-editor.

[gandro]

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.

[Dirk]

Es soll genau so aussehen wie jetzt die www.winhistory.de/more/windows.htm

Hab jetzt rausbekommen das CSS NICHT WIRKLICH gleichlange Spalten unterstützt. großartige leistung. Das einzige was man machen kann ist ne fake-column. Man arbeitet mit nen hintergrundbild. dabei bin ich jetzt auch angelangt.

Ich weiß zwar das Tabellenlayout out sind, aber es ist einfach mehr eine tabelle als alles andere. aber tabellenbefehle will ich trotzdem vermeiden.

[gandro]

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.

[Dirk]

Das Tabellarische Denken fällt einfach einfacher wenn man jahrelang mit excel gearbeitet hat. zumal es eh nur ne handvoll sinnvoller layouts gibt, wo man informationen entweder nebeneinander oder untereinander anordnen kann.

Ich bin aber für vorschläge immer offen. inzwischen hab ich das aber relativ so wie ich wollte. zumindest glaub ich das. auf jeden fall war vorher nen </div> zuviel

[gandro]

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:

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:

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.

[Dirk]

Habs jetzt mit Divs gemacht und einiges aufgegeben, so sieht es jetzt aus:
Windows Übersicht

Die Seite ist etwa nur noch halb so groß wie vorher. hoffe habe alle copy & paste fehler raus.

Unter IE 7 und FFx sieht die identisch aus.

[gandro]

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

id="irgendwas" darf genau ein (1) 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

[Dirk]

Habs mal geändert. aber ehrlich gesagt macht das kein unterschied. ich vermute mal das ist nen unterschied der keinen interessiert. würde ich nen browser schreiben, würde ich nicht jedesmal nachprüfen ob ein element mit dem namen schon gerendert worden ist. zumal ich mich dann im fehlerfalle für was entscheiden müsste, ob ich es jetzt nach class art darstelle oder garnicht...

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.

[s4ndwichMakeR]

Dirk schrieb:  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.