SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How would you code this?

    So I have a question regarding the markup and CSS of a project. How would you code this screenshot? I think a table is the way to go but the Problem is the horizontal background image (with the shadows). As you might know you cant give a <tr /> a background image. So I have two options:

    A) slice the horizontal background of each <tr> into small images for each <td>

    or

    B) forget about the table and use <dl> but that would increase the markup and I don’t really like the idea

    What do you suggest?

    Here is the screenshot: http://storage.maximilianschoening.c...eny_at2323.jpg

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    If the parts always have the same height you could slice one out (including the padding at the bottom) and set it as background of the table with repeat-y
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the information tabular data? ie is the information in the x and y axis relational?
    If it is then code it as a table, otherwise code it as a list.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys,
    yes it is tabular. Otherwise I wouldn't have suggested it ! The background of the table is an option but I can't get it to work properly. Let me work on this for a bit more and I will show you the result. Maybe you can tweak it.

    Will have something ready by Monday. Tomorrow is "no work day" !

    Thanks,
    Max

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can style the tds to achieve this outcome. This might take a little extra thinking. Make sure you keep presentational(extra) markup as minimal as you can for this.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,677
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Place the sash image over the top of the table.

    Code css:
    span.thebest {
    	position: absolute;
    	background: url(thebest.gif);
    	width: 60px;
    	height: 60px;
    }

    Code html4strict:
    <span class="thebest"></span>
    <table>
        ...
    </table>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Place the sash image over the top of the table.

    Code css:
    span.thebest {
    	position: absolute;
    	background: url(thebest.gif);
    	width: 60px;
    	height: 60px;
    }

    Code html4strict:
    <span class="thebest"></span>
    <table>
        ...
    </table>
    I personally would not use a span for the job because it's adding presentation to the markup. For 'the best' image I would set a background-image for the table. Also, I would do a cross browse test to see if ie acts quirky with table background-images.

    If that is the case then I would use a header tag instead of the span.

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, you could set the caption absolute with a background-image and hide the text. Again, cross browse to see what seems to be quirky. I personally do not set imagery to most tables so I have not tested fully as I would like to ideally.

  9. #9
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way I would do it is have a div with a background then inside that div for each row have a div with a background and inside that div have floated class divs(with float left, margin left).

  10. #10
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cyjetsu View Post
    The way I would do it is have a div with a background then inside that div for each row have a div with a background and inside that div have floated class divs(with float left, margin left).
    And display: inline
    to avoid IE's "double-margin" bug
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  11. #11
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or if it is a non-liquid layout, give them all specified widths instead of margins.

  12. #12
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cyjetsu View Post
    The way I would do it is have a div with a background then inside that div for each row have a div with a background and inside that div have floated class divs(with float left, margin left).
    Can you show a code sample please.

  13. #13
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mschoening View Post
    So I have a question regarding the markup and CSS of a project. How would you code this screenshot? I think a table is the way to go but the Problem is the horizontal background image (with the shadows). As you might know you cant give a <tr /> a background image. So I have two options:

    A) slice the horizontal background of each <tr> into small images for each <td>

    or

    B) forget about the table and use <dl> but that would increase the markup and I don’t really like the idea

    What do you suggest?

    Here is the screenshot: http://storage.maximilianschoening.c...eny_at2323.jpg
    I think I would have choosed option C) table without any slicing, done something like the "thebest2" version below:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    /* FF does not refer the PA to the PR placed on any of the table parts */
    #thebest1 {
    	position:relative;
    	border-top:10px solid #000;
    	width:650px;
    	background:#000;
    	color:#ccc;
    	font-size:11px;
    	text-align:left;
    }
    #thebest1 .tablebanner td{
    	position:absolute;
    	top:-12px;
    	left:-2px;
    	width:60px;
    	height:60px;
    	background:url(tablebanner.gif) 0 0;
    }
    #thebest1 tr{
    }
    #thebest1 td{
    	height:35px;
    	background:#000 url(tablerow.gif) -50px 0; /* bg placed on the cells for flexible width */
    }
    #thebest1 td.cell1{
    	padding-left:20px;
    	width:50px;
    	background-position: 0 0;
    	color:#00f;
    }
    #thebest1 td.cell2{
    	width:240px;
    }
    #thebest1 td.cell3{
    	width:200px;
    }
    #thebest1 td.cell4{
    	width:60px;
    }
    #thebest1 td.cell5{
    	background-position: 100% 0;
    }
     
     
    /* spans added for tablebanner position reference in FF, cells' bg moved to the table-row*/
    #thebest2 {
    	border:0 none;
    	width:650px;
    	background:#000 none;
    	color:#ccc;
    	text-align:left;
    	font-size:70%;
    }
    #thebest2 .tablebanner td,
    #thebest2 .tablebanner td span{
    	display:block;
    	position:relative;
    	height:10px;
    }
    #thebest2 .tablebanner td span span{
    	position:absolute;
    	top:-2px;
    	left:-2px;
    	width:60px;
    	height:60px;
    	background:url(tablebanner.gif) 0 0;
    }
    #thebest2 tr{
    	background:#000 url(tablerow.gif) 0 0;
    }
    #thebest2 td{
    	height:35px;
    }
    #thebest2 td.cell1{
    	padding-left:20px;
    	width:50px;
    	color:#00f;
    }
    #thebest2 td.cell2{
    	width:240px;
    }
    #thebest2 td.cell3{
    	width:200px;
    }
    #thebest2 td.cell4{
    	width:60px;
    }
     
    </style></head><body>
     
    <table id="thebest1" cellpadding="0" cellspacing="0">
    	<tr class="tablebanner">
    		<td colspan="5"></td>
    	</tr>
    	<tr>
    		<td class="cell1">00000</td>
    		<td class="cell2">Blurblur Blurblur</td>
    		<td class="cell3">Blurblur Blurblur </td>
    		<td class="cell4">00000</td>
    		<td class="cell5">BLUR BLUR</td>
    	</tr>
    	<tr>
    		<td class="cell1">00000</td>
    		<td class="cell2">Blurblur Blurblur</td>
    		<td class="cell3">Blurblur Blurblur</td>
    		<td class="cell4">00000</td>
    		<td class="cell5">BLUR BLUR</td>
    	</tr>
    </table>
     
    <p></p>
     
    <table id="thebest2" cellpadding="0" cellspacing="0">
    	<tr class="tablebanner">
    		<td colspan="5"><span><span></span></span></td>
    	</tr>
    	<tr>
    		<td class="cell1">00000</td>
    		<td class="cell2">Blurblur Blurblur</td>
    		<td class="cell3">Blurblur Blurblur </td>
    		<td class="cell4">00000</td>
    		<td>BLUR BLUR</td>
    	</tr>
    	<tr>
    		<td class="cell1">00000</td>
    		<td class="cell2">Blurblur Blurblur</td>
    		<td class="cell3">Blurblur Blurblur</td>
    		<td class="cell4">00000</td>
    		<td>BLUR BLUR</td>
    	</tr>
    </table>
     
    </body></html>
    The images used are of size 61x61 px and 650x35 px, sliced and cleaned up from OP attached image:
    Attached Images Attached Images
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •