Fragen zu CSS und PHP: Aufbau einer Seite

S

Serow

0
Hi,
ich habe eine HTML Seite, die über eine Tabelle 3 Bereiche baut: header, menu und inhalt. Ich hätte aber gerne den Inhalt etwas besser vom Design getrennt mittels CSS. Hier die Seite:
Code: 
<HTML>
<HEAD></HEAD>
<style>
h1 {
  font-size: 2em;
  text-align: center;
}

ul#menu {
  font-size: 0.8em;
  float: center;
  margin: 0; padding: 0;
  border: 0px dashed black;
}
ul#menu li {
  list-style: none;
  margin: 0; padding: 0.2em;
}
ul#menu a {
  display: block;
  padding: 0.2em;
  font-weight: bold;
}
ul#menu a:link {
  color: black; background-color: #5d87b0;
}
ul#menu a:visited {
  color: black; background-color: #5d87b0;
}
ul#menu a:hover {
  color: black; background-color: #72a0cb;
}


</style>
<BODY>
<TABLE WIDTH=800px HEIGHT=600px BORDER=1 CELLPADDING=0 CELLSPACING=0>
	<COL WIDTH=150*>
	<COL WIDTH=650*>
	<TR VALIGN=TOP>
		<TD ROWSPAN=2 WIDTH=150px HEIGHT=150px>
			<IMG SRC="./images/header.png" ALT="BILD HIER" WIDTH=150 HEIGHT=150>
		</TD>
		<TD WIDTH=650px HEIGHT=93px BGCOLOR=darkgray VALIGN=bottom>
			<h1>HEADER</h1>
		</TD>
	</TR>
	<TR>
		<TD WIDTH=650px HEIGHT=57px VALIGN=TOP BGCOLOR=#5d87b0>
			<P></P>
		</TD>
	</TR>
	<TR VALIGN=TOP>
		<TD WIDTH=150px BGCOLOR=#5d87b0>
			<ul id="menu">
				<li><a href="#"><p>MenuPunkt 1</p></a></li>
				<li><a href="#"><p>MenuPunkt 2</p></a></li>
				<li><a href="#"><p>MenuPunkt 3</p></a></li>
				<li><a href="#"><p>MenuPunkt 4</p></a></li>
				<li><a href="#"><p>MenuPunkt 5</p></a></li>
				<li><a href="#"><p>MenuPunkt 6</p></a></li>
			</ul>
		</TD>
		<TD WIDTH=640px BGCOLOR=lightgray>
			<P>Inhalt</P>
		</TD>
	</TR>
</TABLE>
<P><BR><BR>
</P>
</BODY>
</HTML>

Kann mir jemand sagen, was ich da verbessern kann? Ich würde später gerne inhalt-seiten mittels php-include einbinden. Klappt das überhaupt so wie ich das mache? Wie sehen die best practices aus?

mfg
serow
 
Im einfachsten Falle:

Code: 
<html>
<head>
...
<style type="text/css">
#header {
  height: 100px;
}

#menu {
  width: 20%;
  float: left;
}

#content {
  width: 80%;
  margin-left: 20%;
}
</style>
</head>
<body>
<div id="header">hier kommt der Header rein</div>
<div id="menu"><ul><li>hier kommt das Menue rein</li></ul></div>
<div id="content">Hier kommt der Inhalt rein</div>
</body>
</html>

Ungetestet, aber das sollte in Grundzügen dem entsprechen, was du willst.
 
Ich habs jetzt mal etwas abgeändert, damit es etwas mehr so aussieht wie ich es mir vorstelle:
Code: 
<html>
<head>
<style type="text/css">
#header {
  height: 150px;
  width: 800px;
}

#menu {
  width: 200;
  float: left;
}

#content {
  width: 600px;
  margin-left: 200;
}
</style>
</head>
<body>

<div id="header">
	<table border=1px width=100% height=150px cellspacing=0 cellpadding=0>
		<tr height=100px bgcolor=gray>
			<td>
				<p>hallo</p>
			</td>
		</tr>
		<tr height=50px bgcolor=lightgray>
			<td>
				<p></p>
			</td>		
		</tr>
	</table>
</div>

<div id="menu">
	<table border=1px width=100% height=600px cellspacing=0 cellpadding=0>
		<tr>
			<td valign=top>
				<ul>
					<li>Menu 1</li>
					<li>Menu 2</li>
					<li>Menu 3</li>
					<li>Menu 4</li>
					<li>Menu 5</li>
				</ul>
			</td>
		</tr>
	</table>
</div>

<div id="content">	
	<table border=1px width=100% height=600px cellspacing=0 cellpadding=0>
		<tr>
			<td valign=top>
				<p>Content</p>
			</td>
		</tr>
	</table>
</div>

</body>
</html>

Würden nicht die Tables eher zum Style gehören als zum Layout? Also irgendwas mach ich falsch. Und wie ist das, wenn man die Seiten dann mit PHP zusammenstöpseln will? Wie macht man das am Besten?
 
Örm... die DIVs sind da, damit du keine Tabellen mehr brauchst. Tabellen haben weder beim Style, noch beim Layout was verloren, sondern ausschließlich semantisch bei der Darstellung tabellarischer Daten. Was immer du vom Aussehen her mit Tabellen erreichen kannst, das geht auch mit einem Containerlayout und CSS.

Oh, und never ever die Maßeinheiten im CSS vergessen. Die Breitenangabe für #menu ist sonst reichlich sinnfrei.
 
Zuerstmal würde ich die ganzen Style-Sachen (also den CSS-Kram) in eine extra Datei packen, dann für die Inhalte Platzhalter setzen und den Spass via PHP parsen, was dann die Inhalte (z.B. aus einer Datenbank) anstelle der Platzhalter einsetzt. Damit hast du dann wirklich eine Trennung von Inhalt, Layout und Design. Alles andere wäre in meinen Augen sinnlos.
 
ok danke für die tipps.
Auf das mit dem parsen bin ich nicht bekommen. Sonst hätte ich praktisch Layout ins PHP Skript schreiben müssen, das wäre blöd gewesen.

Ok das mit den Tabellen stimmt schon :D So macht das ganze div-Zeug keinen Sinn mehr ;)


Hab mal die Tabels rausgenommen und es über die css eigentschaften gemacht:

Code: 
<html>
<head>
<style type="text/css">

#topBar {
  margin-left: 150px;
  height: 97px;
  width: 650px; 
  background-color:darkgray;
}

#bottomBar {
  margin-left: 150px;
  height: 53px;
  width: 650px; 
  background-color:gray;
}

#imageBox {
  float: left;
  width: 150px;
  height:150px;
  background-color:lightgray;
  background-image:url(./images/header.png);
}

#menu {
  width: 150px;
  float: left;
  background-color: gray;
}

#content {
  width: 650px;
  height: *;
  margin-left: 150px;
  background-color: lightgray;
}
</style>


</head>
<body>

<div id="imageBox">
</div>
<div id="topBar">
	TOP
</div>
<div id="bottomBar">
	BOTTOM
</div>

<div id="menu">
	<ul>
		<li>Menu 1</li>
		<li>Menu 2</li>
		<li>Menu 3</li>
		<li>Menu 4</li>
		<li>Menu 5</li>
	</ul>
</div>

<div id="content">	
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
</div>

</body>
</html>

Kann mir jemand sagen, wie ich es schafft, dass die Menu-Div-Box so groß ist wie die Content-Div-Box falls die Content-Div-Box größer ist als die Menu-Box mindestensbraucht, und umgekehrt? (lol der Zatz liest sich geil!)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben