✔ Layout ohne Tabellen

R

rambo

Mitglied
Hallo,

ich versuche in moment von meiner Website die Tabellen im Layout zu entfernen.

Ich habe ein Beispiel angefertigt:

HTML: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			html, body {
				height: auto;
				}
			body {
				background-color: #000000;
				color: #FF0000;
				}
			div.mydiv {
				border: 1px #000000 solid;
				height: auto;
				background-color: #FFFFFF;
				}
		</style>
	</head>
	<body>
		<div class="mydiv">
			<div style="float: left;">
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
				<br />test
			</div>
			<div style="float: right;">
				r
			</div>
		</div>
	</body>
</html>

Die Block-Elemente mit "float" haben nun keine Auswirkungen in der Höhe auf das Mutterelement. Da aber mein Div die Hintergrundfarbe Weiß haben soll und der Body Schwarz bleiben soll kann ich das so nicht lassen...

Wie erreiche ich jetzt, dass die Block-Elemente Auswirkungen in der Höhe auf das Mutterelement haben?

Danke im Voraus...
 
Ok, Danke, ich habe es noch en bischen verändert, so wie ich es ungefähr einsetzten würde. Würde es auch so noch funktionieren?

HTML: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			div.wrapper {
				width: 500px;
				margin: 0px auto;
				}
			div.content {
				background: #F8F8FF;
				border: 1px solid #000;
				min-height: 200px;
				height: auto !important;
				height: 200px;
				display: inline-block;
				}
			div.left_column {
				float: left;
				width: 245px;
				}
			div.right_column {
				float: right;
				width: 245px;
				}
			div.content:after {
				content: ".";
				display: block;
				height: 0;
				font-size: 0;
				clear: both;
				visibility: hidden;
				}
			/* Hides from IE-mac \*/
			* html div.content {
				height: 1%;
				}
			div.content {
				display: block;
				}
			/* End hide from IE-mac */


			/* Wird spaeter nicht mehr gebraucht... */
			p {
				margin: 0px;
				padding: 0px 10px;
				}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<div class="left_column">
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
				</div>
				<div class="right_column">
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
				</div>
			</div>
		</div>
	</body>
</html>

Ist das "/* Hides from IE-mac \*/" und das "/* End hide from IE-mac */" dringend erforderlich oder kann ich es entfernen? Und ist diese Möglichkeit mit CSS und den Divs kompatibler, als mein altes Tabellen-Konstrukt?
 
Jo, so funktioniert es auch.

Die Kommentare mußt du so übernehmen, damit der IE unter Mac die darin enthaltenden Regeln nicht interpretiert.

Was soll denn deiner Meinung nach an diesem Konzept gegenüber einem Tabellenlayout nicht kompatibel sein?

mfg Maik
 
Ich weiß es nicht. Es gibt ja immer Probleme, die ein Browser macht...:-):-):-)

Ich habe es nochmal angepasst:
HTML: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			div.wrapper {
				width: 800px;
				margin: 0px auto;
				background: #F8F8FF;
				border-left: 1px #00000 solid;
				border-right: 1px #00000 solid;
				padding: 0px;
				}
			div.content {
				background: #F8F8FF;
				min-height: 200px;
				height: auto !important;
				height: 200px;
				display: inline-block;
				padding: 0px;
				margin: 0px;
				}
			div.left_column {
				float: left;
				width: 150px;
				}
			div.right_column {
				float: right;
				width: 650px;
				}
			div.content:after {
				content: ".";
				display: block;
				height: 0px;
				font-size: 0px;
				clear: both;
				visibility: hidden;
				}
			/* Hides from IE-mac \*/
			* html div.content {
				height: 1%;
				}
			div.content {
				display: block;
				}
			/* End hide from IE-mac */


			/* Wird spaeter nicht mehr gebraucht... */
			p {
				margin: 0px;
				padding: 0px 10px;
				}

			body {
				background-image: url(http://www.op-game.de/images/styles/bg_default.png);
				background-repeat: repeat-x;
				padding: 0px;
				margin: 0px;
				background-color: #000000;
				}
			html, body, div.wrapper {
				height: 100%;
				}
			div.head {
				width: 800px;
				padding: 0px;
				margin: 0px;
				height: 200px;
				border-bottom: 1px #000000 solid;
				}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<div class="head">
					Head
				</div>
				<div class="left_column">
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
					<p>leftColumn_content</p>
				</div>
				<div class="right_column">
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
					<p>rightColumn_content</p>
				</div>
			</div>
		</div>
	</body>
</html>

Nun wird aber der Border von "wrapper" nur so groß, wie der Body, wenn der Seiteninhalt so groß wird, dass eine Scrollbar kommt. Man erkennt das zwar nicht, da der hintergrund nach unten hin schwarz wird, aber wenn ich Hintergrund mal Weiß mache sieht das komisch aus.
 
Das liegt hieran:
CSS: 
html, body, div.wrapper {
				height: 100%;
				}

Für .wrapper muß die Regel aber so lauten:
CSS: 
div.wrapper {
min-height:100%; /* Mindesthöhe in standardkonformen Browser */
height:auto !important; /* auto-height mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height-Angabe ignorieren  */
height:100%; /* "Mindesthöhe" in IE6 */
}

mfg Maik
 
CSS: 
/* [...] */
html, body {
	height: 100%;
	}
div.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	}
div.head {
	width: 800px;
	padding: 0px;
	margin: 0px;
	height: 200px;
	border-bottom: 1px #000000 solid;
	}

Hmm, funktioniert nicht :(
 
Kann auch nicht, denn einen fünfstelligen Hexidezimal-Farbwert gibt es nicht.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück