|
|||
Layoutcheck + Including
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> 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; } |
Sponsored Links |
|
||||
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.
__________________
http://emenda.net |
Sponsored Links |
|
|||
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 |
|
|||
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? |
|
||||
Semantisches Web - Webmasterpro.de
Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design
__________________
http://emenda.net |
|
|||
okay das erklärt warum man überschrift elemente auch als solche nutzen sollte etc
aber der zweite teil ist mir noch etwas schleierhaft Zitat:
|
|
||||
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
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layoutcheck | claude | Site- und Layoutcheck | 13 | 29.05.2011 18:24 |
site- und layoutcheck | alejandro | Site- und Layoutcheck | 10 | 06.02.2008 19:18 |
Code- und Layoutcheck für erste XHTML/CSS Seite erbeten | bitalias | Site- und Layoutcheck | 11 | 10.05.2006 14:35 |
Script - und Layoutcheck | claude | Site- und Layoutcheck | 19 | 05.12.2005 23:28 |
Site -und Layoutcheck | claude | Site- und Layoutcheck | 7 | 05.07.2005 23:47 |