Div-Positionierung (zentriert)

Sojo

Ich schaffs nicht!

Habe jetzt alle Tutorials gelesen, die ich gefunden habe, und schaffe es trotzdem nicht die Div's so auszurichten wie ich will.

Als Übungsgrundlage habe ich eine der Vorlagen von stichpunkt.de genommen. Jetzt will ich das ganze aber zentrieren. Das Ergebnis meiner kläglichen Versuche findet ihr hier.

Die Ausrichtung der Layer Top und Links ging problemlos. Rechts habe ich auch in die richtige Position gebracht, allerdings mit einem Negativwert Wenn ihr etwas runter Scrollt findet ihr auch noch den Layer Inhalt. Dieser sollte sich da noch dazwischen quetschen, aber das bringe ich gar nicht mehr zu Stande

Habe mir auch andere Seiten angesehen, die ein Ähnliches Design haben, aber blicke trotzdem nicht durch.

Quelltext:

HTML

<html>
<head>


<style type="text/css">


body {
  padding:0px;
  margin:0px;
  background-color:#0080c0;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  color:#000000;
}


#frame {
  position:relative;
  margin:10px auto;
  width:820px;
  text-align:left;
  background-color:#fff;
  border:1px solid #000000;
}


#logo {
  position:relative;
  left:10px;
  top:10px;
  height:100px;
  width:800px;
  background-color:#ffcc00;
}


#left {  
  position:relative;
  top:20px;
  left:10px;
  width:160px;
  height:300px;
  background-color:#ffcc00;
}


#right {
  position:relative;
  left:650px;
  top:-280px;
  width:160px;
  height:300px;
  background-color:#ffcc00;
}


#inhalt {
  height:220px;
  width:460px;
  left:180px;
  background-color:#ffffc6;
}


</style>


</head>
<body>
<div id="frame">
<div id="logo">Top</div>
<div id="left">Links</div>
<div id="right">Rechts</div>
<div id="inhalt">Inhalt</div>


</div>
</body>
</html>

Alles anzeigen

sejuma

mach mal zunächst einen horizontal zentrierten Div nach diesem Muster. Auf die Vertikale Zentrierung kannst du dabei zunächst mal verzichten.
Dann packe darein deine div's. Lass bei denen überall die position, left und right-Angaben weg. Stattdessen kannst du ggf. mit margin-left arbeiten.
Verpasse dem linken ein "float:left;" und dem rechten ein "float:right;"
Orientiere dich am besten an diesem Code: http://www.stichpunkt.de/css/3-box2.html

Lizzard

Endlich, kann ich dir auch mal was helfen

Code

<style type="text/css">


body {
  padding:0px;
  margin:0px;
  background-color:#0080c0;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  color:#000000;
}


#frame {
  margin:10px auto;
  padding: 10px;
  width:800px;
  text-align:left;
  background-color:#fff;
  border:1px solid #000000;
}


#logo {
  height:100px;
  width:800px;
  background-color:#ffcc00;
}


#left { 
  margin-top: 10px;
  width:160px;
  height:300px;
  background-color:#ffcc00;
  float: left;
}


#right {
  margin-top: 10px;
  width:160px;
  height:300px;
  float: right;
  background-color:#ffcc00;
}


#inhalt {
  height:220px;
  width:460px;
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  background-color:#ffffc6;
}


</style>

Alles anzeigen

Code

<div id="frame">
<div id="logo">Top</div>
<div id="left">Links</div>
<div id="right">Rechts</div>
<div id="inhalt">Inhalt</div>
<br style="clear: both;" />
</div>

Ich frag mich, was du mit der Positionierung versucht hast
Um Blockelemente nebeneinander anordnen zu können, solltest du auf Float zurückgreifen. wichtig ist, nach dem alles gefloatet ist, immer wieder schön zu clearen, da sonst nachfolgende Inhalte weiter floaten wollen. Ohne clear am Ende, würde der Hintergrund vom frame sich nicht bis ans Ende ziehen.
Falls du irgendwann mal willst, dass deine Spalten immer gleich lang sind, kannst du entweder den Quellcode von meiner Website studieren, oder mal nach "Faux Columns" googlen.

Hoffe ich konnte dir helfen, ohne dir den Lerneffekt zu nehmen

Grüße,
LizZard

PS.: Ich finde es gibt viel zu viele Tutorials dazu im Web. Wenn das nicht so wäre, hätte ich schon eins geschrieben

Dominikgt

ich hätts jetzt so gemacht:

HTML

<html> 
<head> 


<style type="text/css"> 


body { 
  padding:0px; 
  margin:0px; 
  background-color:#0080c0; 
  font-family:Verdana,Arial,Helvetica,sans-serif; 
  color:#000000; 
} 


#frame { 
  position:relative; 
  margin:10px auto; 
  width:820px;
  height:90%;
  min-height:400px; 
  text-align:left; 
  background-color:#fff; 
  border:1px solid #000000; 
} 


#logo { 
  position:relative; 
  left:10px; 
  top:10px; 
  height:100px; 
  width:800px; 
  background-color:#ffcc00; 
} 


#left {  
  position:relative; 
  top:20px; 
  left:10px; 
  width:160px; 
  height:300px; 
  background-color:#ffcc00; 
} 


#right { 
  position:absolute; 
  left:650px; 
  top:120px; 
  width:160px; 
  height:300px; 
  background-color:#ffcc00; 
} 


#inhalt { 
  position:absolute;
  height:300px; 
  width:460px; 
  left:180px;
  top:120px; 
  background-color:#ffffc6; 
} 


</style> 


</head> 
<body>
 <center>
<div id="frame"> 
<div id="inhalt">Inhalt</div>
<div id="logo">Top</div>
<div id="right">Rechts</div>  
<div id="left">Links</div> 
</center>


</div> 
</body> 
</html>

Alles anzeigen

Lizzard

Deine Lösung ist besser. bei mir hakt noch irgendwas im IE.
Hab noch nie in nem Projekt mit absoluter Positionierung gearbeitet, aber das schaut echt brauchbar aus, und ist auch gut Browserkompatibel. Schöne Lösung!

Sojo

Ihr seid alle klasse!

Ich frage mich auch, was ich damit versucht habe. Float habe ich jetzt auch schon mind. 10 mal durchgeackert und verstehe es einfach nicht Da ich bis anhin ein Tabellenfetishist war bin ich vielleicht etwas schwer von Begriff, was andere Lösungen betrifft Werde noch einmal weiterpauken.

Danke an alle!

topfblume

moin ...

ne variable Möglichkeit.

HTML

<!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" lang="de" 


xml:lang="de">
<head>
<title>zentriert und passt sich an</title>
<meta http-equiv="Content-Type" content="text/html; 


charset=utf-8" /> 


<style type="text/css">


body
	{
	margin: 0;
	padding: 15px;
	}


div#box
	{
	width: 100%;
	}


div#links
	{
	background-color: red;
	width: 20%;
	height: 300px;
	float: left;
	}


div#rechts
	{
	background-color: yellow;
	width: 20%;
	height: 300px;
	float: right;
	}


div#mitte
	{
	background-color: green;
	height: 100px;
	}


div#unten
	{
	background-color: gray;
	clear: both;
	}


</style>
</head>
<body>


<div id="box">
<div id="links">INHALT - LINKS</div>
<div id="rechts">INHALT - RECHTS</div>
<div id="mitte">INHALT - MITTE</div>
<div id="unten">INHALT - UNTEN</div>
</div>


</body>
</html>

Alles anzeigen

Ist "ausbaufähig"

gruß

topfblume

moin ...
habe die erste Antwort übersehen,
ist ja im Groben der gleiche Vorschlag,
gruß

Sojo

OK, zwei Fragen habe ich noch

Wie kann ich machen, dass sich das DIV "frame" mit den DIV's "left", "right" und "inhalt" vergrössert wenn diese grösser werden als frame selbst?

Wie kann ich machen, dass das DIV "left" immer die gleiche Höhe hat wie das div "frame"? Mit height:100% passt es sich ja an die Seitenhöhe an.

Lizzard

Zitat

Wie kann ich machen, dass sich das DIV "frame" mit den DIV's "left", "right" und "inhalt" vergrössert wenn diese grösser werden als frame selbst?

zumindest bei meiner Lösung ist es so, dass der frame immer so groß ist, wie der größte Container in seinem Inhalt.

Zitat

Wie kann ich machen, dass das DIV "left" immer die gleiche Höhe hat wie das div "frame"? Mit height:100% passt es sich ja an die Seitenhöhe an.

das will ich sehen, wie du ein Div dazu bringst, nur per CSS die volle Bildschirmhöhe einzunehmen
Vielmehr solltest du hier Faux-Columns benutzen, wie oben schonmal angesprochen.

http://alistapart.byteshift.de/fauxcolumns/

Div-Positionierung (zentriert)

Tags

Benutzer online in diesem Thema