✔ gefloatete Conatiner mittig ausrichten

Status
Nicht offen für weitere Antworten.
Hi,

ich glaube ihr versteht mein Prob nicht weil ihr ich mich nicht klar ausdrücken kann, tut mir leid, sorry.

Ich habe jetzt meine Seite noch mal neu strukturiert und validiert, keine Fehler mehr drine.

Aber es sieht genauso wie vorher aus, als ein div Tag gefehlt hat.

Also, nun unter http://n-k-s.de/test3.html findet man die Seite so, wie ich sie gerne hätte. Dazu muss man die Seite aber mit dem IE Brwoser besuchen.

Bei einem anderen Browser passiert nämlich dieser Fehler der mir das Design zerstört.

Der IE macht am Anfang des recht gefoateten dl Listenrand halt, die anderen Browser scheinen aber durch diese Liste hindurch zu positionieren.

Ich vermute hier ein nicht so einfach Sache dahinter, leider habe ich es auch noch nicht geschaft das ganze mit position absolute zu lösen, soweit ich mich erinnern kann ist es nämlich auch möglich innerhalb eines Div Container mit positin absolut zu arbeiten, wodurch ich auch eine Lösung bekommen könnte.

Nun, was soll ich weiter versuchen zu erklären, wenn mna mit dem IE die Seite besucht sieht man ja was Sache ist.

Aber hier auch noch mal der Code:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webstandardsprojekt - einfaches flexibles Layout</title>
<style type="text/css">
<!--
#subnav
				 {
				 width:								 180px;
				 float:								 right;
				 padding:								70px 0 0 0;
				 margin:							 0 5px 0 15px;
				 border:								0 dotted #007F00;
				 font-size:							 0.9em;
				 background:							 url(jpg/blume.jpg) no-repeat
					 100% 0 white;
				}
				 /* Überschriften in der Subnavigation */
				 #subnav dt
				 {
				 font:							 bold 1.3em arial,
														 Times, Georgia, serif;
				 padding:							 0 0 2px 0;
				 margin:								 10px 0 5px 0;
				 border-bottom:					 2px solid #007F00;
				 text-align:						 center;
				}
				 /* Die Unterpunkte der Subnavigation. */
				 #subnav dd
				 {
				 padding:								0;
				 margin:								 0 0 30px 0;
				}
div#leftcol
{
float:	 left;
display:		 block;
width:	 252px;
margin:	 0 0 0 0px;
background:	#8F8F8F;
border:	 1px solid #000;
}
/* IE 6 */
* html div#leftcol
{
margin: 	0 0 0 0px;
}
div#rightcol
{
float:		 right;
display:	 block;
width:		 252px;
margin:		 0 0px 0 0;
background:	#00FF00;
border:	 1px solid #000;
}
/* IE 6 */
* html div#rightcol
{
margin: 	0 0 0 0;
}
				 #content
				 {
				 border: 1px solid #FFFF00;
padding: 0;
width:	auto;
min-height: 120em;
height:	auto;
margin:	0 auto;
				 }
				 #kasten
				 {
				 border: 1px solid #BF0000;
padding: 0;
width:	550px;
margin:	0 auto;
				 }
-->
</style>
</head>
<body>
<div id="content">
<dl id="subnav">
<dt>hihihi</dt>
	<dd>hhhh</dd>
<dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd> <dt>hihihi</dt>
	<dd>hhhh</dd>
</dl>
 
<div id="kasten">
<div id="leftcol">
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
<p>linke seite gefloatet </p>
</div>
<div id="rightcol">
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
</div>
</div>
<br style="clear:both;" /><br style="clear:both;" />
</div>
</body>
</html>
 
Zuletzt bearbeitet:
feh hat gesagt.:
Hallo maik,

dein Lösungsansatz sieht schon sehr gut aus, aber es fehlt noch eine Kleinigkeit auf welche ich großen Wert lege.

Ich werde später dem kompletten Kasten ein variable Größe geben, also nicht mehr ein feste wie im Beispiel, das hat den Nachteil, das man das Browserfenster zusammenziehen kann bis eine der gefloateten Container runter fällt.

Ich möchte um die beiden gefloateten Container div#leftcol und div#rightcol einen weiteren Container legen, welcher eine feste Größe von ca. 600px hat und mit margin:0 auto mittig positioniert ist.
Zum Vergrößern anklicken....
Und warum sagst du das nicht gleich?! :( Überlege dir bitte das nächste mal vorher, wie du dir dein Seitenkonzept vorstellst.


@Dr Dau: hab den Fehler (fehlendes </div>) in meinem Source-Posting korrigiert, thanx 4 info ;-]


[ editpost 07:30 ]

In deiner aktuellen Vorlage / Demo-Seite sind die beiden DIVs #leftcol und #rightcol nun auch mehrzeilig; sprich höher, gegenüber der gestrigen Version.

Soll das Layout später auch so bleiben? Stellen sie sozusagen den 'Seiteninhalt' dar?

In den Gecko-Browsers FireFox (1.0.2), Mozilla (1.6) und Netscape (7.1) werden diese beiden floatenden DIVs nicht innerhalb des DIV #kasten dargestellt -> anhand des DIV-Rahmens sehr gut zu erkennen :suspekt:


[ editpost 10:32 ]

Hab mal ein alternatives CSS-Modell erarbeitet und erfolgreich getestet:
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webstandardsprojekt - einfaches flexibles Layout</title>

<style type="text/css">
<!--
#subnav
{
position: absolute;
right: 20px;
top: 10px;
width: 180px;
padding: 70px 0 0 0;
margin: 0 5px 0 15px;
border: 1px dotted #007F00;
font-size: 0.9em;
background: url(jpg/blume.jpg) no-repeat 100% 0 white;
}

/* Überschriften in der Subnavigation */
#subnav dt
{
font: bold 1.3em arial, Times, Georgia, serif;
padding: 0 0 2px 0;
margin: 10px 0 5px 0;
border-bottom: 2px solid #007F00;
text-align: center;
}

/* Die Unterpunkte der Subnavigation. */
#subnav dd
{
padding: 0;
margin: 0 0 30px 0;
}
/* ENDE SUBNAV-FORMATIERUNGEN */

div#kasten
{
position: absolute;
right: 50%;
top: 10px;
margin-right: -180px;
width: 550px;
border: 1px solid #BF0000;
padding: 0;
}

div#leftcol
{
float: left;
display: block;
width: 252px;
margin: 0 0 0 0;
background: #8F8F8F;
border: 1px solid #000;
}

div#rightcol
{
float: right;
display: block;
width: 252px;
margin: 0 0px 0 0;
background: #00FF00;
border: 1px solid #000;
}
-->
</style>

</head>
<body>

<dl id="subnav">
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
   <dt>hihihi</dt>
    <dd>hhhh</dd>
</dl>

<div id="kasten">

<div id="leftcol">
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
<p>linke seite gefloatet  </p>
</div>

<div id="rightcol">
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
<p>rechte Seite gefloatet </p>
</div>

</div>

</body>
</html>

[ editpost 11:48 ]

' 600er-Variante ' für mein vorgestelltes CSS-Modell:

Code: 
div#kasten
{
position: absolute;
right: 50%;
top: 10px;
margin-right: -195px;
width: 600px;
border: 1px solid #BF0000;
padding: 0;
}
 
Zuletzt bearbeitet von einem Moderator:
Hallo maik,

nicht schlecht deine Lösung, du verstehts dein Handwerk. ;-)

Was meinst du bitte noch mit der ' 600er-Variante ' für mein vorgestelltes CSS-Modell: ?
 
In meinem ersten CSS-Modell (von 10:32 Uhr) ist das DIV#kasten 550px breit und der Wert für margin-right beträgt -180px. Diese '550er - Variante' basiert auf den Vorgaben deiner Demo-Seite.

In der '600er - Variante' ist das DIV#kasten nun 600px breit und der margin-right -Wert beträgt -195px. Diese Version berücksichtigt deine Beschreibung:

feh hat gesagt.:
Ich möchte um die beiden gefloateten Container div#leftcol und div#rightcol einen weiteren Container legen, welcher eine feste Größe von ca. 600px hat
Zum Vergrößern anklicken....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück