Daniel Steinmann: DIV-Positionierungs-Problem CSS-basiertes Layout

Beitrag lesen

  1. 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>