CODEWITHSUNDEEP
csscss-tables
FungyBytes
FungyBytes

Reputation: 413

CSS table styling and positioning

I have a question regarding the styling and positioning of a table. I have created a 2 columned table with a number of rows and I want it to "fit" into my background image. Because this is rather vague explanation of the situation I've included this fiddle.

In this fiddle you should see the table + the background image and I hope it makes sense that the table items should go in between the lines that are part of the particular background.

I've tried styling the td element with attributes like

  td {
  height: 20% ; 
  }

or 

 td {
 cellpadding: ... ;
 cellspacing: ... ;
 }

(Don't know if these are even CSS attributes that I can use here)

but I just can not seem to get the table elements in the right place. Anyone who could help me out or someone who could offer me some good information to do it on my own?

Upvotes: 1

Views: 186

Answers (3)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Don't use tables for layouts. In this case it makes sense to use a list:

<div class="news"> <!--News-->
    <ul>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item1.html">item 1</a></li>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item2.html">item 2</a></li>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item3.html">item 3</a></li>                        
    </ul>

</div> <!-- / News -->

CSS:

.news ul {
    float:right;
    background-image: url('http://img64.imageshack.us/img64/3368/newsbg.png');
    width: 417px ;
    height: 186px ;
    background-repeat: no-repeat;
    padding-top:55px;
}

.news li {    
    height:38px; 
}

.news label {
    display:inline-block;
    width:230px;
}

.news a {
    display:inline-block;
    width:160px;
    text-align:right;
}

Upvotes: 2

Simone
Simone

Reputation: 21272

You should find the right padding-top and padding-bottom for the cells, or just apply a fixed height to all of them.

Upvotes: 0

Manual5355
Manual5355

Reputation: 982

I don't think you should be doing it that way. Why don't you just take out ">>>" out of the image, save it as it's own image, and then include it either inline in the html (i.e. ) or as a background image of one of rows (centered of course). Then make the table header text and style it appropriately.

Upvotes: 1

Related Questions