随笔- 36 文章- 3 评论- 457

页面布局 "HTML 4.0 Transitional” VS "XHTML 1.0 Transitional" 新的不一定就好用！

前言

      最近新的 XHTML  ，用了一段时间感决虽然是新标准、不过感觉除了标签等的写法更严格了，最显著的差别就是二者之间
页面布局也有恶性的差异，尤其是对 Table 对象的布局方面，firefox，IE 这里表现的是统一的。
      也就是html 上面写
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
      和
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
会在很多方面有明显的不同。

以下通过一个列子进行说明
     这个列子，主要布局使用的Table 对象，因为这个样式的东西用Div 是无法实现的，因为我搞了一天、也没成功，不管在那种html标准下
Div 都无法满足要求，别的都好说，就是下图中[2]的部分不用 js 没法实现。
    图一：设计要求100% 宽度页面，要求最小支持 1024 x 768 ，主要支持 1280x1024，其余需求见图上

上图可以看出需求,
        这种布局我用Div 搞了好久，如果不用 js 只用css 好像是做不来的、因为div 的高度没法设置为，类似 “剩余部分100%” 的这种、所以根本无法满足需求，如果那位高人可以实现可以告诉我，我万分感激。

还有网页中用了一处，真彩色透明Png 就是那个大楼，看大楼下边边缘部分
和背景是融合的gif是不能达到这个效果的，ie7 以前不直接支持，Firefox 出来那天就支持了，ms 不知什么原因，ie7 才支持，不知道ms搞什么，有那么难吗？

    为什么这么用Png24，颜色鲜艳，效果好有半透明功能，不过就是需要有特殊的样式支持，ie5.5 以前就没法支持了。
    而且省的用 Photoshop隔图了，而且隔图作固定布局的网页还可以，有些时候ps隔的图没法做100%布局，而且隔图的html太乱了，
忙活半天终于搞出来了哎，还是用回了 table

图二：1280X1024 分辨率下 firefox 测试成功，布局正常


图三：最终测试符合要求，打完收工

还是不甘心啊，听说 html,body { height:100%;} 可以让 XHTM 标准的网页高度等于 100% 好看看，改 xhtml标准加样式。

图四：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 时的效果

靠上中下，三格竟然，平均分配大小！哎，还是改回 HTML 4.0 标准吧，HTML 4.0 下如果一个Table 上中下三个单元隔，上下都指定了高度
中间那个自动就会变为剩余部分的100%高、难道这样是不对的吗？也不知道 XHTML 标准怎么搞的。

以下是 html 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">

</style>




</head>

<body >
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" valign="middle" id="header" class="Test0"  > </td>
  </tr>
  <tr>
    <td id="middleLeft" class="Test0" > </td>

    <td valign="top" id="middleRight" >
    <div id="editBody" >
      <p>测试</p>
      <p>测试</p>
      <p>测试</p>
      <p><a href="#">测试</a></p>
    </div>
    </td>
  </tr>
  <tr  >
    <td id="footerBg" colspan="2" valign="bottom" class="Test0" >
        
        <div id="footer" >
            <img id="lefImg" src="images/home_t_01.png" class="pngAlpha Test0">
            <img id="rimg" src="images/home_t_02.gif" class="Test0">
            <div id="copyright" class="Test0" >版权：曲滨 2006 ，Emai:XXXXXX</div>
        </div>
    </td>
  </tr>
</table>
</body>
</html>

说明一下，上面那个是专门给 ie6，ie5.5 准备的显示24色透明png 的样式脚本，我以前写的用了2年了。用了ie 的预编译，其他浏览器
自然就忽略了。


如果那位园友，作类似的布局的话能少浪费点时间
还有谁可以在不用脚本的情况下，满足需求做出 div 布局的本类网页，请通知我，我的邮件在我blog 的头图上
这里下一个战书，给那些说 div 如何如何 nb 的园友，不是挑衅啊事先声明,子是争论一下技术而已 ^_^。

网页及图片下载

图片被处理了因为不都是我一个人设计的，我没权利放在包里抱歉。

posted @ 2006-12-01 20:23 曲滨*銘龘鶽阅读(3031) 评论(14) 编辑收藏网摘所属分类: Web UI 界面

发表评论

回复引用

#1楼 2006-12-01 21:06 | Wuvist[未注册用户]

呵呵……

左侧固定宽，右侧剩余100%的div布局我最近也搞了两个通宵……

失败告终……

回复引用查看

#2楼 [楼主]2006-12-01 21:31 | 曲滨

是啊
强烈建议、有关标准部门出
支持剩余宽度高度，百分比的样式！

回复引用查看

#3楼 2006-12-01 22:30 | 蛙蛙池塘

css的表达式你也会用呀，我光听说过，呵呵，闪灵真实啥都很深入呀。

回复引用查看

#4楼 2006-12-01 22:34 | deerchao

毛驴比摩托好用多了,摩托就不能上山.

回复引用查看

#5楼 2006-12-02 10:54 | 老Q

顶，最烦XHTML，老是提示代码这里不合适那里不合适的

回复引用查看

#6楼 [楼主]2006-12-02 11:22 | 曲滨

@蛙蛙池塘
那个表达式子有，ie 认，其他浏览器都没反应的
用的时候需要注意些

回复引用查看

#7楼 [楼主]2006-12-02 11:31 | 曲滨

@Yok
你的恢复我看到了，不过是在邮件里，不知为何没有显示在我的blog上
原文是这样的---

在ie7，ff 2和opera 9 都显示正常。机上没ie6 -_- html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml"">http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div id="content">
<p>测试</p>
<p>测试</p>
</div>
<div id="footer">
<div id="decoration_left"></div>
<div id="decoration_right"></div>
<div id="copyright">版权：Yok 2006 ，Emai:XXXXXX</div>
</div>
</body>
</html>
css: body
{
background-image:url(images/ltbg02.jpg);
background-repeat:no-repeat;
margin:0px;
padding:0px;
height:100%;
}

#content
{
margin-top:118px;
margin-left:366px;
}

#footer
{
background-image:url(images/BlgDownBg.jpg);
height:150px;
position:absolute;
bottom:0px;
width:100%;
}

#decoration_left
{
background-image:url(images/home_t_01.png);
background-repeat:no-repeat;
height:445px;
width:722px;
top:-330px;
position:absolute;
}

#decoration_right
{
background-image:url(images/home_t_02.gif);
background-repeat:no-repeat;
height:55px;
width:118px;
position:absolute;
top:-50px;
right:10px;
}

#copyright
{
position:absolute;
top:50px;
right:10px;
color:White;
width:270px;
}

你觉得用xhtml做不到的原因是你仍然从外观的角度去思考。xhtml不是说要用div+css实现布局，而是用html表示结构，css控制外观。你看用xhtml写的代码多简洁啊~ 年轻人不能这么浮躁啊~ 作者: Yok
主页: http://www.cnblogs.com/Yok/">http://www.cnblogs.com/Yok/
URL: http://www.cnblogs.com/flashelf/archive/2006/12/01/579364.aspx#579549">http://www.cnblogs.com/flashelf/archive/2006/12/01/579364.aspx#579549

回复引用查看

#8楼 [楼主]2006-12-02 11:40 | 曲滨

不过你那个是在
<div id="content">
<p>测试</p>
<p>测试</p>
</div>
这个部分文字很少的情况下
如果写很多
<p>测试</p>
页脚部分如果使用绝对定位，就会和 div Content 重叠

在有我哪里浮躁了？ ^_^.
请在认真的看看我的图三，图二部分。
Div 当然简洁，不过在某些需求下似乎还是无法满足的！

回复引用查看

#9楼 2006-12-02 12:45 | Yok

content外再包个div就解决了。结构上middle有点多余，不够完美，但总比用table布局清晰多了

<!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>
    <title></title>
    <link rel="stylesheet" href="css.css"/>
  </head>
  <body>
    <div id="middle">
      <div id="content">
        <p>测试</p>
        <p>测试</p>
      </div>
    </div>
    <div id="footer">
      <div id="decoration_left"></div>
      <div id="decoration_right"></div>
      <div id="copyright">版权：Yok 2006 ，Emai:XXXXXX</div>
    </div>
  </body>
</html>

html, body{
    height:100%;
}
body
{
    background-image:url(images/ltbg02.jpg);
    background-repeat:no-repeat;
    margin:0px;
    padding:0px;
}
#middle
{
    min-height:100%;
}
#content
{
    padding:118px 20px 200px 370px
}
#footer
{
    background-image:url(images/BlgDownBg.jpg);
    height:150px;
    margin-top:-150px;
    width:100%;
}
#decoration_left
{
    background-image:url(images/home_t_01.png);
    background-repeat:no-repeat;
    height:445px;
    width:722px;
    margin-top:-330px;
    float:left;
}
#decoration_right
{
    background-image:url(images/home_t_02.gif);
    background-repeat:no-repeat;
    height:55px;
    width:118px;
    margin:-50px 10px;
    float:right;
}
#copyright
{
    float:right;
    clear:right;
    margin:60px 10px 0px -100px;
    color:White;
    width:270px;
}

回复引用查看

#10楼 [楼主]2006-12-03 12:46 | 曲滨

@Yok
谢谢了啊，原来div 布局最核心的地方在
margin 和 padding

min-height:100%;

可否换成，height：100%；

回复引用查看

#11楼 [楼主]2006-12-03 14:47 | 曲滨

换成
#middle
{
height:100%;
}
不好用！content 文字多的时候，还是会超出 footer

哎，min-height 样式ie6 不支持的
写个 100% 布局的网页怎么如此费尽。

如果去掉，#middle
{
height:100%;
}

content 内容超过一屏幕的时候，就好了，不过 content 文字少的时候还都是空白下面。

不过仍然感谢 yok，因为网页里的东西，超过一屏幕高度的还是比较多
在ie7 普及后我就可以用你这种布局了呵呵。
估计再有半年就应该可以了。

哎、开发 web 的程序，又有一个问题，大家是应该兼容浏览器优先、还是兼容标准优先哪？

回复引用查看

#12楼 [楼主]2006-12-03 14:54 | 曲滨

还有个很恶性的问题
我加了一个
header
#header
{
height:118px;
margin-bottom:-118px;
}
<div id="header"><a href="#">测试</a></div>
<div id="middle">
*****以下省略

header 中的，连接需要加，以提升 z 顺序
#header a
{
position:relative;
}

ie 需要，FF 不需要，这里也不知道是 ie 符合标准，还是 FF 符合标准
如果谁以后遇到同类问题需要注意一下啊。

回复引用查看

#13楼 2006-12-04 00:02 | Yok

有很多情况都无法兼顾所有浏览器，要靠css hack

回复引用

#14楼 2009-06-09 18:09 | binzi[未注册用户]

/*编辑区域，相对位置，要设置Z顺序,否则可以被“大楼覆盖”*/
在xhtml中，css的注释中如有中文如上，应该写成
/* 编辑区域，相对位置，要设置Z顺序,否则可以被“大楼覆盖” */
即在*和汉字之间加空格

刷新评论切换模板

发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)