DIV-Positionierungs-Problem CSS-basiertes Layout

[Daniel Steinmann]

Hallo zusammen

Ich habe da ein dynamisches, CSS-basiertes und XHTML-konformes Layout erstellt und hänge an einem mir unerklärlichen Problem.

Witzigerweise funzt der Header, welcher genau gleich erstellt ist, einwandfrei. Die 2 Inhalts-DIV (LeftPane und ContentPane) im contentwrap sollten nebeneinander und nicht untereinander stehen.

Die Breite der DIV wird mit einem Javascript gesetzt, was aber auch beim Header und Hintergrundbild der Fall ist.

Ich kann nicht erkennen was ich falsch mache.

Danke und Gruss
Daniel

Auszug aus dem CSS:

#headerwrap {
 position: relative;
 padding: 0;
 height: 6em;
 z-index: 2;
}
#headertitle {
 position: relative;
 clear: left;
 float: left;
 font-size: 0.6em;
 z-index: 2;
}
#headernav {
 position: relative;
 z-index: 2;
 text-align: center;
 margin: auto;
}
#contentwrap {
 position: relative;
 padding: 20px;
 z-index: 2;
 height: auto;
 }
#LeftPane {
 position: relative;
 clear: left;
 float: left;
 z-index: 2;
}
#ContentPane {
 position: relative;
 padding: 0;
 z-index: 2;
 margin: auto;
}

Auszug aus dem HTML:

<div id="middlewrap">
 <div id="headerwrap">
  <div id="headertitle">Architektur und CAD<br />Postfach 6089<br />2500 Biel 6<br />Tel [phone]<br /> Mob [phone]<br />[e-mail]</div>
  <div id="headernav"><dnn:MENU runat="server" id="dnnMENU" menualignment="Center" /></div>
 </div>
 <div id="contentwrap">
  <div id="LeftPane" runat="server"></div>
  <div id="ContentPane" runat="server"></div>
 </div>
</div>

Unter der angegebenen URL kann man das Beispiel sehen.

[Struppi]

Witzigerweise funzt der Header, welcher genau gleich erstellt ist, einwandfrei. Die 2 Inhalts-DIV (LeftPane und ContentPane) im contentwrap sollten nebeneinander und nicht untereinander stehen.

1. Warum läßt du deine Seite im Quirksmode darstellen?
2. Warum positionierst du die Elemente? Das ist für so ein einfaches Layout nicht nötig.

In selfhtml gibt es einige Beispiel für mehrspaltige Layouts, da müßte sowas wie du willst auch dabei sein.

Struppi.

[Daniel Steinmann]

1. Warum läßt du deine Seite im Quirksmode darstellen?

Ich bin der Meinung, dass dies genau richtig ist, gemäss den Anweisungen rund um XHTML-Skinning von DotNetNuke. Aber in Sachen Quirksmode & Co. bin ich mir jeweils nicht ganz sicher.

2. Warum positionierst du die Elemente? Das ist für so ein einfaches Layout nicht nötig.

Wie kann ich das dynamische Background-Image sonst in der Höhe dem inneren Rahmen (der innere Rahmen ist auch dynamisch, die Grösse ist von der Auflösung abhängig) anpassen?

In selfhtml gibt es einige Beispiel für mehrspaltige Layouts, da müßte sowas wie du willst auch dabei sein.

Die Beispiele kenne ich, sonst wär ich gar nicht erst soweit gekommen ;-)

Danke und Gruss
Daniel

[Daniel Steinmann]

2. Warum positionierst du die Elemente? Das ist für so ein einfaches Layout nicht nötig.
   Wie kann ich das dynamische Background-Image sonst in der Höhe dem inneren Rahmen (der innere Rahmen ist auch dynamisch, die Grösse ist von der Auflösung abhängig) anpassen?

Sorry, das ist natürlich aus dem Auszug nicht zu erkennen, hier ein grösserer CSS- und HTML-Ausschnitt (unter der angegebenen URL ist das Beispiel zu betrachten):

Body {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin:0;
 padding:1.2em;
 background-color: #E6E6E6;
 color:#00000;
 font-size: 20px;
}
#wrap {
 position: relative;
 margin: 0;
 padding: 0;
 height: 100%;
 z-index: 2;
}
#topwrap {
 position: relative;
 border-bottom: 1px solid #808080;
 z-index: 2;
}
#topmiddle {
 position: relative;
 margin: 0em 1.4em 0em 1.4em;
 border-left: 1px solid #808080;
 border-right: 1px solid #808080;
 z-index: 2;
 font-size: 1.2em;
}
#middlewrap {
 position: relative;
 margin: 0em 1.7em 0em 1.7em;
 border-left: 1px solid #808080;
 border-right: 1px solid #808080;
 z-index: 2;
}
#background {
 position: absolute;
 clear: both;
 margin: 1.45em 25% 1.45em 25%;
 z-index: 1;
 width: 50%;
}
#background img {
 height: 100%;
 width: 100%;
}
#headerwrap {
 position: relative;
 padding: 0;
 height: 6em;
 z-index: 2;
}
#headertitle {
 position: relative;
 clear: left;
 float: left;
 font-size: 0.6em;
 z-index: 2;
}
#headernav {
 position: relative;
 z-index: 2;
 text-align: center;
 margin: auto;
}
#contentwrap {
 position: relative;
 padding: 20px;
 z-index: 2;
 height: auto;
 }
#LeftPane {
 position: relative;
 clear: left;
 float: left;
 z-index: 2;
}
#ContentPane {
 position: relative;
 padding: 0;
 z-index: 2;
 margin: auto;
}
#bottomwrap {
 position: relative;
 padding: 0;
 border-top: 1px solid #808080;
 z-index: 2;
}
#bottommiddle {
 position: relative;
 margin: 0em 1.7em 0em 1.7em;
 border-left: 1px solid #808080;
 border-right: 1px solid #808080;
 text-align: center;
 z-index: 2;
}

<div id="background"><img src="<%= SkinPath %>starchag_bg_430x510.jpg" border="0" height="100%" width="100%" /></div>
<div id="wrap">
 <div id="topwrap">
     <div id="topmiddle">st.arch AG</div>
 </div>
 <div id="middlewrap">
  <div id="headerwrap">
      <div id="headertitle">Irgend ein Text</div>
      <div id="headernav"><dnn:MENU runat="server" id="dnnMENU" menualignment="Center" /></div>
  </div>
  <div id="contentwrap">
   <div id="LeftPane" runat="server"></div>
   <div id="ContentPane" runat="server"></div>
  </div>
 </div>
 <div id="bottomwrap">
     <div id="bottommiddle">
   <dnn:USER runat="server" id="dnnUSER" />&nbsp;&nbsp;
   <dnn:LOGIN runat="server" id="dnnLOGIN" />&nbsp;&nbsp;
   <dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" />
     </div>
 </div>
</div>

[Daniel Steinmann]

Problem gelöst, DNN setzt mir unflätiger Weise ein dnn_ vor die DIV ID, jetzt klappt es einwandfrei.