XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Site- und Layoutcheck (http://xhtmlforum.de/forumdisplay.php?f=77)
-   -   Layoutcheck + Including (http://xhtmlforum.de/showthread.php?t=53758)

crimi 23.09.2008 20:26

Layoutcheck + Including
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hey, würde euch bitten mal mein Layout zu begutachten und einfach den Seitenaufbau generell mal anzuschauen.

Gebe euch hier mal den Code für meine News-Seite, also die .html und die .css Datei.

Mich würde einfach mal interessieren, was ich aus professioneller Sicht bisher falsch gemacht habe. ASCII Problematiken und die Formatierung im News Text sind klar, geht mehr um den Aufbau und das Design.

Bin dankbar für jede Kritik!

news.html
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

        <head>
                <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
                <title>TV Dudenhofen Handball</title>
                <link rel="stylesheet" type="text/css" href="./css/page.css">
                <script type="text/javascript" language="JavaScript1.2">
                        function versteckt(objektID)
                        {
                               
                                ghost = "ghost" + objektID;
                                StatusText = "StatusText" + objektID;
                                if(document.getElementById(ghost).style.display=='none') {
                                        document.getElementById(ghost).style.display = 'block';
                                        window.document.getElementById(StatusText).innerHTML = 'schliessen';
                                        /*window.document.images['Icon'].src = 'minus.png';*/         
                                }
                                else {
                                        document.getElementById(ghost).style.display = 'none';
                                        window.document.getElementById(StatusText).innerHTML = 'oeffnen';
                                        /*window.document.images['Icon'].src = 'plus.png';*/
                                }
                        }
                </script>
        </head>


       

       

       
        <body>
                <div id="Page">
                <div id="Top">
                        <div id="TopBreadcrumbs">Home > Mannschaften > Herren I</div>
                        <div id="TopShortinfo">Montag, 08.09.2008, 22:03</div>
                </div>       
                <div id="Banner"></div>
                <div id="Menu">           
                        <ul>
                <li><a href="...">Home</a></li>
                <li><a href="...">News</a></li>
                                <li><a href="...">Forum</a></li>
                <li><a href="...">Mannschaften</a></li>
                                <li><a href="...">Statistiken</a></li>
                <li><a href="...">Downloads</a></li>
                                <li><a href="...">Sponsoren</a></li>
            </ul>
                </div>
                <div id="Caption">
                        Willkommen bei der Handballabteilung des TV Dudenhofen
                </div>
                <div id="Main">
                        <div id="MainLeft">
                                <div id="ContentNews">
                                        <table id="TabelleMain" width="100%">
                                                <caption>
                                                        Newstitel
                                                </caption>
                                                        <tr>
                                                                <td>
                                                                        Hier steht dann der eigentlich Newstext, der ganz lang ist und unter Umstaenden auch über den entsprechenden Platzbedarf hinausgeht.
                                                                        Dennoch koennte man hier Formatierungen, Links und den ganzen Krams einbetten.
                                                                        <b>Fetter Test</b>
                                                                        <u>Unterstrichener Test</u>
                                                                        <a href="#">Link Test</a>
                                                                        Und dann ist der Newsshorttext auch schon vorbei
                                                                </td>
                                                        </tr>
                                                        <tr>
                                                                <td>
                                                                    <div style="display : none" id="ghost01">
                                                                            Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat. Dabei sollte sich weder die Seite verschieben noch die vertikale Ausrichtung.
                                                                                Im Optimalfall funktionieren hier auch weiterhin alle Stilarten:
                                                                                <b>Fetter Test</b>
                                                                                <u>Unterstrichener Test</u>
                                                                                <a href="#">Link Test</a>       
                                                                                Optimalfall eingetreten :D       
                                                                    </div>
                                                                        <a href="#" onclick="versteckt('01'); return false;" id="StatusText01">oeffnen</a>
                                                                </td>
                                                        </tr>                                       
                                        </table>
                                        <table id="TabelleMain" width="100%">
                                                <caption>
                                                        Newstitel
                                                </caption>
                                                        <tr>
                                                                <td>
                                                                        Hier steht dann der eigentlich Newstext, der ganz lang ist und unter Umstaenden auch über den entsprechenden Platzbedarf hinausgeht.
                                                                        Dennoch koennte man hier Formatierungen, Links und den ganzen Krams einbetten.
                                                                        <b>Fetter Test</b>
                                                                        <u>Unterstrichener Test</u>
                                                                        <a href="#">Link Test</a>
                                                                        Und dann ist der Newsshorttext auch schon vorbei
                                                                </td>
                                                        </tr>
                                                        <tr>
                                                                <td>
                                                                    <div style="display : none" id="ghost02">
                                                                            Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat. Dabei sollte sich weder die Seite verschieben noch die vertikale Ausrichtung.
                                                                                Im Optimalfall funktionieren hier auch weiterhin alle Stilarten:
                                                                                <b>Fetter Test</b>
                                                                                <u>Unterstrichener Test</u>
                                                                                <a href="#">Link Test</a>       
                                                                                Optimalfall eingetreten :D                                                               
                                                                    </div>
                                                                        <a href="#" onclick="versteckt('02'); return false;" id="StatusText02">oeffnen</a>
                                                                </td>
                                                        </tr>                                       
                                        </table>
                                        <table id="TabelleMain" width="100%">
                                                <caption>
                                                        Newstitel
                                                </caption>
                                                        <tr>
                                                                <td>
                                                                        Hier steht dann der eigentlich Newstext, der ganz lang ist und unter Umstaenden auch über den entsprechenden Platzbedarf hinausgeht.
                                                                        Dennoch koennte man hier Formatierungen, Links und den ganzen Krams einbetten.
                                                                        <b>Fetter Test</b>
                                                                        <u>Unterstrichener Test</u>
                                                                        <a href="#">Link Test</a>
                                                                        Und dann ist der Newsshorttext auch schon vorbei
                                                                </td>
                                                        </tr>
                                                        <tr>
                                                                <td>
                                                                    <div style="display : none" id="ghost03">
                                                                            Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat. Dabei sollte sich weder die Seite verschieben noch die vertikale Ausrichtung.
                                                                                Im Optimalfall funktionieren hier auch weiterhin alle Stilarten:
                                                                                <b>Fetter Test</b>
                                                                                <u>Unterstrichener Test</u>
                                                                                <a href="#">Link Test</a>       
                                                                                Optimalfall eingetreten :D       
                                                                    </div>
                                                                        <a href="#" onclick="versteckt('03'); return false;" id="StatusText03">oeffnen</a>
                                                                </td>
                                                        </tr>                                               
                                        </table>
                                        <table id="TabelleMain" width="100%">
                                                <caption>
                                                        Newstitel
                                                </caption>
                                                        <tr>
                                                                <td>
                                                                        Hier steht dann der eigentlich Newstext, der ganz lang ist und unter Umstaenden auch über den entsprechenden Platzbedarf hinausgeht.
                                                                        Dennoch koennte man hier Formatierungen, Links und den ganzen Krams einbetten.
                                                                        <b>Fetter Test</b>
                                                                        <u>Unterstrichener Test</u>
                                                                        <a href="#">Link Test</a>
                                                                        Und dann ist der Newsshorttext auch schon vorbei
                                                                </td>
                                                        </tr>
                                                        <tr>
                                                                <td>
                                                                    <div style="display : none" id="ghost04">
                                                                            Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat. Dabei sollte sich weder die Seite verschieben noch die vertikale Ausrichtung.
                                                                                Im Optimalfall funktionieren hier auch weiterhin alle Stilarten:
                                                                                <b>Fetter Test</b>
                                                                                <u>Unterstrichener Test</u>
                                                                                <a href="#">Link Test</a>       
                                                                                Optimalfall eingetreten :D       
                                                                    </div>
                                                                        <a href="#" onclick="versteckt('04'); return false;" id="StatusText04">oeffnen</a>
                                                                </td>
                                                        </tr>                                       
                                        </table>
                                        <table id="TabelleMain" width="100%">
                                                <caption>
                                                        Newstitel
                                                </caption>
                                                        <tr>
                                                                <td>
                                                                        Hier steht dann der eigentlich Newstext, der ganz lang ist und unter Umstaenden auch über den entsprechenden Platzbedarf hinausgeht.
                                                                        Dennoch koennte man hier Formatierungen, Links und den ganzen Krams einbetten.
                                                                        <b>Fetter Test</b>
                                                                        <u>Unterstrichener Test</u>
                                                                        <a href="#">Link Test</a>
                                                                        Und dann ist der Newsshorttext auch schon vorbei
                                                                </td>
                                                        </tr>
                                                        <tr>
                                                                <td>
                                                                    <div style="display : none" id="ghost05">
                                                                            Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat. Dabei sollte sich weder die Seite verschieben noch die vertikale Ausrichtung.
                                                                                Im Optimalfall funktionieren hier auch weiterhin alle Stilarten:
                                                                                <b>Fetter Test</b>
                                                                                <u>Unterstrichener Test</u>
                                                                                <a href="#">Link Test</a>       
                                                                                Optimalfall eingetreten :D       
                                                                    </div>
                                                                        <a href="#" onclick="versteckt('05'); return false;" id="StatusText05">oeffnen</a>
                                                                </td>
                                                        </tr>                                       
                                        </table>
                                        <table id="TabelleMain" width="100%">
                                                <caption>
                                                        Newstitel
                                                </caption>
                                                        <tr>
                                                                <td>
                                                                        Hier steht dann der eigentlich Newstext, der ganz lang ist und unter Umstaenden auch über den entsprechenden Platzbedarf hinausgeht.
                                                                        Dennoch koennte man hier Formatierungen, Links und den ganzen Krams einbetten.
                                                                        <b>Fetter Test</b>
                                                                        <u>Unterstrichener Test</u>
                                                                        <a href="#">Link Test</a>
                                                                        Und dann ist der Newsshorttext auch schon vorbei
                                                                </td>
                                                        </tr>
                                                        <tr>
                                                                <td>
                                                                    <div style="display : none" id="ghost06">
                                                                            Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat. Dabei sollte sich weder die Seite verschieben noch die vertikale Ausrichtung.
                                                                                Im Optimalfall funktionieren hier auch weiterhin alle Stilarten:
                                                                                <b>Fetter Test</b>
                                                                                <u>Unterstrichener Test</u>
                                                                                <a href="#">Link Test</a>       
                                                                                Optimalfall eingetreten :D       
                                                                    </div>
                                                                        <a href="#" onclick="versteckt('06'); return false;" id="StatusText06">oeffnen</a>
                                                                </td>
                                                        </tr>                                       
                                        </table>
                                        <table id="TabelleMain" width="100%">
                                                <caption>
                                                        Newstitel
                                                </caption>
                                                        <tr>
                                                                <td>
                                                                        Hier steht dann der eigentlich Newstext, der ganz lang ist und unter Umstaenden auch über den entsprechenden Platzbedarf hinausgeht.
                                                                        Dennoch koennte man hier Formatierungen, Links und den ganzen Krams einbetten.
                                                                        <b>Fetter Test</b>
                                                                        <u>Unterstrichener Test</u>
                                                                        <a href="#">Link Test</a>
                                                                        Und dann ist der Newsshorttext auch schon vorbei
                                                                </td>
                                                        </tr>
                                                        <tr>
                                                                <td>
                                                                    <div style="display : none" id="ghost07">
                                                                            Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat. Dabei sollte sich weder die Seite verschieben noch die vertikale Ausrichtung.
                                                                                Im Optimalfall funktionieren hier auch weiterhin alle Stilarten:
                                                                                <b>Fetter Test</b>
                                                                                <u>Unterstrichener Test</u>
                                                                                <a href="#">Link Test</a>       
                                                                                Optimalfall eingetreten :D       
                                                                    </div>
                                                                        <a href="#" onclick="versteckt('07'); return false;" id="StatusText07">oeffnen</a>
                                                                </td>
                                                        </tr>                                       
                                        </table>                                                                               
                                </div>
                        </div>
                        <div id="MainRight">
                                <table id="TabelleMainRight" width="100%">
                                        <caption>
                                                Spieltermine
                                        </caption>
                                                <tr>
                                                        <td>12.09.</td>
                                                        <td>18:00</td>
                                                        <td>H1</td>
                                                        <td>TVD - Mannheim</td>
                                                </tr>
                                                <tr>
                                                        <td>12.09.</td>
                                                        <td>14:45</td>
                                                        <td>D1</td>
                                                        <td>Speyer - TVD</td>
                                                </tr>
                                                <tr>
                                                        <td>13.09.</td>
                                                        <td>19:00</td>
                                                        <td>H1</td>
                                                        <td>Hocken - TVD</td>
                                                </tr>
                                                <tr>
                                                        <td>28.09.</td>
                                                        <td>24:00</td>
                                                        <td>D2</td>
                                                        <td>TVD - Bellheim</td>
                                                </tr>
                                                <tr>
                                                        <td>29.09.</td>
                                                        <td>18:00</td>
                                                        <td>H1</td>
                                                        <td>Hocken - TVD</td>
                                                </tr>
                                                <tr>
                                                        <td>30.09.</td>
                                                        <td>13:00</td>
                                                        <td>D2</td>
                                                        <td>TVD - Bellheim</td>
                                                </tr>
                                </table>
                                <table id="TabelleMainRight" width="100%">
                                        <caption>
                                                Ergebnisse
                                        </caption>
                                                <tr>
                                                        <td>12.09.</td>
                                                        <td>H1</td>
                                                        <td>TVD - München</td>
                                                        <td>26:12</td>
                                                </tr>
                                                <tr>
                                                        <td>12.09.</td>
                                                        <td>D1</td>
                                                        <td>Berlin - TVD</td>
                                                        <td>20:20</td>
                                                </tr>
                                                <tr>
                                                        <td>13.09.</td>
                                                        <td>H2</td>
                                                        <td>Hamburg - TVD</td>
                                                        <td>29:18</td>
                                                </tr>
                                                <tr>
                                                        <td>28.09.</td>
                                                        <td>H1</td>
                                                        <td>TVD - Barcelona</td>
                                                        <td>35:39</td>
                                                </tr>
                                                <tr>
                                                        <td>29.09.</td>
                                                        <td>H2</td>
                                                        <td>Hochdorf - TVD</td>
                                                        <td>39:12</td>
                                                </tr>
                                                <tr>
                                                        <td>30.09.</td>
                                                        <td>H1</td>
                                                        <td>TVD - Hassloch</td>
                                                        <td>30:30</td>
                                                </tr>
                                </table>
                                <table id="TabelleMainRight" width="100%">
                                        <caption>
                                                Headlines
                                        </caption>
                                                <tr>
                                                        <td>Auswaertsfahrt am 29.09.  ...</td>
                                                </tr>
                                                <tr>
                                                        <td>Neuer Sponsor Hummel ...</td>
                                                </tr>
                                                <tr>
                                                        <td>Spieler Hans verletzt ...</td>
                                                </tr>
                                                <tr>
                                                        <td>Wechsel von Joerg zu TVD ...</td>
                                                </tr>
                                                <tr>
                                                        <td>Aufstiegsfeier am 28.09. ...</td>
                                                </tr>
                                                <tr>
                                                        <td>Jugendfest des TVD Handball ...</td>
                                                </tr>
                                </table>
                        </div>
                </div>
                <div id="Bottom">
                        C2008 TV-Dudenhofen e.V. | <a href="...">Impressum</a> | <a href="...">Datenschutz</a> | 0.452sec
                </div>
                </div>
               
        </body>
</html>

page.css
Code:

/* CSS Formatierung für alle Pages */

* { /*wird auf alle Elemente angewendet*/
    padding: 0;
    margin: 0;
}

body { /*Bereich außerhalb der eigentlichen Seite*/
    /*Hintergrund festlegen*/
        background-image: url("../img/background.jpg");
        background-repeat:repeat-x;
        background-color: #D7D7D7; /*letztes grau aus dem Hintergrund als Uebergang*/
}

div#Page {
        margin: 0 auto; /*zentrieren der Page*/
        width: 950px;
        /*Schriftart, Farbe, Typ festlegen*/
        color: #000000; /*schwarz*/
        font-family: Verdana;
        font-size: 14px;
        padding-bottom: 10px; /*Abstand zum Browserende*/
}

div#Top {
        background-color: #000000; /*schwarz*/
        float: left;
        clear: left;
        width: 930px; /*950px - 2*10px*/
        margin: 5px 0 5px 0; /*Abstand oberer Rand und unten zum Banner*/
        padding: 0 10px 0 10px; /*innerer Abstand seitlich zum Rand*/
        line-height: 25px; /*feste Höhe und Text vertikal zentrieren*/
        font-size: 11px;
        color: #FFFFFF; /*weiß*/
}
        div#TopBreadcrumbs {
                float: left;
                clear: left;
                width: 700px;
        }
        div#TopShortinfo {
                float: right;
                clear: right;
                width: 200px;
                text-align: right;
        }

div#Banner {
        background-image: url("../img/banner.jpg");
        float: left;
        clear: left;
        width: 100%; /*950px*/
        height: 150px;
}           

div#Menu {
    background-image: url("../img/menubuttons.jpg");
        background-repeat:repeat-x;
        float: left;
        clear: left;
        width: 100%; /*950px*/
        line-height: 30px; /*feste Höhe und Text vertikal zentrieren*/
        border-bottom: 3px solid #990000; /*dunkelrote unterer Rand*/
        font-weight: bolder;
        font-size: 13px;
        color: #F0FFFF; /*schwächeres weiß*/
}
        div#Menu ul {
            list-style-type: none;
        }
        div#Menu ul li {
                float: left;
                border-right: 1px solid #A9A9A9; /*silberer rechter Rand der Buttons*/
        }
        div#Menu ul li a {
                padding: 0 10px 0 10px; /*innerer Abstand links/rechts*/
            display: block;
            text-decoration: none;
                color: #F0FFFF; /*schwächeres weiß, nochmal angeben um Link-Default zu ueberschreiben*/
        }
        div#Menu ul li a:hover {
            background-color: #696969; /*hellgrauer Mouse-Over Hintergrund*/
        }
       
div#Caption {
        background-color: #640000; /*dunkles rot*/
        float: left;
        clear: left;
        width: 939px; /*950px - 8px - 3px*/
        margin: 5px 0 0 0; /*oberer Abstand zum Menu*/
        padding: 3px 0 6px 8px; /*innerer Abstand, text visuell zentrieren*/
        /*Schrift*/
        font-weight: bold;
        font-size: 12px;
        color: #FFFFFF; /*weiß*/
        /*Rahmen*/
        border-style: solid none none solid; /*Rahmen links und oben*/
        border-width: 3px;
        border-color: #990000; /*gleiches rot wie unten im menu*/
}
       
