Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

Quick question regarding CSS

Discussion in 'HTML and CSS Help' started by Poseidon, Feb 3, 2012.

  1. Offline

    Poseidon New Member

    Message Count:
    16
    Likes Received:
    0
    Trophy Points:
    1
    How do I make a box like such, with an image at the top of the box:

    [IMG]


  2. Offline

    Webzarus Well-Known Member

    Message Count:
    3,003
    Likes Received:
    666
    Trophy Points:
    113
    Gender:
    Male
    this is a picture of a table... and although css is great and can do a lot of things....

    this is actually an example of correctly using a table as it is "tabular data" being displayed...

    yes you can add images to the TH tags on a table ( is suspect that is what they did )... slight gradient with a white space at the bottom... when repeated across the cell, looks like it has a white line across the bottom of it...


  3. Offline

    robbydesigns New Member

    Message Count:
    16
    Likes Received:
    2
    Trophy Points:
    3
    Gender:
    Male
    Location:
    Devon, UK
  4. Offline

    Dubai Web Design New Member

    Message Count:
    9
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    pakistan
  5. Offline

    Ronald Roe Well-Known Member

    Message Count:
    1,122
    Likes Received:
    281
    Trophy Points:
    83
    Gender:
    Male
    Location:
    Oklahoma City/Norman/Midwest City
    Wait, you aren't supposed to use tables for everything in the whole site? :bounce:


  6. Offline

    Webzarus Well-Known Member

    Message Count:
    3,003
    Likes Received:
    666
    Trophy Points:
    113
    Gender:
    Male
    The original posted was asking about the attached image... It clearly shows a table for use with tabular data, nothing about "whole site "...


  7. Offline

    Webzarus Well-Known Member

    Message Count:
    3,003
    Likes Received:
    666
    Trophy Points:
    113
    Gender:
    Male
    Had he posted a picture of the site... No way I would have said use tables...

    There is a purpose for tables... If used correctly. I know, some people would develop a CSS solution for this... But in reality, tables were originally designed for tabular data, "small amounts of data in a page" not for page layout.


  8. Offline

    Ronald Roe Well-Known Member

    Message Count:
    1,122
    Likes Received:
    281
    Trophy Points:
    83
    Gender:
    Male
    Location:
    Oklahoma City/Norman/Midwest City
    I know. 'Twas sarcasm, sir. :rolleyes:


  9. Offline

    onlinespider Member

    Message Count:
    81
    Likes Received:
    3
    Trophy Points:
    8
    Gender:
    Male
    if you want to include an image at the top of your table instead of a header you just have to include the images between the <td></td> as such:

    <table>
    <tr>
    <td><img src="source1.jpg" width="20px" height="30"></td>
    <td><img src="source2.jpg" width="20px" height="30"></td>
    <td><img src="source3.jpg" width="20px" height="30"></td>
    </tr>
    <tr>
    <td>some text</td>
    <td>some text</td>
    <td>some text</td>
    </tr>
    </table>

    another alternative is to style the heading of the table with css instead of placing an image to keep page load faster.

    you can also embed the image within the <td></td> tags using css and setting the image as background image with the <td></td> tags.

    i hope this is clear


  10. Offline

    Webzarus Well-Known Member

    Message Count:
    3,003
    Likes Received:
    666
    Trophy Points:
    113
    Gender:
    Male
    Actually it should be <th></th> = table header

    In CSS , just define the th class with a background image once and done ( as stated above ), no need tell the browser to load the image multiple times.


Share This Page