Informatik-CSS

  • Nabend zusammen,

    ich bastel in meiner Freizeit gerne ein bisschen an meiner Homepage rum.Nur leider will meine
    Navigationsleiste nicht ganz so wie ich will.

    Ich arbeite nicht mit Frames,deshalb besteht meine horizontale Navigationsleiste aus Zeilen.
    Das Problem ist nun das ich für den "Hover-Effekt",display:block angeben muss.Somit wird ja wenn ich
    das richtig verstanden habe eine neue Zelle für das Element erzeugt und in dieser Zelle ist der Text
    am oberen Tabellenrand ausgerichtet und nicht mittig so wie ich es möchte.


    Quelltext HTML(Navigationsleiste):

    <tr>
    <!--navigation-->
    <td height="35">
    <table class="navi">
    <tr class="navigation">

    <td class="button"><a href="Aktuelles.html">AKTUELLES</a></td>
    <td class="button"><a href="Profil.html">PROFIL</a></td>
    <td class="button"><a href="Schule.html">SCHULE</a></td>
    <td class="button"><a href="Homepage.html">HOMEPAGE</a></td>

    </table>

    </td>
    </tr>
    --------------------------------
    Quelltext CSS:

    table.navi { background-color:#09F; width:100%; height:100%; table-layout:fixed; }

    tr.navigation { font-family:Verdana, Geneva, sans-serif; font-size:12px; vertical-align:middle; text-align:center; letter-spacing:0.3em; background-color:#FFF; height:100%; width:100%; color:#000; }

    td.button a { background:#FFF; height:100%; display:block; color:#000; text-decoration:none; }

    td.button a:hover { background:#CCC; height:100%; display:block; color:#000; text-decoration:none; }

    td.button a:visted { background:#FFF; height:100%; color:#000; text-decoration:none; }
    -------------------------------


    lg.

  • Tabellen sind mindestens genauso schlecht wie Frames. Tabellen dienen der Tabellarischen Anzeige von Daten und nicht um das Layout eines Navigationselements wie einer Menüleiste.

    Fehler, Ausdruck, Erklärung nötig
    Keine Korrekturen per Privatnachricht.

  • Unser Informatik Lehrer,der vorher etliche Internetseiten als Fachinformatiker in Anwendungsentwicklung programmiert hat, meinte das Frames eine Sicherheitslücke darstellen.Er selbt hat wohl in früheren Zeiten ein bisschen rumexperimentiert ;)

    Ich persönlich arbeite lieber mit Tabellen,ich denke es ist jeden selbst überlassen ob er nun das Layout mit Frames oder mit Tabellen programmiert.

  • Frames sind kein Sicherheitsrisiko, sie sind lediglich unelegant, nicht besonders flexibel - besonders bei dynamisch generierten Seiten - und in sehr vielen Fällen einfach Benutzerunfreundlich. Es gibt aber durchaus sinnvolle Anwendungsfelder für Frames.

    HTML hat den Zweck Texte logisch zu strukturieren. Sämtliche Formatierung sollte man ausschließlich mit CSS machen, wo immer das möglich ist und es ist absolut unnötig überhaupt auf Tabellen für ein Layout zurückzugreifen. Um Bereiche einer Seite für ein Layout zu markieren sollte man auf <div> zurückgreifen, das man völlig beliebig, im übrigen auch Tabellarisch formatieren kann, ohne dass dabei die Semantische Auszeichnung der Seite verwurstet wird.

    Fehler, Ausdruck, Erklärung nötig
    Keine Korrekturen per Privatnachricht.

    • Offizieller Beitrag

    Hi,
    ich stimme tiorthan (fast) vollständig zu, hier aber noch einige Anmerkungen von mir:

    1. Bei einer Navigation handelt es sich i.d.R. um eine Liste, also sollte man sie auch entsprechend mit <ul> behandeln.

    2. Tabellen führen zu ganz tollen Problemen, wenn man die Seite mal in Programmen öffnet, die sich an Standards halten.

    3. Ich kenne allerdings einen einzigen Anwendungsfall, bei dem ich beim Layout noch nicht um eine Tabelle herumgekommen bin:
    Für den Fall, dass man eine Seite vertikal in drei hohe Spalten aufteilen will, deren Höhe sich variabel an die Spalte mit dem maximalen Inhalt anpasst, habe ich noch keine Möglichkeit gefunden, die in allen gängingen Browsern funktioniert :(
    In allen anderen Fällen würde ich aber in jeden Fall von Tabellen als Layout-Element abraten!

    LG nif7

    Menschen, die etwas wollen, finden Wege. Menschen, die etwas nicht wollen, finden Gründe.

  • 1. Stimmt, ich habe bei den div-Tags auch eher an die Container gedacht, die die Seite logisch in Bereich gliedern.
    3. display: table sollte das eigentlich können. Allerdings weiß ich nicht, wie gut die Browserunterstützung da funktioniert, ich habe es schon lange nicht mehr verwenden müssen.

    Fehler, Ausdruck, Erklärung nötig
    Keine Korrekturen per Privatnachricht.