div#Main {
        background-color: #FFFFFF; /*weißer Hintergrund für den ganzen Main-Bereich (Banner bis Footer)*/
        float: left;
        clear: left;
        width: 100%; /*950px - links 680 rechts 270*/
        padding: 0 0 10px 0; /*unten im Main Bereich immer weißer Abstand Richtung footer*/
        /*Rahmen unter der Seite, über dem Footer*/
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #696969; /*dunkelgrau*/
}
        div#MainLeft {
                float: left;
                clear: left;
                width: 640px; /*680px - 20px - 20px*/
                margin: 20px 20px 0 20px; /*Abstand oben/rechts/links um Content Bereich rauszuheben*/
        }
        div#MainRight {
                background-color: #C0C0C0; /*mitteldunkles grau*/
                float: right;
                clear: right;
                width: 229px; /*270px - 20 - 20 - 1*/
                padding: 20px; /*innerer Abstand überall 10px*/
                /*linker/unterer Rahmen zum Abheben des rechten Infoparts*/
                border-style: none none solid solid;
                border-color: #696969; /*dunkelgrau*/
                border-width: 1px;

        }       
               
div#Bottom {
        float: left;
        clear: left;
        width: 930px; /*950px - 10 - 10*/
        margin: 10px 0 10px 0; /*Abstand zu Main und zum Browserende*/
        padding: 0 10px 0 10px;
        text-align: center;
        font-size: 12px;
        line-height: 20px; /*feste Höhe und Text vertikal zentrieren*/
}
        div#Bottom a {
                color: #000000; /*schwarz*/
                text-decoration: none;
                font-weight: bold;
        }
       


 /*Standard Tabellen Design; Breite und Ausrichtung in HTML*/
        table#TabelleMain {
                background-color: #EBEBEB; /*zartes hellgrau*/
                margin: 0 0 10px 0; /*unter der Tabelle kleiner Abstand*/
                /*Rahmen rechts,links,unten; oben ist die Caption*/
                border-style: none solid solid solid;
                border-width: 0px;
                border-color: #808080; /*dunkelgrau*/
                /*Schriftsettings*/
                font-size: 12px;
        }
                table#TabelleMain td {
                        padding: 0 2px 0 2px; /*innerer Zellabstand*/
                }
                table#TabelleMain caption{
                        background-color: #DCDCDC; /*hellgrau*/
                        /*Schriftsetup*/
                        color: #000000; /*schwarz*/
                        font-weight: bold;
                        text-align: left;
                        /*Rahmen und Abstand*/
                        padding: 2px;
                        border-style: solid none none solid; /*oben und links Rahmen absetzen*/
                        border-width: 0px;
                        border-color: #808080; /*dunkelgrau*/
                        border-bottom-style: dotted;
                        border-bottom-width: 1px;
                        border-bottom-color: #808080; /*dunkelgrau*/
                }

 /*MainRight Infobox Tabellen Design; Breite und Ausrichtung in HTML*/
        table#TabelleMainRight {
                background-color: #DCDCDC; /*hellgrau*/
                margin: 0 0 10px 0; /*unter der Tabelle kleiner Abstand*/
                /*Rahmen rechts,links,unten; oben ist die Caption*/
                border-style: none solid solid solid;
                border-width: 1px;
                border-color: #808080; /*dunkelgrau*/
                /*Schriftsettings*/
                font-size: 12px;
        }
                table#TabelleMainRight td {
                        padding: 0 2px 0 2px; /*innerer Zellabstand*/
                }
                table#TabelleMainRight caption{
                        background-color: #8C0000; /*mitteldunkles rot*/
                        /*Schriftsetup*/
                        color: #FFFFFF; /*weiss*/
                        font-weight: bold;
                        text-align: left;
                        /*Rahmen und Abstand*/
                        padding: 2px;
                        border-style: solid none none solid; /*oben und links Rahmen absetzen*/
                        border-width: 3px;
                        border-color: #BE0000; /*helleres rot*/
                }
               
               
               
