Hausmittelchen gegen DIV-Suppe und fehlende Semantik im Markup

Dieses Thema im Forum "Web Page Design" wurde erstellt von RETRAX, 12.02.2004.

  1. RETRAX

    RETRAX Thread Starter Gast

    tjo...

    Patient: defekter Link entfernt
    Diagnose: DIV-Suppe und fehlende Semantik im Markup

    :rolleyes: :rolleyes: :rolleyes:

    Ist aber alles W3C HTML 4.01 valide...

    und irgendwie ist mir das zu hoch...(ich wurde von einem von de.comm.internet.pages.misc) darauf aufmerksam gemacht...

    *help*

    Gruss

    RETRAX

    defekter Link entfernt
     
  2. Brandhoff

    Brandhoff MacUser Mitglied

    Beiträge:
    401
    Zustimmungen:
    0
    MacUser seit:
    07.02.2004
    Hi,

    du baust eine Tabelle, um Inhalte zu positionieren und benutzt in den Zellen DIV-Blöcke für die Ausrichtung der Inhalte, obwohl die Tabellenzellen oder die DIVs dies jeweils alleine könnten.

    Mach dir eine Liste, wofür die ganzen DIVs genutzt werden und stecke die am häufigsten vorkommenden Anweisungen in CSS-Klassen für die Tabellenzellen.

    Aus ...

    PHP:
    <td valign="top" bgcolor="#dbe6ef" width="100">
    <
    div align="right">
    <
    div class="abstand-rechts">
    <
    br>
    <
    b>LifeStyle</b>
    <
    br>...
    könnte dann das werden:

    PHP:
    <td class="naviRechts">
    <
    br>
    <
    b>LifeStyle</b>
    <
    br>...
    ... mit diesem Schnipsel im Stylesheet:

    PHP:
    td {vertical-aligntop;}
    td.naviRechts {background:#dbe6ef; width:100px; text-align:right; padding-right:4px;}
    Der nächste Schritt wären dann, deinen Texten mit Paragraph- und Headline-Tags ihr Aussehen und Abstände beizubringen.

    cheer, me

    PS: die (code)-Tags des Forums haben die Schnipsel oben einfach gefressen?!
    Habe deshalb die (php)-Tags mißbraucht; Text wird jetzt angezeigt, die Syntaxfärbung passt natürlich nicht ganz ...
     
    Zuletzt bearbeitet: 13.02.2004
  3. Faser

    Faser MacUser Mitglied

    Beiträge:
    1.012
    Zustimmungen:
    0
    MacUser seit:
    20.08.2003
    Der eigentliche Sinn von CSS und DIV-Tags ist ja die Auslagerung des Designs.
    Und dabei geht es nicht darum, für Abstände eigene CSS-Klassen zu erstellen.

    Deine Seite könnte man in 4 CSS-Klassen unterbringen, und zwar
    PHP:
    #header {}
    #navigation {}
    #sidebar {}
    #main {}
    In der CSS-Datei müsstest du dann deren Positionen bestimmen, also für die Navigation zum Beispiel:
    PHP:
    #navigation {
      
    positionabsolute;
      
    width100px;
      
    margin-right3px;
      
    background-colorgrey;
    }
    Ähnliches müsstest du dann mit den anderen 3 Klassen machen.

    Danach sähe die HTML-Datei so aus:
    PHP:
    <div id="header">
    [
    BILD LINKS]
    Home Stand08.02.2004 Fotoalbum 2004
    [BILD RECHTS]
    </
    div>

    <
    div id="navigation">
    Über Mich
    Steckbrief
    Lebenslauf
    ...
    </
    div>

    <
    div id="sidebar">
    Links
    ....
    </
    div>

    <
    div id="main">
    [
    Retrax-Logo]
    </
    div>
    ;-)
     
  4. RETRAX

    RETRAX Thread Starter Gast

    &nbsp;

    Danke für die Tips an Euch beide! So langsam check ich das...

    Wie muss ich den CSS Eintrag für den Header machen?

    Wie bestimme ich da die Position der Bilder usw...?

    Gruss

    RETRAX

    defekter Link entfernt
     
  5. RETRAX

    RETRAX Thread Starter Gast

    &nbsp;


    Hi!

    ich habs jetzt folgendermassen:

    in der html datei hab ich vier <td class="">

    <td class="NaviOben">
    <td class="NaviLinks">
    <td class="NaviMitte">
    <td class="NaviRechts">

    in der CSS hab ich folgendes stehen:

    td {
    vertical-align: top;
    }
    td.NaviLinks {
    background: #dbe6ef;
    width: 100px;
    text-align: left;
    padding-left: 5px;
    }
    td.NaviMitte {
    vertical-allign: middle
    }
    td.NaviRechts {
    background: #dbe6ef;
    width: 100px;
    text-align: right;
    padding-right: 5px;
    }

    Das td.NaviOben blick ich noch überhaupt nicht, weil ich nicht weiss wie ich die zwei Bilder rechts und links anspreche... Und im "NaviLinks" wird die Farbe nicht angezeigt, obwohl ich es in der CSS definiert hab?

    Und das "NaviMitte" schaut auch noch nicht korrekt aus...

    Wie muss denn das korrekt aussehen?

    Gruss

    RETRAX

    defekter Link entfernt
     
    Zuletzt von einem Moderator bearbeitet: 13.02.2004
  6. Faser

    Faser MacUser Mitglied

    Beiträge:
    1.012
    Zustimmungen:
    0
    MacUser seit:
    20.08.2003
    Hab' mir mal den Spaß erlaubt:
    - http://faser.dyndns.org/area51/retrax.htm

    Komplett ohne Tabellen ;-)
     
  7. RETRAX

    RETRAX Thread Starter Gast

    thx! das ist voll gut.

    das führ ich mir jetzt zu gemüte...hoffentlich steig ich durch...

    Danke & Gruss

    RETRAX

    defekter Link entfernt
     
  8. Faser

    Faser MacUser Mitglied

    Beiträge:
    1.012
    Zustimmungen:
    0
    MacUser seit:
    20.08.2003
    Hmm, mir fällt grad auf, dass es noch nicht ganz optimal ist.

    Wenn jetzt der Inhalt länger ist, sind die beiden Navigationsleisten immer noch gleichgroß, also "gehen nicht mit"...
     
  9. RETRAX

    RETRAX Thread Starter Gast

    &nbsp;

    und wie kann man das hinbekommen? Das "mit gehen" ist wohl ein typisches Tabellenfeature.


    Gruss

    RETRAX

    defekter Link entfernt
     
  10. RETRAX

    RETRAX Thread Starter Gast

    Hi nochmal,

    die DIV Suppe hab ich jetzt ausgelöffelt, und die neue index.html hochgeladen. Könnt Ihr euch das bitte nochmal anschauen ob das jetzt in Ordnung ist?

    Was fehlt jetzt noch zum "perfekten" Code? :)


    Gruss

    RETRAX

    defekter Link entfernt
     
Die Seite wird geladen...

Diese Seite empfehlen