Boxjes in tabel, hoe doe je dat met CSS en layers?

[Devilfish]

Eerst maar het probleem:

"Vroeger" deed ik het zo met een tabel:

code:

<table width="245"  height="200"  border="0" cellspacing="0" cellpadding="0">

  <tr> 

    <td width="14" valign="bottom" background="/images/boxen/2/bhoek_l.gif"><font size="-3">&nbsp;</font></td>

    <td background="/images/boxen/2/bmidden.gif"><font size="-3">&nbsp;</font></td>

    <td width="16" background="/images/boxen/2/bhoek_r.gif"><font size="-3">&nbsp;</font></td>

  </tr>

  <tr valign="top"> 

    <td height="185" background="/images/boxen/2/rand_l.gif">&nbsp;</td>

    <td bgcolor="ffffff">

    <div align="center">Inhoud van de box</div>

</td>

    <td background="/images/boxen/2/rand_r.gif">&nbsp;</td>

  </tr>

  <tr> 

    <td height="16" background="/images/boxen/2/ohoek_l.gif">&nbsp;</td>

    <td background="/images/boxen/2/omidden.gif">&nbsp;</td>

    <td background="/images/boxen/2/ohoek_r.gif">&nbsp;</td>

  </tr>

</table>

Of wel een vakje met daaromheen een rand van plaatjes, nu probeer ik dit om te zetten naar css:

code:

  <div id="content" class="content"> 
    <div id="topborder">
      <div id="borderleft">[img]"images/box/topleft.gif"[/img]</div>
      <div id="borderright">[img]"images/box/topright.gif"></div>
[/img][img]"images/box/top.gif"[/img]</div>
    </div>
    <div id="middleborder">
      <div id="middleborderleft">&nbsp;</div>
      
Inhoud cell

    <div id="middleborderright">&nbsp;</div>
    </div>
    <div id="bottomborder">
      <div id="borderleft">[img]"images/box/bottomleft.gif"></div>
[/img][img]"images/box/bottomright.gif"></div>
[/img][img]"images/box/bottom.gif"[/img]</div>
    </div>
  </div>

met de volgende stylesheet:

code:

<style media="all" type="text/css" title="MOG Discount">
body { margin: 0px; background-color: #1465B2;}
.content { margin: 0px; position:absolute; left:160px; top:180px; width:630px; z-index:7; height: 10px; padding: 0px; }
DIV {margin: 0px;padding: 0px;}

#lijn1{position:absolute; left:900px; top:0px; width:2px; height:100%; 
z-index:6; background-color: #FFFFFF; layer-background-color: #FFFFFF;}
#lijn2 {position:absolute; left:0px; top:168px; width:100%; height:1px; z-index:6;
 background-color: #FFFFFF; layer-background-color: #FFFFFF;font-size:0px;}

#topborder {background-image: url(images/box/top.gif); margin: 0px;padding: 0px;}
#middleborder {margin: 0px;padding: 0px;}
#bottomborder {background-image: url(images/box/bottom.gif);margin: 0px;padding: 0px;}

#topimg {position:absolute; left:0px; top:0px; width:900px; 
height:168px; z-index:5}
#topbg1 {position:absolute; left:0px; top:0px; width:100%; 
height:45px; z-index:4; background-color: #3C80C5; layer-background-color: #3C80C5; border: 0px none #000000;}
#topbg2 {position:absolute; left:0px; top:45px; width:100%; height:124px; z-index:3; 
 background-color: #1465B2; layer-background-color: #1465B2; border: 0px none #000000;}

#borderleft{float:left;margin: 0px;padding: 0px;border:0px;}
#borderright{float:right;margin: 0px;padding: 0px;}
#bordermiddle {
    margin: 0px;
    padding: 0px;
    
}

#middleborder {
    width:100%;
    margin: 0px;
    padding: 0px;

} 
#middleborderleft {
    margin: 0px;
    padding: 0px;
    border:0px;
    width:10px;
    background-image: url('images/box/left.gif');
    height:100%;
    left: 0px;
    position:relative;
    z-index:10;
    display: inline;
}
#middleborderright {margin: 0px;padding: 0px; width:10px; 
background-image: url('images/box/right.gif');height:100%;right: 0px;
    position:relative;z-index:10; display: inline;}
#middlebordermiddle {margin: 0px;padding: 0px; background-color: #FCFEAC;
 layer-background-color: #FCFEAC; position:relative; left:10px;}


</style>

echter krijg ik het niet voor elkaar om de middelste balk goed te krijgen.

IE gaat of de 3 div's naast elkaar zetten, of wanneer de inhoud van de cell groter wordt dan een regel laat ie de linker en rechter border niet door lopen. Daar je met CSS geen twee backgrounds kunt op geven (bv eeen aan de rechter kant en een aan de linker kant) lukt het me niet om die mooi te krijgen. Met een float:right en float:left lukt het niet, dan kijkt ie niet naar de hoogte van de middelste cell.

Iemand ideeën hoe ik dit voor elkaar kan krijgen? Een linkje naar een pagina waar ook een boxje hebben gemaakt met css en layer's mag natuurlijk ook.

Een voorbeeld van de pagina kun je hier bekijken (Sorry voor de spam) http://www.mogdiscount.nl/index.php

[Clay]

het makkelijkste is om het anders te doen

Je hebt een box die in de hoogte rekt, en een vaste breedte heeft. de boven- en onderkant moeten met een image afgewerkt worden. Dan denk ik aan een "box" die een header heeft, een content deel, en een footer. dus zoiets:

HTML:

<div container, is netjes>
   <div>header image met hoeken</div>
   <div>content met background die tilet</div>
   <div>footer image met hoeken</div>
</div>

Pas als die ook in de breedte mee moet reken zou ik de hoekjes los gaan knippen en in header en footer met floats gaan werken. Houd het liever simpel.

[Devilfish]

Ik hou het liever uitbreidbaar, want ik wil waarschijnlijk later die website uitbereiden met meer van dat soort boxjes. dan zet ik die boxen als functie in php.

[Verwijderd]

Een techniek die ik van http://doxdesk.com heb gejat:

HTML:

  <div class="top"><div class="left"><div class="right"></div></div></div>
  <div class="main"><div class="left"><div class="right">
 hier je content
</div></div></div>
 <div class="bottom"><div class="left"><div class="right"></div></div></div>

en dan de css ervoor:

HTML:

.top                 { margin: 0 32px 0    192px; }
.bottom              { margin: 0 32px 32px 192px; }
.main                { margin: 0 32px 0    192px; }
.wide, .open, .close { margin: 0 32px 0    64px;  }
.main .right, .wide .right   { padding: 6px 20px; }
.top  .right, .bottom .right { height: 16px; }

Dat is ongeveer de essentie van de css. Padding en margin is afhankelijk van wat jij wil en hoe groot de hoekjes zijn die je wil. Ook nog een beetje letten op background-positiion.

Daarnaast is http://albin.net/css/roundedCorners/ ook een bekende. Die doet het iets anders, maar het schijnt goed te worden verhapgestukt door veel browsers.

[Willem]

Devilfish, de "divjes"- manier is uitbreidbaar.

[crisp]

hier nog een aardig voorbeeldje

[Mr_Kite]

crisp schreef op 07 May 2003 @ 09:02:
hier nog een aardig voorbeeldje

heel aardig voorbeeldje inderdaad

[Devilfish]

het is inmiddels gelukt met het voorbeeld van http://albin.net/css/roundedCorners/examples.html . Resultaat kun je op de url die ik hierboven al gegeven heb bekijken.