[HaBo]

Serow · 19.12.06, 21:15

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

LX · 19.12.06, 22:22

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.

Anzeige

- Anzeige -

Serow · 19.12.06, 23:19

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?

LX · 19.12.06, 23:26

Ö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.

**bitmuncher** · 19.12.06, 23:51

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.

Serow · 19.12.06, 23:59

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

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!)

Anzeige

- Anzeige -

19.12.06, 23:26	#4 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	Ö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. __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett JS BB LX UP

19.12.06, 23:51	#5 (permalink)
bitmuncher Moderator Registriert seit: 30.09.06 Likes: 442	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. __________________ Mein Blog - Mein Job - Diaspora Der Ring uns zu knechten besteht aus 12 Sternen auf blauem Grund. Neue Beiträge im Habo via Twitter - Das HaBo auf FB - Das HaBo bei G+

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Der COmputer springt von einer Seite zur anderen.	Jon2	Die Problemzone	2	21.08.06 13:26
Keine zutrit zu einer Seite	Xalon	(In)security allgemein	3	12.09.05 13:44
Hilfe zur Erstellung einer Seite	DoppelKeks	(Web-) Design und webbasierte Sprachen	13	22.05.05 18:29
Aufbau und Sicherheitsmechanismen einer EC-Karte	Zongolo	Hardware Probleme	5	04.03.05 12:33
Aus einer Seite gekickt und gesperrt !!	Watanyar	Internet Allgemein	16	03.01.04 19:42

[HaBo]

Fragen zu CSS und PHP: Aufbau einer Seite