Tabellenlose Layouts I

holunda · 11.08.2003, 16:38

Hi Puristen!

Hab mich jetzt entschlossen das nächste Projekt bzw v1.5 eines Projekts mit divs aufzubauen.

Hierfür habe ich einige Tests gemacht, bisher leider mit wenig erfolg:

Code:

<html>
<head>
	<title>Unbenannt</title>
	<style type="text/css">
	#banner {
		background-color:#006633;
		height:100px;
		width:100%;
	}
	#menu {
		padding:5px;
		float:left;
		width:150px;;
		background-color:#FF0000;
	}
	#content {
		position:realtive;
		float:right;
		width:100%;
		height:400px;
		background-color:#eeeeee;
	}
	#fuss {
		float:left;
		width:100%;
		height:20px;
		background-color:#f9f9f9;
	}
	</style>
</head>
<body>
<div id="banner">Das ist der Head</div>
<div id="menu"></div>
<div id="content">Content</div>
<div id="fuss">Das ist der Fuss</div>
</body>
</html>

Leider wird der Content Container UNTER der Navigation dargestellt. Ich möchte dem Menü eine fixe Breite geben und der Content soll dann eben den Rest auffüllen.

Gruß
Alex

Screensize · 11.08.2003, 16:56

Zitat:

position:realtive;

soll vielleicht "relative" heissen?

Vielleicht war es das ja schon.

Grüße Rico

holunda · 11.08.2003, 17:00

danke aber das wars nicht. das relative is da eh falsch glaub ich

w_thomas · 11.08.2003, 18:42

probier mal den code - hoffe das ist das was du erreichen wolltest!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>Unbenannt</title>
        <style type="text/css">
        #banner {
                background-color:#006633;
                height:100px;
                width:100%;
        }
        #menu {
                position:absolute;
                left 0px;
                width:150px;
                background-color:#FF0000;
        }
        #content {
                margin-left: 150px;
                background-color:#eeeeee;
        }
        #fuss {
                float:left;
                width:100%;
                height:20px;
                background-color:#f9f9f9;
        }
        </style>
</head>
<body>
<div id="banner">Das ist der Head</div>
<div id="menu">menu, bla, bla<br />bla bla<br />bla bla</div>
<div id="content">Contentbla, bla<br />bla bla<br />bla bla bla,<br />bla<br />bla bla<br />bla bla</div>
<div id="fuss">Das ist der Fuss</div>
</body>
</html>

thomas

LANtastic · 11.08.2003, 22:46

Das Ding mit den mehrspaltigen Layouts ist schon eine feine Sache. Leider stösst man hierbei doch verdammt schnell an Fehlinterpretationen der einzelnen Browserhersteller, bzw. an Bugs.

Daher solltest du mal einen kleinen Blick auf diese Seite hier werfen. Alle Möglichen Layouts, die einsetzbar sind und in allen Browsern funktionieren :

http://www.thenoodleincident.com/tut...son/boxes.html

holunda · 12.08.2003, 17:33

puhh, dachte nicht dass das so zäh läuft.
Was ich jetzt brauche ist:

Seite die 4 Teile:
(ich schreibs mal in Tabellen, is leichte

)
<table width="100%">
<tr>
<td width="170"></td>
<td width="100%"></td>
</tr>
<tr>
<td width="170"></td>
<td width="100%"></td>
</tr>

hoffe ihr könnt mir helfen

prefix · 12.08.2003, 18:35

hi holunda,

kannst bitte mal ein layout-beispiel mit tabellen uploaden und einfärben, damit wir uns das mal vorstellen können?!

thx

prefix · 12.08.2003, 18:49

so, hab dir jetzt mal ein beispiellayout gebastelt - ich glaub, so ähnlich stellst du es dir vor -> schau mal.

hier der code, wir beginnen mit dem css-code:

Code:

/*
die hintergrundfarben verwende ich, damit ich die korrekte positionierung
der elemente überprüfen kann - und zwar auch einen blick :)

das empfiehlt sich immer, wenn man das layout entwirft!

man sollte sie erst dann weggeben, wenn man das layout fix und fertig
stehen hat!
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	margin: 0;
}

/* jetzt fixieren wir mal die ganze seite in einem container */

#seiteninhalt {
	margin: 10px 50px 50px 10px; /* wir geben KEINE breite an!!! damit
	füllt die ebene die zur verfügung stehende breite im browserfenster
	aus */
	background-color: Red;
}

/* auf position: relative können wir verzichten, das ist standard */

#banner {
	height: 100px;
	background-color: yellow;
}

#menu {
/* achte darauf, wann dieser container dann im xhtml-sourcecode
aufgerufen wird!!!! */
	float: left;
	width: 150px;
	background-color: Aqua;
}

#content {
	margin-left: 160px;
	background-color: blue;
}

#fussnote {
	clear: left; /* damit stellen wir sicher, dass das gefloatete
	element - also #menu - nicht über die fussnote reichen darf */
	background-color: Green;
}

nun der xhtml-code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Das neue Layout f&uuml;r holunda :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="holunda.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="seiteninhalt">
	<div id="banner">banner</div>
	<div id="menu">menu</div>
	<div id="content">content</div>
	<div id="fussnote">fussnote</div>
</div>
</body>
</html>

so, ich hab das mal erfolgreich in den neueren browsern getestet: ie6, nn7, op7, moz/fb 0.61! der code ist noch relativ rudimentär und gehört sicher noch ein wenig ausgebaut - aber von den grundsätzen her hoffe ich, dass das ganze verständlich ist

holunda · 12.08.2003, 18:51

here we go
edit; eun wenig anders isses doch ...

prefix · 12.08.2003, 18:52

ah, so meinst es

ok, ich mach mich mal dran!

prefix · 12.08.2003, 19:00

--> wie schaut das aus?

hab extra abstände gelassen, um das zu visualisieren - die fussnote hab ich auch mal drin gelassen!

holunda · 12.08.2003, 19:11

Das sieht spitze aus, danke prefix
Werde das morgen mal testen und mich dann nochmal melden.

Gruß aus Tirol
Alex

prefix · 12.08.2003, 19:13

gern geschehen, für die tiroler-buam mach ich das ja liebend gern *lol*

ev. wirst noch für ie5.0/win und ie5/mac fixen müssen - auf den anderen win-browsern (die ich mal grad da hab) schaut es gut aus - über den nn4.7 kann ich leider - oder gottseidank - nichts sagen

holunda · 14.08.2003, 10:47

nächstes Problem: Korrektes Einbauen von Seb'S Pulldown Menü:

Das ist mein body:

Code:

<body>
<div id="seiteninhalt">
<div id="banner">
<div id="logo">

<a href="index.php"><img src="img/logo.gif" alt="logo" border="0" /></a>		</div>
<div id="mainmenu">
<a href="#" onmouseover="pdm_verwaltung.show(this.offsetLeft + 5, this.offsetTop + 32);">Verwaltung</a> | 
<a href="#" onmouseover="pdm_statistik.show(this.offsetLeft + 5, this.offsetTop + 32);">Statistik</a> | 
<a href="#" onmouseover="pdm_kommunikation.show(this.offsetLeft + 5, this.offsetTop + 32);">Kommunikation</a> | 
<a href="#" onmouseover="pdm_extras.show(this.offsetLeft + 5, this.offsetTop + 32);">Extras</a>
</div>	</div>
<div id="sidebar">

</div>
<div id="content"><h2>Login Sequence</h2>
<p>
Sie sind nicht angemeldet. <br />
Bitte melden Sie sich mit Ihrem Benutzernamen und Ihrem Passwort am System an.
</p>
<form action="index.php" method="post" name="login">
......
</form>
</div>
<div id="fussnote">Onlinestatistik v1.5  ..  Firma Hard-Soft </div>
</div>
</body>

Mein CSS:

Code:

/* jetzt fixieren wir mal die ganze seite in einem container */

#seiteninhalt {
	margin: 10px 10px 10px 10px; /* wir geben KEINE breite an!!! damit
	füllt die ebene die zur verfügung stehende breite im browserfenster
	aus */
	padding: 3px;
}

/* auf position: relative können wir verzichten, das ist standard */

#banner {
	height: 100px;
	margin-bottom: 20px;
}

/* so, jetzt positionieren wir 2 elemente in den banner-container rein */

#logo {
	float: left;
	width: 170px;
	height: 100px;
}


#sidebar {
/* achte darauf, wann dieser container dann im xhtml-sourcecode
aufgerufen wird!!!! */
	float: left;
	width: 170px;
}
#sidebar .head {
	border:1px solid #999999;
	background-color:#eeeeee;
	padding:2px;
}

#content {
	margin-left: 180px;
}

#fussnote {
	clear: left; /* damit stellen wir sicher, dass das gefloatete
	element - also #menu - nicht über die fussnote reichen darf */
	margin-top: 20px;
	margin-left:180px;
	border-top:1px dotted #999999;
	padding:3px;
}
#mainmenu {
    background-color:#ccc;
    border:1px solid #000;
    font:12px Trebuchet MS;
    padding:1px;
    padding-left:6px;
	margin-left:180px;
}

#mainmenu a {
    color:#000;
    text-decoration:none;
    padding-left:4px;
    padding-right:4px;
}

#mainmenu a:hover {
    background-color:#c90;
}

Das Problem ist, dass das Menü nicht an der richtigen stelle geladen wird ...

Pulldownmenü.js:
http://www.traum-projekt.com/forum/s...threadid=30961

Is dringend, danke ALex

prefix · 14.08.2003, 10:52

hast du das nicht online??? wär schon ideal, wenn man den fehler mal sehen könnte