Преобразование макета таблицы в div-эквивалент - PullRequest
1 голос
/ 14 августа 2011

У меня сейчас есть таблица:

<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>

С 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;}

Это выглядит так:

enter image description here

У меня проблема в том, что на одной странице есть несколько таких таблиц (эта таблица действует как мои контейнеры содержимого), и из-за того, как таблицы загружаются в браузер, страница загружается ужасно медленно.

Я знаю, что преобразование этого в div создаст мир различий, но я не могу преобразовать эту структуру таблицы в эквивалентную структуру div.

Извините за публикацию вопроса "сделай это для меня", но несколько попытокна этом уже оставил кусок моей клавиатуры на моей стене.:)

Вот пример jsfiddle

Ответы [ 4 ]

3 голосов
/ 14 августа 2011

Аникет опередил меня, однако я считаю, что моя версия более точна в CSS для вашего текущего изображения и табличного кода:

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

Используется CSS3 box-shadow(вместе с префиксными версиями браузера для совместимости) и градиентные фоны (которые не работают только в Opera, но это простое дополнение).

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;
}
2 голосов
/ 14 августа 2011

Отметьте эту скрипку - http://jsfiddle.net/aniketpant/ePARN/

Я удалил использование всех изображений, и это чистый 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;
}
2 голосов
/ 14 августа 2011

Ниже используются плавающие div и отрицательные поля. Я также обернул содержимое элементами middleleft и middleright, чтобы они наследовали высоту самого содержимого и растягивали границы до соответствующей высоты.

Обратите внимание, что из-за отрицательных полей вы, возможно, захотите взглянуть на поля, добавленные к элементу middlecenter.

.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/

0 голосов
/ 14 августа 2011

В идеале вы должны использовать Ul и Li (чтобы быть более семантическими) для навигации, а не для табличных тегов. Использование таблицы просто испортит весь макет. На вашем месте я бы выбрал 960 gs и выбрал 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>

и мой css сказал бы:

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

Надеюсь, у тебя все получится. Код будет короче, эффективнее и по семантике:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...