CSS Design Problem & Fragen

WebSchinder · 13.07.2005, 23:08

hallo leute,

so nun benötige ich mal wieder eure hilfe.
habe mir ein design überlegt, was ich leider nicht ganz umsetzten kann.
wobei es mir um den bereich Ihahlt und Menü hapzächlich geht.
schaut euch bitte mal die grafik an, und sagt mir mal wie ich es anstellen kann das der menü und inhalt bereich dahin geht so wie auf der grafik.
da ich wen ich sehr nachdenke nicht sehr viel ahnung mit der sache habe, wollte ich euch mal fragen. vieleicht kennt jemand eine seite wo man sich online so was zusammen stellen kann. oder weiss jemand wo man solche volagen im netz dafür bekommen kann die man einfach nur noch etwas bearbeiten muss.

danke euch allen für die hilfe

rewboss · 13.07.2005, 23:32

Also, wo du die Höhe des Headers ganz genau festgelegt hast, bietet sich die Möglichkeit an, die Menüleiste absolut zu positionieren, mit:

Code:

position: absolute;
top: 120px; right: 0;

Alle andere <div>s brauchen überhaupt nicht positioniert zu werden. Gib dem Inhalts-<div> ein margin-right von 140px und voilà!

Allerdings hat dies einen Haken: Wenn der Inhalt zu kurz ist, überdeckt der Footer u.U. einen Teil von der Menüleiste.

Eine andere Möglichkeit wäre dann, die Menüleiste nicht absolut zu positionieren, sondern rechts zu floaten. Im HTML definierst du zuerst den Header, dann den Headerbalken, dann die Menüleiste, die du rechts floatest, dann den Inhalt (mit margin-right von 140px) und schließlich den Footer, dem du clear:right; zuweist.

Das ist sozusagen die Grundidee. Es wird nicht unbedingt genau so funktionieren, wie du es eigentlich haben willst, aber du kannst schon damit ein wenig herumspielen.

WebSchinder · 13.07.2005, 23:48

danke für deine antwort @rewboss,

habe das was du mir da vorgeschlagen hast mal umgesetzt so gut ich es verstanden habe.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#menue {
	background-color: #0066FF;
	position: absolute;
	top: 120px;
	right: 0;
	width: 150px;
}
#inhalt {
	background-color: #0066FF;
	top: 120px;
	right: 0;
	
}
-->
</style>
</head>

<body>
<div id="menue">Raum für den Inhalt von class "menue" id "menue"</div>
<div id="inhalt">Raum für den Inhalt von class "inhalt" id "inhalt"</div>
</body>
</html>

wie bekomme ich da den inhalt auf eine höhe des menüs. habe doch da " top: 120px; " eingetragen ?

rewboss · 14.07.2005, 10:00

Hmm. Warum hast du für #inhalt right:0 angegeben? Das platziert den rechten Rand des <div>s an den rechten Rand des Browser-Fensters -- das wolltest du aber nicht. Der Grund, warum es trotzdem nicht funktioniert, ist, dass du keine Positionieren angegeben hast -- hier bräuchtest du position:absolute;.

Aber das war eben nicht mein Vorschlag. Ich ging davon aus, dass die Höhe des Headers schon feststand -- etwa weil die Header-Grafik 120px hoch ist oder so. Dann brauchst du #inhalt überhaupt nicht zu positionieren. Dein HTML sollte ungefähr so aussehen:

HTML-Code:

<div id="header">
<img src="headergrafik.gif" />
</div>

<div id="menue">Dies ist die Menüleiste</div>

<div id="inhalt">Hier kommt der Inhalt.</div>

Dein CSS würde dann ungefähr so aussehen:

Code:

#header img{
 display: block; /* Sonst wird der Header-div ein paar Pixel zu groß */
 width: 800px; /* Oder was auch immer */
 height: 120px;
}

#menue{
 position: absolute;
 top: 120px; right: 0;
 width: 150px;
 background-color: #06f; /* Kurzform für #0066ff, spart meine Tastatur :) */
}

#inhalt{
 margin-right: 150px;
 background-color: #ccc;
}

Wenn du das aber so ausprobierst, wirst du feststellen, dass sich nicht alles so aussieht, wie es aussehen soll. Der Grund: Der Browser fügt dem Fenster immer einen Rand von ein paar Pixeln, deshalb verrutschen #header und #inhalt ein paar Pixel nach unten: Sie sind beide im normalen Textfluss, die Menüleiste aber wurde aus dem Textfluss herausgenommen mit position:absolute und genau 120 Pixel vom oberen Fensterrand platziert, egal was für Ränder der Browser sonst macht. Da sich die Größe des Rands je nach Browser unterscheidet, kannst du nicht wissen, um wie viele Pixel du die Menüleiste "verschieben" musst. Aber du kannst die Ränder ausschalten, und zwar mit:

Code:

body{
 margin: 0; /* Manche Browser verwenden für die Ränder margin... */
 padding: 0; /* ...andere jedoch padding. */
}