/*Teamvorstellung.html spezielle Formatierung*/
        div#ContentTeamvorstellungTopLeft {       
                float: left;
                clear: left;
                width: 310px;
        }
        div#ContentTeamvorstellungTopRight {
                float: right;
                clear: right;
                width: 310px;
        }
        div#ContentTeamvorstellungMain {
                float: left;
                clear: left;
                width: 100%; /*640px*/
        }


/*Home.html spezielle Formatierung*/
        div#ContentIndexTopRight {       
                float: right;
                clear: right;
                width: 340px;
        }
                div#ContentIndexTopRightPic {       
                        float: left;
                        clear: left;
                        width: 100%;
                        text-align: center;
                }
                div#ContentIndexTopRightLinks {       
                        float: left;
                        clear: left;
                        width: 280px; /*340px - 60*/
                        font-size: 14px;
                        padding: 30px 0 0 60px;
                }
                        div#ContentIndexTopRightLinks ul {
                                list-style-type: disc;
                                margin: 20px 0 0 25px;
                        }               
                        div#ContentIndexTopRightLinks ul li a {
                                text-decoration: none;
                                color: #000000; /*schwarz*/
                        }       
               
        div#ContentIndexEvent {
                float: left;
                clear: left;
                width: 300px;
        }
        div#ContentIndexNews {
                float: left;
                clear: left;
                width: 100%; /*640px*/
        }
       
       
