Tansy's blog

2007-08-15

Flex学习第一天 - [工作]

晃悠了很久，终于要做点实事了。
为了防止自己懒惰，在此记录学习过程。
今天是flex学习第一天。

Tansy @ 14:55:49 | 阅读全文 | 评论 0 | 引用 0 | 编辑

2007-04-09

两列高度自适应浏览器 - [工作]

手头一个项目需要页面宽度自适应浏览器，高度自适应浏览器。
可看成是上中下三部分：上部（包括header、menu、圆角等）高度固定；中部分为左右两列，左侧宽度固定，右侧自适应浏览器宽，整个中部自适应浏览器高，即内容>浏览器高度时出现滚动条，内容<浏览器高度时，中部充满浏览器，背景图片始终居下；下部（包括圆角、footer等）高度固定。

其中CSS如下

html {
margin: 0;
overflow: hidden;
height: 100%;
padding: 0 !important;
padding: 110px 0 15px 0;
}

body {
margin: 0px;
font-family: Arial,Helvetica, sans-serif;
font-size: 12px;
background-color: #333333;
height: 100%;
padding: 0 !important;
padding: 110px 0 15px 0;
}

#top {
height: 110px;
top: 0px !important;
top: -220px;
position: absolute!important;
position: relative;
background-color:#CC9999;
width: 100%;
}

#main_left {
background: white;
position: absolute!important;
position: relative;
top:110px!important;
top:-220px;
height:auto!important;
height:100%;
width:184px;
float:left;
background-color: #FFFFFF;
padding: 0 0 0 6px;
bottom: 14px!important;
bottom: 0;
overflow: auto;
left: 4px;
}

#main_right {
position: absolute!important;
position: relative;
top:110px!important;
top:-220px;
height:auto!important;
height:100%;
background-color: #fff;
overflow: auto;
bottom: 14px!important;
bottom: 0;
left: 197px !important;
left: 4px;
right: 4px;
margin: 0 !important;
margin: 0 8px 0 0;
}

#main_bottom {
height: 15px;
bottom: 0 !important;
bottom: -1px;
position: absolute;
font-size: 0;
background-color: #FFCC66;
width: 100%;
}

点击查看最终效果

在FF、IE6.0下正常，IE7.0中原项目页面正常，刚去除内容做sample时，稍有些调整，故而如出现错误，请告知修正。

Tag: 技术

Tansy @ 10:03:06 | 阅读全文 | 评论 1 | 引用 0 | 编辑

2007-04-03

东风雪铁龙 - [工作]

上周努力3天的成果，CSS+DIV：
东风雪铁龙

Tag: 技术

Tansy @ 10:19:43 | 阅读全文 | 评论 0 | 引用 0 | 编辑

2007-03-16

UI内刊 - [工作]

酝酿了N久的UI内刊终于发布了，在此衷心的感谢建国同学的鼎力支持以及孟华同学的辛勤劳动，偶不过是个借过沾光滴，吼吼……

点我下载

Tag: 技术

Tansy @ 16:25:00 | 阅读全文 | 评论 0 | 引用 0 | 编辑

2007-02-06

在IE6下用min-width的方法 - [工作]

max-width、max-height、min-width和min-height这四个性质分别表示最大宽度、最大高度、最小宽度和最小高度。它们在CSS中有着很重要的作用。
然而，十分不幸的是，就是IE，这个世界上使用者最多的浏览器，到目前的版本为止，对这四个性质没有一个能够，哪怕一点点的支持。这可让设计者吃尽了苦头，最明显的就是，当你使用 float布局时，在IE中的一个臭毛病是，顶层div的宽度变小的时候（缩小窗口，分辨率低等），浮动的布局（一般是右边那一块跑到了下方）就会被破坏，变得一塌糊涂……
最后通过我们亲爱的google终于找到几个解决办法，感谢众多的web设计天才。

办法一、

#content {
width:100%;
min-width: 760px;
width: expression(document.body.clientWidth < 760? "760px": "100%" );
}

虽然该办法会让CSS通不过校验，但是有胜于无，开心地测试页面，然后我的IE就崩了，连续几次都如此，最后发现原来是这种方法适用的页面是没有声明的，而我的页面去掉声明就乱了，只好放弃再觅他法。

办法二、

因为border-left为300px,所以div最小也得有300px，间接实现了min-width的功能。而由于margin-left为-300px且position:为relative，所以里面的文字不受border-left的影响。

办法三、
请访问http://www.doxdesk.com/software/js/minmax.html，作者给出了一个通过JS解决办法，只对IE6起作用，已经很完美了。下载http://www.doxdesk.com/file/software/js/minmax.js 并在页面head区域添加

就可以了。

办法四、
请访问http://www.rexsong.com/blog/article.asp?id=141，恕我无知，看得不是太明白。

Tag: 技术

Tansy @ 17:28:40 | 阅读全文 | 评论 1 | 引用 0 | 编辑

2007-01-31