问题
使用我的手机查看网站时,我正在创建该网站,并且似乎与我预期的行为不同?
智能手机视图
正如您所看到的那样,页眉和页脚的宽度不会像应该的那样扩展100%,并且在使用桌面浏览器查看时也会如此.
桌面视图
标题CSS
#banner { background-image: url(images/images/bannersketchBG.jpeg); float: left; height: 100px; width: 100%; font-size: 36px; font-style: italic; } #banner1 { float: left; height: 50px; font-style: normal; margin-top: 10px; padding-left: 10px; color: #FFF; font-size: 24pt; top: 0px; } #banner2 { float: left; height: 30px; width: 410px; font-size: 14pt; font-style: italic; padding-left: 30px; color: #FFF; }
页脚CSS
.footer { background-color: #2E2E2E; word-spacing: normal; float: left; color: #FFF; font-weight: bold; width: 100%; height: 100px; bottom: 0px; }
HTML
头
<div align="center"> <div id="banner"> <div id="logo"><img src="images/Joel-Compass-black.png" width="119" height="95" alt="CCFS"></div> <div id ="banner1">Columbus Car Finder Group</div> <div id ="banner2">"Exploring your Needs"</div> </div> </div>
页脚
<div class="footer"> <div class="footercontainer"> <div id="footerTabsContainer"> <div class='tab one'> <ul> <li><a href="#">Find My Car</a></li> </ul> </div> <div class='tab two'> <ul> <li><a href="#">About Us</a></li> </ul> </div> <div class='tab three'> <ul> <li><a href="#">How it Works</a></li> </ul> </div> <div class='tab three'> <ul> <li><a href="#">How it Works</a></li> </ul> </div> <div class='tab five'> <ul> <li><a href="#">Contact Us</a></li> </ul> </div> <div class='tab six'> <ul> <li><a href="#">Home</a></li> </ul> </div> </div> <div class="footerinfo">Web Design - <a href="index.html">CundyTech </a> copyright South West Car Finder 2013</div> </div> </div>
我注意到背景图像也在同一点切断了,所以这可能是溢出问题吗?!
任何帮助或指针将不胜感激!
PS我知道我没有得到正确使用ID和Classes的css的更好点,但我仍在学习所以请不要太讨厌我!