• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Border als Image

Status
Für weitere Antworten geschlossen.
H

Hannes.at

Neues Mitglied
Hallo

Also ich wollte jetzt einer Box dem Border eine Image zuweisen, also hab ich mal gegoogelt und wurde auch fündig.
Code: 
<style type="text/css">
<!--
div.box {background:url(img/box_ww.gif) repeat-y;}
div.box div {background:url(img/box_ee.gif) right repeat-y;}
div.box div div {background:url(img/box_nn.gif) repeat-x;}
div.box div div div {background:url(img/box_ss.gif) bottom repeat-x;}
div.box div div div div {background:url(img/box_nw.gif) left top no-repeat;}
div.box div div div div div {background:url(img/box_ne.gif) right top no-repeat;}
div.box div div div div div div {background:url(img/box_sw.gif) left bottom no-repeat;}
div.box div div div div div div div {background:url(img/box_se.gif) right bottom no-repeat;}

div.inhalt {padding: 10px 10px 15px 10px;}
-->
</style>
</head>
<body>

<div class="box">
     <div>
          <div>
               <div>
                    <div>
                         <div>
                              <div>
                                   <div>
                                        <div class="inhalt">
                                               der inhalt<br />
                                               der inhalt<br />
                                               der inhalt<br />
                                               der inhalt<br />
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>

Ist so eine Div-Suppe die einzige Möglichkeit es so zumachen ??
 
Werbung:
Ein Rahmen als Grafik, mit anderen Images für die Ecken und oben/unten/rechts/links und mit variabler Größe ist eine schreckliche div-Suppe, ja.

CSS3 wird IIRC border-image bieten. Bis dahin: Guten Appetit! :-)
 
Werbung:
Nö. Aber das ändert ja nichts daran, dass das dann in einigen der heutigen Browsern trotzdem noch nicht funktioniert.
 
Hannes.at schrieb:
Hallo

Also ich wollte jetzt einer Box dem Border eine Image zuweisen, also hab ich mal gegoogelt und wurde auch fündig.

Ist so eine Div-Suppe die einzige Möglichkeit es so zumachen ??
Zum Vergrößern anklicken....

Hallo Hannes,

das hängt ein bisschen davon ab, wie aufwändig Dein Rahmen ist.
Ich hatte neulich einen vierfarbigen Rahmen, da wäre mir die Dateigröße des Bildes
zu groß geworden, daher hab ich da lieber div-Suppe gemacht.

Sonst geht es aber auch mit nur einem Bild und ein paar divs weniger.
Schau mal hier ins CSS: Treffen und Lernen e.V.

Grüße
Bernhard
 
Aja also ich hab das jetzt so gelöst.

Code: 
<table border="0" cellpadding="0" cellspacing="0">
<td style="background-image:url(../images/brd_ou.gif);width:139px;height:10px;"></td>
<tr>
<td style="background-image:url(../images/brd_bg_l.gif);width:139px;padding-top: 1px; padding-right: 0px; padding-bottom: 1px; padding-left: 12px;"><?php include("counter.php"); ?></td>
</tr >
<td style="background-image:url(../images/brd_ou.gif);width:139px;height:10px;"></td>
</table>

Wobei bei diesem Beispiel rechts ein "Loch" ist weil ich es ja am Pagerand intergrieren wollte b.z.w auch gemacht habe.
Ob es jetzt so am besten is weiss ich auch nicht, aber so eine div-Suppe schien mir doch etwas zukomplex. :)
 
Werbung:
Du hast es halt fälschlicherweise als Tabelle ausgezeichnet und HTML mal wieder zu Layou/Designzwecken missbraucht. Dem ist die div-Suppe auf jeden Fall vorzuziehen, weil Du hier schlicht keine tabellarischen Daten hast.
 
Ich kann mir nicht vorstellen, daß 9 Blockelemente <div> nötig sind.
Tabellenzellen als Träger für Grafiken sind auch Quark.

Bei Fragen zu background-image solltest du immer ein online-Beipiel zeigen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben