开发者

psd to html table height adjustment auto

问答 作者：

It is my first trial to make an HTML code out of a PSD file. The problem is I have a dynamic table whose content is getting taller depending on selected buttons. However, this creates a problem. The other columns creates ugly intervals with white background instead of the background color I used.

I have read something called Faux Column but I am not able to apply that to my HTML code.

I am using photoshop and dreamweaver. What would you recommend me to deal with height changes in one table row to compensate it in other rows?

I am total numb and dummy in this field.

css file:

@charset "UTF-8";
/* CSS Document */

body{

width: 1426px;
margin: 0 auto;

}
    #hovermenu ul{
    font: 12px arial;
    color:#a1a1a1;
    padding-left: 10;
    margin-left: 0;
    height: 15  px;
    }


#hovermenu ul li{
list-style: none;
display: inline;
}

#hovermenu ul li a{
padding:0 ;
text-decoration: none;
float: left;
color:#878787;


}

#hovermenu ul li a:hover{
background-color:#FFF;
color:#b81321;
border-style:none;
}




<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<link href="styles.css" rel="stylesheet" type="text/css">

</head>

<body>

<table id="Table_01" width="1426" height="%100" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="12">
            <img src="images/red-ruler.jpg" width="1425" height="4" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td width="19" height="1379" rowspan="17">
            <img src="images/spacer2.gif" width="19" height="1379" alt=""></td>
        <td colspan="11">
            <img src="images/clouds.jpg" width="1406" height="71" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="71" alt=""></td>
    </tr>
    <tr>
        <td rowspan="6">
            <img src="images/clouds-04.jpg" width="197" height="285" alt=""></td>
        <td colspan="5" rowspan="3">
            <img src="images/logo.jpg" width="279" height="111" alt=""></td>
        <td colspan="3">
            <img src="images/reklam.jpg" width="404" height="1" alt=""></td>
        <td rowspan="2">
            <img src="images/arama-sepetim.jpg" width="317" height="67" alt=""></td>
        <td rowspan="6">
            <img src="images/clouds-08.jpg" width="209" height="285" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/reklam-top.jpg" width="404" height="110" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="66" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/arama-bg.jpg" width="317" height="44" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="44" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img src="images/top-siyah-menu.jpg" width="1000" height="45" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>
        <td width="1000" height="13" colspan="9">
            <img src="images/spacer.gif" width="1000" height="13" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="images/ust-reklam-cerceve-1.jpg" width="330" height="116" alt=""></td>
        <td>
            <img src="images/ust-reklam-cerceve-2.jpg" width="335" height="116" alt=""></td>
        <td colspan="2">
            <img src="images/ust-reklam-cerceve-1-14.jpg" width="335" height="116" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="116" alt=""></td>
    </tr>
    <tr>
        <td width="197" height="1023" rowspan="10">
            <img src="images/spacer2.gif" width="197" height="1023" alt=""></td>
        <td colspan="3">
            <img src="images/magazalar-right-menu.jpg" width="221" height="38" alt=""></td>
        <td colspan="6" rowspan="3">
            <img src="images/ana-logo.jpg" width="779" height="256" alt=""></td>
        <td width="209" height="1023" rowspan="10">
            <img src="images/spacer.gif" width="209" height="1023" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
        <td width="221" height="180" colspan="3">
            <div id="hovermenu">
        <ul>
        <li>
        <a href="http://www.test.net/test-ozel/398">test Ozel</a>
        </li>

        </ul>

         <ul>
        <li>
        <a href="http://www.test.net/Apple-App-Store/236">Apple App Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/test-Magaza/Blackberry/400">Android Market</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Blackberry-App-World/241">Blackberry App World</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Nokia-Ovi-Store/242">Nokia Ovi Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Windows-Phone/243">Windows Phone</a>
        </li>


        <li>
        <a href="http://www.test.net/test-ozel/398">test Ozel</a>
        </li>

        </ul>


         <ul>
        <li>
        <a href="http://www.test.net/Apple-App-Store/236">Apple App Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/test-Magaza/Blackberry/400">Android Market</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Blackberry-App-World/241">Blackberry App World</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Nokia-Ovi-Store/242">Nokia Ovi Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Windows-Phone/243">Windows Phone</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Apple-App-Store/236">Apple App Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/test-Magaza/Blackberry/400">Android Market</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Blackberry-App-World/241">Blackberry App World</a>
        </li>

        </ul>
         <ul>
        <li>
        &l开发者_Python百科t;a href="http://www.test.net/Nokia-Ovi-Store/242">Nokia Ovi Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Windows-Phone/243">Windows Phone</a>
        </li>

        </ul>





        </div></td>
        <td>
            <img src="images/spacer.gif" width="1" height="180" alt=""></td>
    </tr>
    <tr>
        <td width="2" height="125" colspan="2" rowspan="3">
            <img src="images/spacer.gif" width="2" height="125" alt=""></td>
        <td>
            <img src="images/sepetim-right-menu.jpg" width="219" height="38" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
        <td width="219" height="87" rowspan="2">
            <img src="images/spacer.gif" width="219" height="87" alt=""></td>
        <td width="25" height="767" rowspan="7">
            <img src="images/spacer.gif" width="25" height="767" alt=""></td>
        <td width="754" height="31" colspan="5">
            <img src="images/spacer.gif" width="754" height="31" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="31" alt=""></td>
    </tr>
    <tr>
        <td width="754" height="667" colspan="5" rowspan="5">
            <img src="images/spacer.gif" width="754" height="667" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="56" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/haber-grubu-right-menu.jpg" width="221" height="38" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
        <td width="1" height="150" rowspan="2">
            <img src="images/spacer.gif" width="1" height="150" alt=""></td>
        <td width="220" height="73" colspan="2">
            <img src="images/spacer.gif" width="220" height="73" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="73" alt=""></td>
    </tr>
    <tr>
        <td width="220" height="77" colspan="2">
            <img src="images/spacer.gif" width="220" height="77" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="77" alt=""></td>
    </tr>
    <tr>
        <td width="221" height="423" colspan="3">
            <img src="images/spacer.gif" width="221" height="423" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="423" alt=""></td>
    </tr>
    <tr>
        <td width="221" height="69" colspan="3">
            <img src="images/spacer.gif" width="221" height="69" alt=""></td>
        <td width="754" height="69" colspan="5">
            <img src="images/spacer.gif" width="754" height="69" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="69" alt=""></td>
    </tr>
    <tr>
        <td colspan="12">
            <img src="images/ruler-bottom.jpg" width="1425" height="3" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td width="1425" height="520" colspan="12">
            <img src="images/spacer.gif" width="1425" height="520" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="520" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="19" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="197" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="219" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="25" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="33" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="51" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="335" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="18" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="317" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="209" height="1" alt=""></td>
        <td></td>
    </tr>
</table>

</body>
</html>

You should display your code for better understanding but from what your are saying modyfing the height could help or use css to modyfy the inside padding.

继续阅读：css

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9