CSS prob

Discussion in 'Web Design & Coding' started by Khayman, Jul 16, 2004.

  1. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    trying to replicate the following using CSS (so easy in tables)

    Code:
    <table cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/leftbar.png" width="68" height="20" ></td>
    <td style="background-color:#2E2B24;" width="100%" height="20"></td>
    <td><img src="images/rightbar.png" width="76" height="20"></td>
    </tr>
    </table>
    
    so basicaly i want <picture><row of colour><picture>

    I can get it mostly working but the colour row spans underneath the pictures, and part of the pictures are transparent. i need the colour row to star and stop at the end/begining of each picture (and all to be inline)
     
  2. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    nice cheat way :p

    Code:
    .table { display:table; }
    .table .tr { display:table-row; }
    .table .tr .td { display:table-cell; }
    then just replace the normal <table> <tr> <td> with <div class="table"> <div class="tr"> <div class="td"> respectively

    what you can do though is

    <img src="my.picture.jpg" alt="My Picture" class="picture1">
    <img src="my.picture2.jpg" alt="My Picture2" class="picture2">

    Code:
    .picture1 { border-right:5px solid #2E2B24; }