• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS/div Design Problem (standart)

Teufler

Teufler

New member
Moin!

ich habe folgendes Design mit CSS gebastelt:

HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height:100%;
}
#main {
	background-color:#666666;
	height: 100%;
	width: 780px;
}
#header{
	background-color:#555555;
	height: 150px;
}
#menu{
	width:150px;
	background-color:#553344;
	height:100%;
}
#content{
background-color:#555644;
}
-->
</style>
</head>

<body>
<div id="main" align="">	
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
Inhalt
</div>
</div>
</body>
</html>

meine Probleme sind:
#main ist höher als 100%
und
#content möchte ich rechts neben #menü haben


wisst ihr wie ich das hinbekomme?

thx,
Martin
 
Zuletzt bearbeitet:
Dies wäre eine Möglichkeit; Funktioniert in IE, FF,O;

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> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Unbenanntes Dokument</title> 
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height:100%;
}
#main {
	background-color:#666666;
	height: 100%;
	width: 780px;
	position:absolute; top:0px; left:0px;
}
#header{
	background-color:#555555;
	height: 150px;
}
#menu{
	width:150px;
	background-color:#553344;
	height:100%;
	position:absolute; top:0px; left:0px;
}
#content{
	width:630px;
	background-color:#555644;
	position:absolute; top:150px; left:150px;
}
--> </style> 
	</head>
 <body>
  <div id="main"> 
  <div id="header"></div>
  <div id="menu"> </div> 
  <div id="content">Inhalt<br></br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  	Mauris eget nisi. Etiam nisl. Morbi auctor. Duis id ante sit amet sem mattis porttitor. 
  	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin ipsum sem, laoreet sit amet, 
  	egestas sit amet, fermentum eu, nibh. Nullam turpis. Sed vitae purus. Pellentesque tristique velit nec sem. 
  	Donec faucibus ligula nec ante. Mauris viverra commodo ipsum. Nulla sit amet eros eu urna ornare ullamcorper. 
  	Fusce ut ligula. Nullam vel nulla. Pellentesque sed nibh eu lectus dignissim bibendum. Praesent a odio.
  </div> 
  </div> 
  </body> 
  </html>

Grüsse
Schnuckenpapa
 
Ich würde dir keine absolute Positionierung empfehlen.
Was möchtest du denn mit den maximal 100% height erreichen? Wenn der Inhalt größer ist wird der Inhalt nicht angezeigt. Möchtest du so etwas, wie mit Frames realisieren?
Dann machst du das so :

Code: 
body {
	margin: 0px;
	padding: 0px;
	height:100%;
}
#main {
	background-color:#666666;
	width: 780px;
	height: 100%;
}
#header{
	background-color:#555555;
	height: 150px;
}
#menu{
	float:left;
	width:150px;
	background-color:#553344;
	height:100%;
}
#content{
	background-color:#555644;
}
und HTML
PHP: 
<div id="menu"> </div> 
<div id="main">
  <div id="header">Kopf</div>
  <div id="content">Inhalt<br></br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  	Mauris eget nisi. Etiam nisl. Morbi auctor. Duis id ante sit amet sem mattis porttitor. 
  	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin ipsum sem, laoreet sit amet, 
  	egestas sit amet, fermentum eu, nibh. Nullam turpis. Sed vitae purus. Pellentesque tristique velit nec sem. 
  	Donec faucibus ligula nec ante. Mauris viverra commodo ipsum. Nulla sit amet eros eu urna ornare ullamcorper. 
  	Fusce ut ligula. Nullam vel nulla. Pellentesque sed nibh eu lectus dignissim bibendum. Praesent a odio.
  </div> 
  </div>

Und ich würde das nicht direkt zentrieren, sondern mit einem Abstand von links versehen. Ansonsten kannst du das mit einer Tabelle der folgenden Art machen :
PHP: 
<table cellpadding='0' cellspacing='0' style='width:100%;'>
 <tr>
  <td> </td>
  <td style='width:500px;'><!-- Hier Inhalt einfügen --><td>
  <td> <td>
 </tr>
</table>
 
Nix für ungut, shf10105, aber beide "Lösungen" sind Murks.

@Teufler: es gibt hier eimerweise Threads, die sich mit dem Zentrieren von Inhalten befassen. Tu mal selbst was und suche danach...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben