CODEWITHSUNDEEP
htmlcsshtml-table
stoic
stoic

Reputation: 4830

Converting table layout to div equivalent

I currently have a table:

<table id="blockcontainer">
    <tr>
        <td class="topleftgrey"></td>
        <td class="topcentergrey">
            <span class="sharemedium">FAQ</span> <span class="headingmedium">Categories</span>
        </td>
        <td class="toprightgrey"></td>
    </tr>
    <tr>
        <td class="middleleft"></td>
        <td class="middlecenter">
            some content goes here
        </td>
        <td class="middleright"></td>
    </tr>
    <tr>
        <td class="bottomleft"></td>
        <td class="bottomcenter"></td>
        <td class="bottomright"></td>
    </tr>
</table>

With CSS:

#blockcontainer {width:100%;}
#blockcontainer .topleft{background:url(../../Content/Images/top-left.png) no-   repeat;width:8px;height:52px;}
#blockcontainer .topcenter{background:url(../../Content/Images/top-center.png) repeat-x;height:52px;color:#fff;padding-left:5px;font-size: large;text-align: left;}
#blockcontainer .topright{background:url(../../Content/Images/top-right.png) no-repeat;width:8px;height:52px;}
#blockcontainer .topleftgrey{background:url(../../Content/Images/top-leftgrey.png) no-repeat;width:8px;height:52px;text-align: left;}
#blockcontainer .topcentergrey{background:url(../../Content/Images/top-centergrey.png) repeat-x;height:52px;padding-left:5px;font-size:large;text-align: left;}
#blockcontainer .toprightgrey{background:url(../../Content/Images/top-rightgrey.png) no-repeat;width:8px;height:52px;text-align: left;}
#blockcontainer .middleleft{background:url(../../Content/Images/middle-left.png) repeat-y;width:8px;}
#blockcontainer .middlecenter{background-color:#fff;padding:5px;}
#blockcontainer .middleright{background:url(../../Content/Images/middle-right.png) repeat-y;width:8px;}
#blockcontainer .bottomleft{background:url(../../Content/Images/bottom-left.png) no-repeat;width:8px;height:8px;}
#blockcontainer .bottomcenter{background:url(../../Content/Images/bottom-center.png) repeat-x;height:8px;}
#blockcontainer .bottomright{background:url(../../Content/Images/bottom-right.png) no-repeat;width:8px;height:8px;}

That looks like this:

enter image description here

The problem I am having is that there are multiple tables like this on one page (this table acts as my content containers), and due to the way that tables load in a browser, the page loads terribly slow.

I know converting this to a div will make the world of difference, but I am unable to convert this table structure to an equivalent div stricture.

Sorry for posting a "do it for me" question, but multiple attempts at this has already left a piece of my keyboard on my wall. :)

Here is the jsfiddle example

Upvotes: 1

Views: 8044

Answers (4)

Jared Farrish
Jared Farrish

Reputation: 49188

The below uses floated div's and negative margins. I also wrapped the content with the middleleft and middleright elements so they would inherit the height of the content itself and stretch the borders to the appropriate height.

Note, due to the negative margins, you'll probably want to look at the margins put on the middlecenter element.

.blockcontainer .topleft {
    background: url(http://www.effortshare.com/Content/Images/top-left.png) no-repeat;
    width: 8px;
    height: 52px;
    float: left;
    margin-left: -8px;
}
.blockcontainer .topcenter {
    background: url(http://www.effortshare.com/Content/Images/top-center.png) repeat-x;
    color: #fff;
    font-size: large;
    text-align: left;
}
.blockcontainer .topright {
    background: url(http://www.effortshare.com/Content/Images/top-right.png) no-repeat;
    width: 8px;
    height: 52px;
    float: right;
    margin-right: -8px;
}
.blockcontainer .topleftgrey {
    background: url(http://www.effortshare.com/Content/Images/top-leftgrey.png) no-repeat;
    width: 8px;
    height: 52px;
    text-align: left;
    float: left;
    margin-left: -8px;
}
.blockcontainer .topcentergrey {
    background: url(http://www.effortshare.com/Content/Images/top-centergrey.png) repeat-x;
    height: 52px;
    font-size: large;
    text-align: left;
}
.blockcontainer .toprightgrey {
    background:url(http://www.effortshare.com/Content/Images/top-rightgrey.png) no-repeat;
    width: 8px;
    height: 52px;
    text-align: left;
    float: right;
    margin-right: -8px;
}
.blockcontainer .middleleft {
    background: url(http://www.effortshare.com/Content/Images/middle-left.png) repeat-y;
    margin-left: -8px;
    overflow: visible;
}
.blockcontainer .middlecenter {
    padding: 5px 8px 5px 8px;
}
.blockcontainer .middleright {
    background: url(http://www.effortshare.com/Content/Images/middle-right.png) repeat-y;
    background-position: right top;
    margin-right: -8px;
    overflow: visible;
}
.blockcontainer .bottomleft {
    background: url(http://www.effortshare.com/Content/Images/bottom-left.png) no-repeat;
    width: 8px;
    height: 8px;
    float: left;
    margin-left: -8px;
}
.blockcontainer .bottomcenter {
    background: url(http://www.effortshare.com/Content/Images/bottom-center.png) repeat-x;
    height: 8px;
}
.blockcontainer .bottomright {
    background:url(http://www.effortshare.com/Content/Images/bottom-right.png) no-repeat;
    width: 8px;
    height: 8px;
    float: right;
    margin-right: -8px;
}

<div class="blockcontainer">
    <div class="header topcentergrey">
        <div class="topleftgrey"></div>
        This is a title
        <div class="toprightgrey"></div>
    </div>
    <div class="middleleft">
        <div class="middleright">
            <div class="middlecenter">
                <div class="row">
                    <div>This is left</div>
                    <div class="right">Right</div>
                </div>
                <div class="row">
                    <div>This is left</div>
                    <div class="right">Right</div>
                </div>
                <div class="row">
                    <div>This is left</div>
                    <div class="right">Right</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottomleft"></div>
    <div class="bottomright"></div>
    <div class="bottomcenter"></div>
</div>

http://jsfiddle.net/userdude/FtCLJ/4/

Upvotes: 2

Purag
Purag

Reputation: 17061

Aniket beat me to it, however I believe mine is a more accurate CSS rendition of your current image and table-based code:

http://jsfiddle.net/purmou/YyHKf/

It uses CSS3 box-shadow (along with the browser prefixed versions for compatibility) and gradient backgrounds (which doesn't work in Opera only, but that's an easy addition).

HTML:

<div class="container" id="container1">
    <div class="header" id="header1">
        FAQ Categories
    </div>
    <div class="content" id="content1">
        <div>content
            <div class="right">5
            </div>
        </div>
    </div>
</div>

CSS:

.container {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    background: #fff;
    width:100%;
}

.header {
    padding:5px;
    background:#eeeeee;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee');
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background: -moz-linear-gradient(top,  #fff,  #eee);
  height:40px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom:1px #888 solid;
    -moz-box-shadow: 0 1px 3px #888;
    -webkit-box-shadow: 0 1px 3px#888;
    box-shadow: 0 1px 3px #888;
}

.content {
    padding:0 5px 10px 5px;
    margin-top:3px;
    background-color:#ffffff;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}

.content div {
    padding:5px 5px 5px 5px;
    border-bottom:1px #ccc solid;
}

.content .right {
    float:right;
    border:none;
}

Upvotes: 3

Aniket
Aniket

Reputation: 9758

Check this fiddle - http://jsfiddle.net/aniketpant/ePARN/

I have removed the use of all images, and it's pure CSS.

HTML

<div id="blockcontainer">
    <dl>
        <dt class="title">FAQ Categories</dt>
        <dt>Some content goes here</dt>
        <dt>Some content goes here</dt>
        <dt>Some content goes here</dt>
        <dt>Some content goes here</dt>
    </dl>
</div>

CSS

#blockcontainer {
    border: 2px solid #ddd;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#blockcontainer dl dt.title {
    font-size: 1.25em;
    border-bottom: 2px solid #ddd;
    background: -moz-linear-gradient(top, #eee, #ddd, #fff); /* FF 3.6+ */  
    background: -ms-linear-gradient(top, #eee, #ddd, #fff); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(50%, #ddd), color-stop(100%, #fff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(top, #eee, #ddd, #fff); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(top, #eee, #ddd, #fff); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(top, #eee, #ddd, #fff); /* the standard */  
}

#blockcontainer dl {
}

#blockcontainer dl dt {
    padding: 5px;
}

Upvotes: 2

kd1987
kd1987

Reputation: 1

Ideally you should be using Ul and Li (to be more semantic) for navigation not table tags. Using table will just screw up the entire layout. If I were you, I would opt for 960 gs and choose grid_1

<div class="grid_1">
<div id="sidenavi">
<ul>
<li>Home</li>
<li>FaQ</li>
<li>some here</li>
<li>others here</li>
</ul>
</div>
</div>

and my css would say:

#sidenavi ul li
{
#background ......
}

I hope it works out for u. The code would be shorter, efficient and as per semantics :)

Upvotes: 0

Related Questions