✔ Breitenfrage

Status
Nicht offen für weitere Antworten.
O

odif

Hi,

ich habe eine Seite bestehend aus einer Html und einer CSS-DAtei.

Hier erstmal den Quelltext:

index.html
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>

<link rel="stylesheet" type="text/css" href="css.css" />

</head>
<body>

	<div id="topmenu">TOPMENU</div>
	<div id="main">
		<div id="mainmenu">MAINMENU</div>
		<div id="mainbody">MAINBODY</div>
	</div>
	<div id="bottommenu">BOTTOMMENU</div>

</body>
</html>

css.css
Code: 
#topmenu	{
		height: 30px;
		margin-left: 30px;
		margin-right: 30px;
		margin-top: 20px;
		background-color: red;
		}

#main		{
		margin-left: 30px;
		margin-right: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		}

#mainmenu	{
		width: 200px;
		margin-left: 0px;
		margin-right: 5px;
		background-color: red;
		}

#mainbody	{
		position: absolute;
		top: 60px;	
		left: 240px;
		width: XYZ;
		margin-left: 5px;
		margin-right: 0px;
		background-color: red;
		}

#bottommenu	{
		height: 30px;
		margin-left: 30px;
		margin-right: 30px;
		margin-bottom: 20px;
		background-color: red;
		}

Am besten wäre es wahrscheinlich, wenn ihr die Datein einfach mal speichert und es euch anguckt. Alternattiv gibt es hier Screenshots: http://web319.server18.server-drome.net/christof/screen.html


Nun zur eigentlichen Frage:
Ich möchte, wie auch auf den SCreenshots zu sehen ist, dass die Box MAINBODY mit BOTTOMMENU und TOPMENU bündig ist, Was muss ich als Breite bei MAINBODY angeben, um dies zu erreichen?
Auf fixe Pixelangaben will ich bei dieser Box verzichten.

Beste GRüße
odif
 
Hi,

du könntest auf die absolute Positionierung verzichten. Im Gegenzug ordnest du mit float: left das
Navigationselement auf der linken Seite an. Den Inhaltscontainer setzt du daneben und richtest
ihn mit den entsprechenden margin-Werten aus.

CSS-Definitionen:
Code: 
#topmenu	{
		height: 30px;
		margin-left: 30px;
		margin-right: 30px;
		margin-top: 20px;
		background-color: red;
		}

#main		{
		margin-left: 30px;
		margin-right: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		}

#mainmenu	{
		float: left;
		width: 200px;
		margin-left: 0;
		margin-right: 5px;
		background-color: red;
		}

#mainbody	{
		margin: 0 0 0 210px;
		background-color: red;
		}
/* IE-Hack wg. 3-Pixel-Gap */
* html #mainbody{ height: 1%;}

#bottommenu	{
		height: 30px;
		margin-left: 30px;
		margin-right: 30px;
		margin-bottom: 20px;
		background-color: red;
		}
Der HTML-Code bleibt der gleiche.

Ciao
Quaese
 
Jetzt wird der Text aber nicht umgebrochen, sondern er geht einfach weiter (von MAINBODY auf den Browserhintergrund). Wie kann ich ihn automatisch mbrechen lassen?

edit: Das Problem hat sich gelöst.
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück