Layout ohne Tabellen @ tutorials.de: Tutorials, Forum & Hilfe

rambo · 07.02.10 10:24

Hallo,

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

Ich habe ein Beispiel angefertigt:

HTML-Code:

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

Maik · 07.02.10 10:48

Moin,

Webmaster FAQ -> [CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Merke: Wo gefloatet wird, muß auch gecleart werden.

mfg Maik

rambo · 07.02.10 11:15

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-Code:

<?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?

Maik · 07.02.10 11:24

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

rambo · 07.02.10 11:36

Ich weiß es nicht. Es gibt ja immer Probleme, die ein Browser macht...

Ich habe es nochmal angepasst:

HTML-Code:

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

Maik · 07.02.10 11:41

Das liegt hieran:

Code css:

1
2
3

html, body, div.wrapper {
                height: 100%;
                }

Für .wrapper muß die Regel aber so lauten:

Code 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

rambo · 07.02.10 11:49

Code 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

Maik · 07.02.10 12:01

Kann auch nicht, denn einen fünfstelligen Hexidezimal-Farbwert gibt es nicht.

mfg Maik

rambo · 07.02.10 12:25

Ok, es hat sich erledigt.

Danke für deine Hilfe, ich hätte mal früher in deine Signatur schauen sollen, da ist genau das drin, was ich brauche: http://www.tutorials.de/forum/css-tu...100-hoehe.html

Ich habe einfach die Center-Spalte entfernt.

Danke, danke, danke!

Maik · 07.02.10 12:42

Zitat von rambo

ich hätte mal früher in deine Signatur schauen sollen, da ist genau das drin, was ich brauche: http://www.tutorials.de/forum/css-tu...100-hoehe.html

Hättest du dein Vorhaben eingangs deines Themas erwähnt, hätte ich dich auch direkt auf mein Tutorial aufmerksam gemacht

mfg Maik

rambo · 07.02.10 13:17

Ok, es gibt noch einen kleinen Bug in diesem Layout. Bei mir ist es auch manchmal der Fall, dass die Meunübar sehr groß wird. Wenn diese aber zu groß ist wird sie vom Footer bedeckt.

Edit: Das passiert auch manchmal mit der rechten Box, bei Tabellen...

Edit²: Ich habe einfach noch einen Leeren Div, mit der Höhe 100px, als letztes im den beiden Boxen gesetzt, ich glaube es lag an dem extrem Hohen Footer.

Maik · 07.02.10 14:14

In meinen Beispielen (3cols_header_footer.htm, 3cols_header_topNavi_footer.htm) findet sich hierfür diese Regel:

Code css:

1
2
3

div#leftCol, div#rightCol, div#centerCol {
padding-bottom: 25px;
}

Der untere Innenabstand für die drei Spaltenblöcke orientiert sich an der Höhe des Footers.

mfg Maik

rambo · 07.02.10 16:09

Ooops, stimmt, muss ich wohl ausversehen entfernt haben, sorry.

rambo · 08.02.10 15:06

Ich habe doch noch ein Problem:

Netscape 7.1 zeigt das Layout nicht richtig an:
http://op-game.de/netscape.png

Ich habe es jetzt auf folgenden Browsern ausprobiert:
Firefox
Internet Explorer
Opera
Google Chrome
Safari

Auf denen läuft es perfekt.

Maik · 08.02.10 15:21

Zitat von rambo

Ich habe doch noch ein Problem:

Netscape 7.1 zeigt das Layout nicht richtig an:
http://op-game.de/netscape.png

Ich habe es jetzt auf folgenden Browsern ausprobiert:
Firefox
Internet Explorer
Opera
Google Chrome
Safari

Auf denen läuft es perfekt.

Der aktuelle NN 9.x zeigt die Seite (aus meinem Tutorial) auch korrekt an.

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Komplexes Tabellen Layout zu CSS Layout

Layout einer Webseite ohne Tabellen sondern nur mit CSS

Layout Problem - 2 SQL Tabellen

Layout mit Tabellen und PHP

Abstände in Tabellen-Layout

E-Mail:

Abonnieren Abbestellen