求解一个div 的样式出错的问题

yowbell 2009-05-31 11:09:02

别人的代码,感觉问题很多,我看他为了适应不同分辨率,设置了很多,很麻烦,并且现在有一个问题,就是最下面一个div中的图片虽然按要求底部对齐了,但是第二个div和第三个div之间始终有一段不同颜色的差别,求解,代码有些乱,没办法凑和看吧:



<%@ page language="C#" autoeventwireup="true" inherits="Left, App_Web_-o5fmbya" theme="Blue" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>xxxxxxx</title>

    <style type="text/css">

        .collapsePanel

        {

            background-color: white;

            overflow: hidden;

            width: 155px;

        }

        .collapsePanelHeader

        {

            width: 100%;

            height: 28px;

            background-repeat: repeat-x;

            color: #FFF;

            font-weight: bold;

        }

    </style>

    <script type="text/javascript" language="javascript"> 

function screenH()

{  

    if(window.screen.width   ==   800   &&   window.screen.height   ==   600)

      {   

        document.getElementById("outDiv").style.height =276;   

      }  

       else   if(window.screen.width   ==   1024&&   window.screen.height   ==   768)

      {   

      document.getElementById("outDiv").style.height  =444;   

      } 

      else if (window.screen.width==1280 && window.screen.height==800)

      {

      document.getElementById("outDiv").style.height=480;

      }

      else if (window.screen.width==1440 && window.screen.height==900)

      {

      document.getElementById("outDiv").style.height=580;

      }

       else if (window.screen.width==1280 && window.screen.height==1024)

      {

      document.getElementById("outDiv").style.height=704;

      }

  }  

    </script>

</head>

<body style="margin-top: 0px; margin-left: 0px; background-color: #1873a8;" onload="return screenH()">

    <form id="form2" runat="server" target="_parent">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div style="height: 53px; margin-top: -26px; margin-left: 4px; background-image: url('App_Themes/Blue/Images/top1.jpg');

        width: 165px; background-repeat: no-repeat;">

    </div>

    

注意下面的二个大的div ,第一个是     id="outDiv"   ,第二个是id = "bottom" 

    <div id="outDiv" style="margin-top: 0px;margin-bottom: 0px; margin-left: 6px; background-color: White;

        background-position: bottom; background-repeat: no-repeat; padding-bottom: 0px; padding-top: 0px;   width: 163px;">

        <asp:Panel ID="PCaption01" runat="server" CssClass="collapsePanelHeader" Height="23px">

            <div style="cursor: pointer; vertical-align: middle; line-height: 23px; width: 150px;

                height: 23px">

                <div style="float: left; width: 17px; height: 16px; margin-left: 6px; margin-top: 4px">

                </div>

                <div style="float: left;">

                    <font color="white">    bbbbbbb</font></div>

            </div>

        </asp:Panel>

        <asp:Panel ID="PBody01" runat="server" CssClass="collapsePanel" Height="0">

            <table style="width: 151px; height: 100%; border-right-color: #A5D1EC; border-right-style: solid;

                border-right-width: 2px;">

                <tr id="trSqbtb" runat="server">

                    <td style="width: 15%" align="right" valign="middle">

                        <img src="Images/Arrow.gif" style="width: 10px; height: 10px" />

                    </td>

                    <td style="width: 80%" align="left" valign="middle">

                        <asp:HyperLink ID="HyperLink1" runat="server" CssClass="MenuLink" NavigateUrl="~/RTypeList.aspx?Type=RequestInfo"

                            Target="mainFrame">bbbbb</asp:HyperLink>

                    </td>

                </tr>

            </table>

        </asp:Panel>

        <ajaxToolkit:CollapsiblePanelExtender ID="cpe01" runat="Server" TargetControlID="PBody01"

            ExpandControlID="PCaption01" CollapseControlID="PCaption01" Collapsed="True"

            ImageControlID="Img01" ExpandedImage="~/Images/Arrow-Up.png" CollapsedImage="~/Images/Arrow-Down.png"

            SuppressPostBack="true" SkinID="CollapsiblePanelDemo" />

      

        ...............................................................................

        

    </div>

    

    

    

    <div id = "bottom" style="margin-top: 0px; margin-left:6px; background-color: White; background-position: bottom;

        background-image: url('App_Themes/Blue/Images/main_58.gif'); width: 163px; background-repeat: no-repeat;position: absolute;bottom:0; ">

        <table width="163px" style="">

            <tr>

                <td align="center">

                    <font color="white">版本：2009 V1.0</font>

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

...全文

141 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

lzj34 2009-06-02

打赏
举报

我看了好半天也没看出来,你说明白些,主要看看嵌套的层数吧

FanG081020 2009-06-02

打赏
举报

帮顶

mike_24 2009-06-02

打赏
举报

把颜色值设成相同的.

lihan6415151528 2009-06-01

打赏
举报

[Quote=引用 3 楼 ddcatlee 的回复:]
div还套table。。。。还不如直接用table。。。。
[/Quote]

混合用着好？

夜雨_Jason 2009-06-01

打赏
举报

代码有点乱，先别理ASP还是HTML，搞成静态再看效果

mark620 2009-06-01

打赏
举报

div嵌套多层了
仔细调调看看颜色控制是哪里。

ddcatlee 2009-05-31

打赏
举报

div还套table。。。。还不如直接用table。。。。

郭大侠_ 2009-05-31

打赏
举报

我看了好半天也没看出来,你说明白些

xiaojing7 2009-05-31

打赏
举报

何为第2个和第3个DIV ?
id="outDiv" id = "bottom" ?

什么颜色差别？
不懂你的意思

一束光丫. 2009-05-31

打赏
举报

float:left

qqshenyunzcz 2009-05-31

打赏
举报

兄弟，看出来了
表面上2个DIV都是白色，但是ID是outDiv的这个里面就是一个Panel 你有用到了上面的样式CssClass="collapsePanelHeader"
.collapsePanelHeader
{
width: 100%;
height: 28px;
background-repeat: repeat-x;
color: #FFF;
font-weight: bold;
}
这个里面的color: #FFF;
我看到有几处样式的颜色不一样，你试试看是不是这的原因

yowbell 2009-05-31