关于CSS的小问题

可能在下个月月中,我们部门将会向中国所有的CSS设计人员开放一个网站(目前我还不能透露这个网站的域名),并且同时展开一个CSS大赛。基本上的方式就是只要通过提交一个CSS以及图片组合的模板,就改变该网站的整个外观,以便让更多的开发人员/设计人员了解CSS的强大威力。在这个网站上进行这个赛事是我的创意。

当然这个创意的来源是来自于VisitMix,在这个网站当中有一个子栏目叫ReMix,这其实就是一个CSS大赛,在里面的Gallery当中,有很多网友上传的CSS模板,感兴趣的话,你只需要点击某一个item,就会把整个网站的外观风格完全变一个样子(其实这个创意可能最初来自于CSS禅意花园),记得在去年第一次见到这个网站的时候,感觉非常新奇,那时候就有一个想法,我可不可以把博客堂也做成这个样子?

大家都知道,无论是.Text还是后来的SubText或者BlogEngine,还有DasBlog,其实所使用的模板机制大同小异,除了CSS外,还都使用了类似于Master方式的一个文件来控制所有控件的布局,以便产生更多的风格。有没有可能把这个Master式的控制文件移掉,而只使用CSS或者图片呢?所以我就开始做了一个实验。但至少到现在为止,尚未解决一些关键性难题。以下这些问题我曾经向三位CSS高手求教,答案都是很难实现,或者只能兼容某种浏览器。

好了,以下是我的问题,如果大家有解答,欢迎直接通过邮件与我联系。(joy ^ joycode.com,把^替换为@)。

有以下的HTML架构,希望实现以下三种不同的用户体验,并且兼容IE 6+,Firefox 1.5+以上的浏览器。

<div id=”Header”>这是标题</div>

<div id=”Main”>

<div id=”Content”>这是主内容</div>

<div id=”Sidebar”>

<div id=”Stats”>

<ul><li>主页</li><li>目录1</li><li>目录2</li></ul>

</div>

<div class=“other”>这是其它内容</div>

</div>

</div>

<div id=”Footer”>这是结尾</div>

第一种布局:

Header内容
Sidebar内容(width:200px) Content主内容(Width:Screen.Width-200px);
Footer内容

第二种布局

Header内容
Stats内容(Width:200px) Content(Width:Screen.Width-400px) Sidebar当中除Stats之外的内容(Width:200px)
Footer

第三种布局

Header内容
Stats内容(由竖直排列改为水平排列)
Sidebar内容,除Stats之外的内容(width:200px) Content内容(Width:Screen.Width-200px)
Footer内容