✔ Div Layout - Hintergrundproblem

[Maik]

Hi und Sorry, dass ich mich erst heute wieder zu Wort melde.

Also, du hast dich da mit dem verschachtelten DIV-Konstrukt etwas verhaspelt und das schliessende </div>-Tag von #container_header erst nach #container_content gesetzt.

Versuch es daher mal mit diesem Markup:

<div id="wrapper">
     <div id="container_outside">
          <div id="container_header">
               <div id="header_top_left"></div>
               <div id="container_header_right">
                    <div id="header_top_right"></div>
                    <div id="header_center_right"></div>
                    <div id="header_bottom_right"></div>
               </div><!-- // #container_header_right -->
          </div><!-- // #container_header -->
          <div id="container_content">
               <div id="navi_bottom"></div>
               <div id="content_top"></div>
               <div id="content"></div>
          </div><!-- // #container_content -->
     </div><!-- // #container_outside -->
     <div id="content_bottom"></div>
     <div id="footer">
          <div id="footer_inner"></div>
     </div><!-- // #footer -->
</div><!-- // #wrapper -->

 

[hela]

Hallo sente,

ich habe dein Layout mal nach einem gängigen Muster umgestaltet und hier angehängt. Das Strickmuster ein kleines bisschen anders als in Maiks Tutorial, aber die Funktion die gleiche. Ich habe m.E. unwichtige Teile aus deiner Vorlage herausgenommen, aber dafür weitgehendst die ID-Namen beibehalten, so dass du dich zurecht finden müsstest. Vielleicht hilft es dir weiter.

@Maik: Das war ja fast synchron!

 

[sente]

Hi, erstmal möchte ich mich bedanken.
Danke Hela für die Arbeit, jetzt versteh ich es wenigstens.

Ich dachte ich habe den Thread als erledigt abgehakt?
Weil ich mir vorgestern mal überlegt habe, wieso ich es überhaupt so umsetze und bin draufgekommen, dass der Content sowieso immer groß genug ist und ich den Footer einfach darunter schieben kann.

Soweit passt jetzt auch alles (bis darauf, dass der gesamte Inhalt noch eine Baustelle ist. ) nur habe ich im IE6 zwischen Header-div bzw. zwischen content_top zu content_center und content_bottom zu content_center einen kleinen weisen Strich drinnen, dachte zuerst, dass es an der Interpretation der Marginwerte liegt, aber das war es scheinbar doch nicht.

Habt Ihr einen rat was es sein könnte?
Danke u. mfG
Christof

 

[Maik]

Hi sente,

der IE reserviert in den 10px hohen DIVs einen Platzhalter für eine möglich enthaltene Zeichenkette, die üblicherweise etwas höher ausfällt, und er deshalb die beiden Elemente um drei oder vier Pixel höher darstellt.

div#content_top{
	width: 994px;
	height: 10px;
	background-image: url(images/Content_Top.jpg);
	background-repeat: no-repeat;
	background-position: left;
	overflow:hidden;
}

div#content_bottom{
	width: auto;
	height: 10px;
	margin-top: 0px;
	background-image: url(images/Content_Bottom.jpg);
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	margin-right: auto;
	overflow:hidden;
}

Die zusätzliche overflow:hidden-Angabe veranlasst ihn, das Element in der gewünschten Höhe darzustellen.

 

[sente]

Hi,
super, danke vielmals - man lernt wirklich nie aus und immer nur durch Fehler.

MfG

 

[sente]

Hallo nochmal.
Das hat jetzt oben super geklappt, jedoch zwischen content_bottom und content_center ist noch ein kleiner Spalt und ich habe keine Ahnung wieso. Beide Elemente sind mit visibility: hidden; deklariert. Kann das vl. am direkt darüberliegenden p-Tag liegen?

Und im IE7 hab ich jetzt oben zwischen Header und navi_bottom einen Spalt, wenn ich auf die Seite Leistungen gehe. Im IE7... ! Oo
MfG

 

[Maik]

Im Selektor #content_bottom entdecke ich keine overflow:hidden-Eigenschaft.

//edit: auf der "Leistungen"-Seite ist zu Beginn des #content-DIVs ein zweites DIV mit der Klasse .clearfix enthalten, das das nachfolgende .clearfix-DIV umschliesst. Möglicherweise ist dies der Grund für die Lücke.

 

[sente]

Im content_bottom hab ich die Eigenschaft jetzt drinnen und habe im IE7 auch nun zusätzlich unten (zwischen content_bottom und content_center) einen spalt.

Und bei Leistungen kann es nicht an den inneren Divs liegen, da diese im content integriert sind und der Spalt aber zwischen navi_bottom und header_left/right auftritt. :/

Ich denke es hängt irgendwie damit zusammen, dass bei allen Punkten außer Home im navi_bottom ein Text (Link) steht. Der Spalt tritt auch bei allen Menupunkten auf, wo ein Text eben da drinnen steht.
Übrigends hab ich die Spalten im IE7 erst, seit ich mit dem visibility: hidden; herumgepfuscht habe. :suspekt: Dafür stimmts jetzt so halbwegs im IE6. :suspekt:

Irgendweine Idee?

MfG

 

[Maik]

Dann nimm zunächst mal wieder alle überflüssigen overflow:hidden-Deklarationen heraus, denn sie werden, wie von mir vorhin dokumentiert, nur für die beiden DIVs #content_top und #content_bottom benötigt.

Wenn dies zu keiner Verbesserung führt, wird man weitersehen.

 

[sente]

Hallo, jetzt hab ichs nur noch in content_top und content_bottom drinnen.
Resultat ist, dass ich im IE7 unten zwischen content_bottom und content_center einen spalt habe, dafür oben keinen mehr.
Jedoch im IE6 habe ich nun einen unten und oben unter dem Logo (wo navi_bottom anfängt, es waren ja 3 Spalten und nicht nur 2. ).

MfG