Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 23.09.2008, 21:26
crimi crimi ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard 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>
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.
Angehängte Grafiken
Dateityp: jpg page.jpg (99,4 KB, 40x aufgerufen)
Mit Zitat antworten
Sponsored Links