/*Teams.html spezielle Formatierung*/
        div#ContentTeams {       
                float: left;
                clear: left;
                width: 640px;
        }
                div#ContentTeams table td {
                        padding: 0 20px 10px 0; /*Zellabstand unten 10 rechts 20px*/
                        vertical-align: middle;
                }               
                div#ContentTeams a {       
                        text-decoration: none;
                        font-weight: bold;
                        color: #000000; /*schwarz*/
                       
                }
               
               
               
/*news.html spezielle Formatierung*/
        div#ContentNews {       
                float: left;
                clear: left;
                width: 640px;
        }

Im Anhang hab ich noch nen Screen davon, musste leider paar Sachen schwärzen.

izak.stern 23.09.2008 21:57

wie wärs wenn du einfach den link zu der seite posten wuerdest, ohne meinen firebug ist es mir nämlich mittlerweile zu mühsam mich durch codezeilen zu wuseln. ;)

crimi 23.09.2008 22:12

TV Dudenhofen Handball

naja mir gehts aber gerade auch um den code.
bestimmt habe ich da ungeschickt programmiert, irgendwelche defizite oder sogar dinge die einem webstandard widersprechen.

wäre halt schön wenn da mal einer so grundlegend draufschaut

crimi 24.09.2008 22:20

keiner ne meinung? :\

LineMan 25.09.2008 10:46

Du hast keinerlei Semantik in Deinem Dokument, es gibt nicht eine Überschrift (h-tag), Du benutzt massig Layouttabellen (!), die Seite ist nicht valide (ständig wiederholende id´s - ok ist ein Template) ;)

crimi 25.09.2008 16:48

ist es nicht egal ob ich die überschrift in einem div formatiere oder als <h> tag definiere und dann das überschrift-element formatiere? was ist hier wieso bevorzugt?

was wäre denn die alternative zu massig layout-tabellen? wenn ich rechts zum bsp 3 infoboxen darstellen will, muss ich doch auch 3 tabellen oder ich sags mal allgemein "konstrukte" erstellen. die sind ja dann über CSS alle gleich formatiert. wie könnte man das besser lösen?

ständig wiederholende IDs, naja aber dafür sind doch CSS formatierungen da oder? dass man eben elemente die häufig auftauchen nur einmal formatieren muss und diese dann immer wieder aufruft?

izak.stern 25.09.2008 16:55

Semantisches Web - Webmasterpro.de

Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design

crimi 26.09.2008 17:47

okay das erklärt warum man überschrift elemente auch als solche nutzen sollte etc

aber der zweite teil ist mir noch etwas schleierhaft

Zitat:

was wäre denn die alternative zu massig layout-tabellen? wenn ich rechts zum bsp 3 infoboxen darstellen will, muss ich doch auch 3 tabellen oder ich sags mal allgemein "konstrukte" erstellen. die sind ja dann über CSS alle gleich formatiert. wie könnte man das besser lösen?

ständig wiederholende IDs, naja aber dafür sind doch CSS formatierungen da oder? dass man eben elemente die häufig auftauchen nur einmal formatieren muss und diese dann immer wieder aufruft?

Praktikant 27.09.2008 21:08

1. Eine Tabelle benutzt man schon lange nicht mehr zu Layout aufbauen.... Dazu nutzt man div's (kann dich leider nur auf die Suchseite von selfhtml.org leiten, ber da kannste ja mal nach div's suchen ;)

2. Eine ID darf nach Deklaration nur einmal pro Seite vorkommen! Eine ID kann Beispielsweise als Ankerpunkt oder für JavaScript gebraucht werden und das funktioniert nicht mehr, wenn man IDs mehrfach auf Seiten angibt.
Nutze stattdessen Classes wenn es ersichtilich ist, dass ein Element mehrfach auf einer Seite vorkommen könnte

Google einfach mal danach ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019