HG-Bilder werden nicht angezeigt

[rapado]

Hallo,

bei einer Umstellung von Tabellen-Design auf CSS-Layout kämpfe ich mit folgendem Problem:
eine Box mit Überschriftleiste und variablem Inhalt soll so wie sie vorher ausgesehen hat, mit CSS-Layout auch wieder aussehen.
Es existieren 9 Hintergrundbilder für die verschiedenen Teile der Box, jeweils linkes, mittleres und rechtes HGB für die Bereiche Kopfleiste, Inhalt und Fußleiste der Box.
Mit Div's und float habe ich das Ganze so hinbekommen, dass es für die Kopf- und Fußleiste prima funktioniert. Lediglich für den Inhaltsbereich werden die HGB nicht angezeigt.
Den Grund dafür habe ich auch schon herausgefunden, es ist die fehlende Höhenangabe für den Inhaltsbereich. Sowie ich ein "height: xxpx;" abgebe, werden für die Höhe xx die HGB angezeigt.
Da der Inhalt aber dynamisch ist, kann ich mit einer festen Höhenangabe nicht leben.
Weiss jemand, wie man das Problem umgehen kann ?

Nachtrag:
Dieser Effekt tritt bei allen Browsern ( IE6/7, NS7/8 und FF 1.8/2.02) gleichermaßen auf.

[Laus]

Hallo

Such mal bei Google nach Haslayout. Solange du deinem Inhaltsbereich keine Höhe gibst hat es auch kein Layout und der HG wird deshalb ignoriert.
Du kannst dir mit min-height behelfen was alle modernen Browser verstehen, außer natürlich IE 6 und älter
bei denen wendest du den * html Hack an also

Code: Alles auswählen

* html #Name des Inhaltsdivs {height:soundsoviele px;}

welches nur der IE versteht.

Gruß Xaver

[rapado]

Hallo Xaver,

wie schon in meinem Nachtrag geschrieben, habe ich das Problem bei allen Browsern und nicht spezifisch beim IE.
Ein Test mit min-height und max-height hat auch nicht zum Erfolg geführt.
Ich habe folgende css-Datei:

Code: Alles auswählen

#api_boxes_main_container{
   margin: 0;
/*   min-width: 10em; */
   width: 210;
}

* html #api_boxes_main_container{
   /* \*/
   word-wrap: break-word;
   /* verhindert float-Problem beim IE-Win */
}

#api_boxes_outer_container{
   border-left: 20px solid #00ffff;
   border-right: 20px solid #ffff00;
   z-index: 1;
}

#api_boxes_inner_container{
   margin: 0 -0px;
   width: 170px;
   background-color: #FF00FF;
   z-index: 2;
}

#api_boxes_wrap{
   float: left;
   margin: 0 -40px 0 0px;
   width: 190px;
   z-index: 3;
}

#api_boxes_head_left, #api_boxes_head_center, #api_boxes_head_right, #api_boxes_middle_left, #api_boxes_middle_center, #api_boxes_middle_right, #api_boxes_foot_left, #api_boxes_foot_center, #api_boxes_foot_right, #api_boxes_wrap{
   overflow: visible;
   position: relative;
}

#api_boxes_head_center, #api_boxes_middle_center, #api_boxes_foot_center{
   float: right;
   margin: 0px 20px 0 0px;
   width: 170px;
   z-index: 6;
}

#api_boxes_head_left, #api_boxes_middle_left, #api_boxes_foot_left{
   float: left;
   margin: 0 0px 0 -20px;
   width: 20px;
   z-index: 5;
}

#api_boxes_head_right, #api_boxes_middle_right, #api_boxes_foot_right{
   float: right;
   margin: 0 -20px 0 0px;
   width: 20px;
   z-index: 4;
}

#api_boxes_head_center{
  height: 28px;
  background-image: url(img/api_box_head_center.gif);
}

#api_boxes_head_left{
  height: 28px;
  background-image: url(img/api_box_head_left.gif);
}

#api_boxes_head_right{
  height: 28px;
  background-image: url(img/api_box_head_right.gif);
}

.api_boxes_head_center{
   font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
   color: #000000;
  text-align: left;
}

.api_boxes_head_center_space{
   font-family: Verdana, Arial, sans-serif;
  font-size: 5px;
  font-weight: bold;
   color: #000000;
  text-align: left;
}

.api_boxes_middle_center{
   font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
   color: #000000;
  text-align: left;
}

#api_boxes_middle_center{
   min-height: 1px;
  background-image: url(img/api_box_middle_center.gif);
}

#api_boxes_middle_left{
   min-height: 1px;
  background-image: url(img/api_box_middle_left.gif);
}

#api_boxes_middle_right{
   min-height: 1px;
  background-image: url(img/api_box_middle_right.gif);
}

#api_boxes_foot_center{
  height: 23px;
  background-image: url(img/api_box_foot_center.gif);
}

#api_boxes_foot_left{
  height: 23px;
  background-image: url(img/api_box_foot_left.gif);
}

#api_boxes_foot_right{
  height: 23px;
  background-image: url(img/api_box_foot_right.gif);
}



und den folgenden html-Code:

Code: Alles auswählen

<div id="api_boxes_main_container">
   <div id="api_boxes_outer_container">
      <div id="api_boxes_inner_container">
         <div id="api_boxes_wrap">
            <div id="api_boxes_head_center" class="api_boxes_head_center">
               <div class="api_boxes_head_center_space"><br /></div>
               {#heading_categories#}
            </div>
            <div id="api_boxes_head_left"></div>
         </div>
         <div id="api_boxes_head_right"></div>
         <span class="api_float_cleaner"></span>

         <div id="api_boxes_wrap">
            <div id="api_boxes_middle_center" class="api_boxes_middle_center">{$BOX_CONTENT}</div>
            <div id="api_boxes_middle_left"></div>
         </div>
         <div id="api_boxes_middle_right"></div>
         <span class="api_float_cleaner"></span>

         <div id="api_boxes_wrap">
            <div id="api_boxes_foot_center"></div>
            <div id="api_boxes_foot_left"></div>
         </div>
         <div id="api_boxes_foot_right"></div>
         <div class="api_float_cleaner"></div>
      </div>
   </div>
</div>


Vielleicht kannst Du ja darin etwas sehen, was mir weiter hilft.

Gruß Ralph

[Laus]

Also im Code sehe ich jetzt keine Fehler nur das das eine furchtbare Divsuppe ist. Kannst du das irgendwo online stellen damit man sich das mal ansehen kann. Mit den vielen HG Bildern ist das nämlich schwer nach zu vollziehen ohne die Bilder.

[rapado]

Hallo Xaver,

hab es mal online gestellt. Ist zu sehen unter:

http://www.omega-soft.de/api_public_testshop/

Die erste Box oben links mit den farbigen Balken ist das Problemkind. Die übrigen Boxen sind noch in der alten Version mit Tabellen gemacht, sollen aber alle auf tabellenloses Design umgestellt werden.

[Laus]

Ich merke schon du kommst aus dem Lager mit Tabellendesign und versuchst dies nun in CSS umzusetzen.

Mach das ganze doch viel einfacher. Soweit ich sehe verändert sich die Breite der Boxen die du erstellen willst nicht. Lege also die boxen wie beim normalen Seitenaufbau an. Du brauchst dafür nur 3, wenn du etwas flexibler sein willst 4 Divs.

Beispiel mit 4 Divs

Code: Alles auswählen

<div class="aussen">
    <div class="head"><h4>Überschrift</h4></div>
    <div class="inhalt">Liste mit Inhalt</div>
    <div class="foot"></div>
</div>

Dazu 3 HG Bilder, für der head und den foot die kompletten Bilder deiner jeweils 3 div die du dafür verwendest, und für den Inhalt ein 3-4px hohes bild das den linken und rechten rand zeigt und als Hintergrund vertikal gekachelt wird.

Ach ja die classen verwende ich deshalb das man nicht jedes mal alles neu schreiben muss, da id s ja immer nur einmal verwendet werden dürfen.

Ich hoffe jetzt mal du verstehst was ich meine.

[rapado]

Hallo Xaver,

zunächst mal vielen Dank für Deine Hilfe.
Sicher verstehe ich was Du meinst, aber die Breite der Boxen ist nur für diese Test-Seite fix, muß aber für die eigentliche Zielanwendung variabel sein.
Das war der Grund, warum ich die einzelnen HG-Grafiken jeweils dreigeteilt habe.
Zur DIV-Suppe: Du hast natürlich Recht, dass ich aus dem Lager der Tabellen-Junkies komme und habe bislang ein Tabellendesign einem CSS-Design immer vorgezogen, weil zu den Zeiten, als ich mit dem Webdesign begonnen habe, CSS noch nicht existierte und man doch immer das vorzieht, das einem bekannt und vertraut ist. Immerhin bin ich aber zwischenzeitlich mit CSS auch schon so vertraut, dass ich die meisten Aufgaben lösen kann.

[Laus]

Schau mal -->hier<--
Vor allem die Artikel
More Snazzy Borders » 22-07-2006
Three curved corners » 01-01-2007 und
Four curved corners » 01-01-2007
dürften für dich interessant sein.

[rapado]

Hallo Xaver,

vielen Dank für Deine Mühe, ich denke ich werde damit ein Stück weiter kommen.