我一直在撞我的头靠在墙上几个小时试图找出这个问题,认为它必须是小我缺少的东西。我在网上搜索,但没有发现似乎工作。 HTML是:
<body> <div id="header"> <div id="bannerleft"> </div> <div id="bannerright"> <div id="WebLinks"> <span>Web Links:</span> <ul> <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li> <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li> <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li> </ul> </div> </div> </div> <div id="Sidebar"> <div id="SidebarBottom"> </div> </div> <div id="NavigationContainer"> <ul id="Navigation"> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> </ul> </div> <div id="Main"> <!-- content --> </div> </body>
我的完整CSS是:
* { margin:0px; padding:0px; } body { font-family:Calibri,Sans-Serif; height:100%; } #header { width:100%; z-index:1; height:340px; background-image:url("../../Content/images/bannercenter.gif"); background-repeat:repeat-x; } #header #bannerleft { float:left; background-image:url("../../Content/images/bannerleft.gif"); background-repeat:no-repeat; height:340px; width:439px; z-index:2; } #bannerright { float:right; background-image:url("../../Content/images/bannerright.gif"); background-repeat:no-repeat; width:382px; height:340px; background-color:White; z-index:2; } #Sidebar { width:180px; background:url("../../Content/images/Sidebar.png") repeat-y; z-index:2; height:100%; position:absolute; } #SidebarBottom { margin-left:33px; height:100%; background: url("../../Content/images/SidebarImage.png") no-repeat bottom; } #NavigationContainer { position:absolute; top:350px; width:100%; background-color:#bbc4c3; height:29px; z-index:1; left: 0px; } #Navigation { margin-left:190px; font-family:Calibri,Sans-Serif; } #Navigation li { float:left; list-style:none; padding-right:3%; padding-top:6px; font-size:100%; } #Navigation a:link,a:active,a:visited { color:#012235; text-decoration:none; font-weight:500; } #Navigation a:hover { color:White; } #WebLinks { float:right; color:#00324b; margin-top:50px; width: 375px; } #WebLinks span { float:left; margin-right:7px; margin-left:21px; font-size:10pt; margin-top:8px; font-family:Helvetica; } #WebLinks ul li { float:left; padding-right:7px; list-style:none; } #WebLinks ul li a { text-decoration:none; font-size:8pt; color:#00324b; font-weight:normal; } #WebLinks ul li a img { border-style:none; } #WebLinks ul li a:hover { color:#bcc5c4; }
解决方法
显然你正在寻找
Faux columns技术:-)