Runde Ecken und Grid-System

[lomex]

Hallo,

ich möchte auf einer Seite ein Grid-System und runde Ecken / Rahmen einsetzen. Da die Artikel ja nicht nur in der Breite, sondern auch in der Länge sehr variable sind, habe ich die mod_article für mich angepasst (im templates-Ordner). Ich habe mich dafür entschieden, die box-Klasse jedesmal dem Artikel manuell anzugeben, um offen für andere Hintergründe zu sein.

Bei den Artikeln klappt es auch wunderbar. Nur für Inhaltselemente zerschießt es mir ständig das Layout. Sollte ich mir vielleicht für die Inline-Grids eigene Stylesheets bauen?

Hat da draußen vielleicht jemand einen Tipp für mich, wie ich die ganze Sache angehen kann? Bin kurz davor die runden Ecken (bzw. Rahmen) rauszuschmeißen.

So sieht es bis jetzt aus:
www.webdesign-werne.de/jugendhilfeindex.php/stiftung.html

Inline-Grid geht nicht
Artikel-Grid geht.

mod_article:

<!-- Rahmen oben (Begin) -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
 <div class="box2">  <!-- box = Rahmen links, box2 = Rahmen rechts -->
      <div class="oben">
          <div class="ol"></div>
          <div class="or"></div>
      </div>
<!-- Rahmen oben (Ende) -->
<?php if ($this->printable): ?>
<!-- indexer::stop -->
<div class="pdf_link">
<a href="<?php echo $this->href; ?>" rel="nofollow" title="<?php echo $this->title; ?>"><?php echo $this->label; ?></a>
</div> <!-- pdf_link -->
<!-- indexer::continue -->
<?php endif; ?>
   <div class="boxinnen">
      <?php echo $this->contentElements; ?>
      <?php if ($this->backlink): ?>
      <p class="back"><a href="<?php echo $this->backlink; ?>" title="<?php echo $this->back; ?>"><?php echo $this->back; ?></a></p>
      <?php endif; ?>
   </div>  <!-- /boxinnen -->
</div>  <!-- /box2  -->
<div class="unten">
   <div class="ul"></div>
   <div class="ur"></div>
</div>
         <!-- Rahmen unten (Ende) -->
</div>

rahmen - CSS:

.box{background: url(tl_files/jugendhilfe/border_left.gif) repeat-y #ffffff left;}
.box .box2{background: url(tl_files/jugendhilfe/border_right.gif) repeat-y right;}
.box .oben{width:auto;height:20px;background: url(tl_files/jugendhilfe/border_top.gif) repeat-x;}
.box .ol{width:20px;height:20px;float:left;background: url(tl_files/jugendhilfe/border_top_left.gif) top left;}
.box .or{width:20px;height:20px;float:right;background: url(tl_files/jugendhilfe/border_top_right.gif) top right;}
.box .ul{width:20px;height:20px;float:left;background: url(tl_files/jugendhilfe/border_bottom_left.gif) bottom left;}
.box .ur{width:20px;height:20px;float:right;background: url(tl_files/jugendhilfe/border_bottom_right.gif) bottom right;}
.box .unten{width:auto;height:20px;background: url(tl_files/jugendhilfe/border_bottom.gif) repeat-x;}
.box .boxinnen{margin-top:-10px;padding:10px 15px 0 15px;}

Gruß
Oliver (lomex)

[MacKP]

Hallo lomex,
setzt doch mal den Sprachenfallback auf deiner Seite.
So bekomme ich nur 'Page not found'.

Danach kann man mal weiter sehen.

Viele Grüße

[sq......]

Hallo lomex,
setzt doch mal den Sprachenfallback auf deiner Seite.
So bekomme ich nur 'Page not found'.

Danach kann man mal weiter sehen.

Viele Grüße

ist nur ein fehler im link > http://www.webdesign-werne.de/jugend.../stiftung.html

[ronnyjohn]

Hi squidi

Versuch es mal damit, könnte klappen.

.box .boxinnen {
float:left;
padding:0 15px;
}

.box .unten {
background:transparent url(tl_files/jugendhilfe/border_bottom.gif) repeat-x scroll 0 0;
float:left;
height:20px;
width:100%;
}

[lomex]

Danke erstmal für die Tipps. Hier die Lösung:

Zunächst einmal hatte ich vergessen, als letztes Grid-Inhaltselement ein leeres Clearing einzubauen.
Z.B.
- vier Inhaltselement mit der Klasse g3
- ein Inhaltselement (html) mit <div style="clear:both"></div>

Dann hatte ich noch das Problem, dass die Spaltenbreiten angepasst werden mussten, bedingt durch den Rahmen, der an den Seiten 15px weggenommen hat.

Also habe ich mir weitere Grid-Elemente für die Inhaltselemente erstellt. Diese haben dann in meinem Fall 30 Pixel weniger. gi3 statt 220px 190px usw.

Damit die Inhalts-Grids auch passend über Artikel-Grids liegen (der Text in einer Spalte), habe ich zu der Klasse gr noch eine gir (Grid-Inhalt-Rechtsabstand) mit 50px erstellt. 20px + die 30px die ich dem Grid weggenommen habe.

Die gi3 etc müssen natürlich auch am Anfang zu den anderen Grid-Elementen hinzugefügt werden, wo das float:left, display:inline, margin-left: 10px, margin-right: 10px zugeordnet werden.

War das halbwegs verständlich? Vielleicht kann das ja mal einer gebrauchen.

Hier das Endergebnis:
http://webdesign-werne.de/jugendhilf.../stiftung.html