✔ gefloatete Conatiner mittig ausrichten

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hey Leute,

ich habe zwei Div Container nebeneinadner gefloatet mit Attribut left.

Jetzt gleben die zwei nebeneinander links bündig am Rand mit 10px Abstand.

Wenn man das Browserfenster der Seite aber vergrößert, möchte ich gerne haben das die beiden Container ein wenig mehr in die mitte rücken und nicht so leblos links am Rand bleiben, mit Prozentualen margin Werten für die gefloateten Div Conatiner funktioniert es nicht so gut, deshalb wollt ich mal nacgfragen ob hier ein Spezialist ne Lösung kennt.
 
Da wirst du dich entscheiden müssen, ob die DIVs nun linksbündig oder mittig ausgerichtet werden - beides wird meines Wissens nicht funktionieren.
 
Ja, schade ich vermute auch das selbe wie du.:offtopic:

Eben hab ich schon versucht die zwei gefloateten Div Container durch zwei Listenpunkte li zu ersetzen und die gesamte Liste mittig auszurichten, aber es geht nicht.
 
DIV-Container durch Listenpunkte ersetzen ... :suspekt:

Sorry, aber dieser Logik kann ich nicht folgen ;-]
 
Hallo,

schuldige aber mir fehlen gerade die Worte das ganze zu erklären.

Hier unter http://n-k-s.de/test3.html findet man jetzt aber ein Beispiel wo das ganze zu sehen ist.

Dort habe ich ein content mit fester Größe.

Im content ist rechts eine dl Liste gefloatet welche später einige Infolinks bekommt.

links habe ich aus einer ul Liste einen Kasten gebaut. In den Kasten habe ich zwei Div Container getan welche einmal links und rechts gefloatet sind. In den beiden gefloateten Containern werde ich später auch einige Infos legen.

Der Kasten in dem die beiden gefloateten Div Conatiner drine sind, hat eine feste Größe und ist mit margin: 0 auto mittig zentriert.

Nun das derzeitige Problem:

In allen Browsern auser IE werden die beiden gefloateten Div Container nicht so dargestellt wie im IE Brwoser. Im IE Brwoser sieht es aber so asu wie ich es gerne hätte.

Leider komme ich echt nicht dahinter wo der Fehler liegen kann, weil ich wieder mal den ganzen Tag zu viel hin und her gecodet habe.
 
Stellst du dir es vielleicht so vor :confused:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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 58px;
background:#8F8F8F;
border:1px solid #000;
}

/* IE 6 */
* html div#leftcol
{
margin: 0 0 0 29px;
}

div#rightcol
{
float:right;
display:block;
width:252px;
margin:0 48px 0 0;
background:#00FF00;
border:1px solid #000;
}

/* IE 6 */
* html div#rightcol
{
margin: 0 42px 0 0;
}
-->
</style>

</head>
<body>

<div style="border: 1px solid #FFFF00;padding:0;width:870px;min-height:120em;height:auto;margin:0 auto;">

<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="leftcol">
linke seite gefloatet
</div>

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

<div style="clear:left;">content</div>

</div>
</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23
 
Zuletzt bearbeitet von einem Moderator:
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.

Damit will ich erreichen, das jedesmal, wenn das Browserfenster vergrößert wird, alles in die mitte rückt.

Die beiden gefloateten Container haben somit immer den gleichen Abstand voneinander. In die gefloateten Container koommen dann später Infos rein.

Wenn ich aber diesen Container mit festen Größe anlege, kommt es zu unterschiedlichen Layouts, wie auch in meinem Beispiel unter: http://n-k-s.de/test3.html

Ich bin mir nicht sicher, aber ich überlege auch schon ob es mit position absolute nicht eine besere Lösung geben wird, weil dasfloaten vielleicht nur Probleme macht.
 
Zuletzt bearbeitet:
Hallo!

feh hat gesagt.:
In allen Browsern auser IE werden die beiden gefloateten Div Container nicht so dargestellt wie im IE Brwoser. Im IE Brwoser sieht es aber so asu wie ich es gerne hätte.
Zum Vergrößern anklicken....
Es wird aber in allen Browsern ausser dem IE "richtig" dargestellt, denn es sind mindestens 2 Fehler im Quelltext.
Diese Fehler werden vom IE ignoriert, von den andern Browsern werden die Fehler jedoch auch als solche erkannt und umgesetzt.
Ausserdem ist dein Quelltext nicht grad leicht leserlich.

Tip 1: für eine Anständige Quelltextformatierung sorgen.
Ich würde auch mit Tabulatoren anstatt unzähliger Leerzeichen arbeiten.
Und zwischen benenner: wert; höchstens ein Leerzeichen.
Tip 2: auch bei den DIV's und UL mit ID's und/oder Klassen arbeiten (macht den Body übersichtlicher).
Tip 3: wenn Du trotzdem unbedingt Direktformatierungen vornehmen willst, dann bitte ohne Zeilenumbrüche (könnte zu Fehlinterpretationen führen).

Wenn Du dieses beherzigst, wirst Du sicherlich die beiden Fehler selber finden.
Auch wirst Du dann sicherlich eher Hilfestellung bekommen.

Nimms nicht persönlich.

PS: Dein Switcher hat sich ja schon toll weiter entwickelt. ;)

Gruss Dr Dau

[edit] *hmpf'* da war jemand (zumindest teilweise) schneller [/edit]
[edit2] trotzdem hat Michael auch ein Fehler drinn ;) [/edit2]
 
Zuletzt bearbeitet:
Hallo Dr. Dau,

ich habe meinen Code aufgeräumt. Normalerweise mache ich das seit kurzem sowieso immer mit Tabulator trennen und externen Stylesheets, aber in so Beispielen denke ich manchmal, dass es einfacher und schneller ist, wenn der CSS Code direkt neben dem Tag steht.
PHP: 
Hm, du redest von zwei Fehlern, das wäre ja nicht so schlimm wenn es wirklich nur Fehler sind, daraus kann man ja lernen, immerhin wird diese Vorlage sowieso zu meinem Archiv wandern bei der Mühe die Sie mir bis jetzt schon bereitet hat.
 
Aber ich kann echt keine Fehler entdecken. Falls du sie siehts sag es mir doch bitte.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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;">
 
</body>
</html>
 
Ich mag DIV's nicht, je nach Layout machen sie immer wieder mehr oder weniger Probleme.

Trotzdem kann ich dir sagen dass Du deine DIV's nochmal nachzählen solltest.
Tip: zu jedem <div> gehört auch ein </div> ;)

Den anderen Fehler hat Michael ja schon "ausgebügelt", Du hattest in einer deiner Direktformatierungen 2 ;; nacheinander.

Die Formatierungen in den TAG's machen den Body-Bereich aber nur unnötig unübersichtlich.
Externe CSS müssen nicht sein, langt ja wenn es im Head-Bereich ist, dann dürften später eigentlich auch keine Fehler beim auslagern in eine externe CSS passieren.
Beim direktformatieren muss man sich erst alles "zusammschnippseln" und ID's/Klassen vergeben, dabei passieren ganz sicher Fehler.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück