为什么会出现在顶部和中间slicings差距

我有这2页

http://slacklog.heroku.com/ http://slacklog.heroku.com/signup/date

钠,你可以在两个看到有从顶部和中部及底部和中间图像的间隙....

这里是我的html

<div class="content" align="center"> <div class="slacklog_log"></div> <div class="main_column_section"> <div class="wide_box_top"></div> <div class="wide_box_body" id="main_content_body"> <div id="white"> <div class="wide_box_top_white"></div> <div class="wide_box_body_white"> <!-- unique per page --> <!-- stuff --> </div> <div class="wide_box_bottom_white"></div> </div> </div> <div class="wide_box_bottom"></div> </div> </div><!--content-->

如果有什么事我可以给你帮助ü帮助我.... BTW。 我找了填充或保证金,我没有看到它在所有的萤火...在此先感谢

--------------解决方案-------------

我已经成功通过应用以下样式来修复它:

#white {
width: 650px;
margin: 0 auto;
}

.wide_box_top_white {
background: url("/images/white_top.png") no-repeat scroll 0 0 transparent;
height: 9px;
float: left;
width: 650px;
display: block;
}

.wide_box_body_white {
background: url("/images/white_middle.png") repeat-y scroll 0 0 transparent;
float: left;
width: 650px;
display: block;
}

.wide_box_bottom_white {
background: url("/images/white_bottom.png") no-repeat scroll 0 0 transparent;
height: 10px;
float: left;
display: block;
width: 650px;
}

请注意,您并不需要所有这些额外的风格,但他们不会伤害它。 我主要是加浮动:左宽度:650像素 显示: #white DIV中的类....

有很多你可以做更多,以提高总体结构。 比如我真的不建议使用图像效果的白色背景,你在你的类.wide_box_body_white做,它可能更好地摆脱.wide_box_bottom_white和.wide_box_top_white类的,只是给一个.wide_box_body_white边界半径。 ...

正如stephenmurdoch建议,可以从wide_box_top_white,wide_box_body_white删除图像和wide_box_bottom_white而这种风格添加到您的#white DIV

#white {
background-color: white;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
-khtml-border-radius: 12px;
-moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
}

这是因为你没有重置边距属性。 你有在顶部H1日期/ H1拥有的margin-top设置,在底部你有保证金底部集P结束日期/页。 如果你让他们0,它会工作。

你说,你已经在Firebug检查了,但我相信你没有检查.content H1和p :)

分类:HTML 时间:2012-01-01 人气:0
本文关键词: HTML,CSS
分享到:

相关文章

  • 桌面的Safari(苹果机和Windows)VS移动Safari浏览器(iPhone) - HTML,CSS,JS支持 2012-01-13

    为支持HTML,CSS和Javascript在桌面的Safari(苹果机和Windows)和移动Safari浏览器(iPhone)是否相同? 如果我做一些事情iPhone Safari和我的Windows 7 PC测试和调试上使用桌面版本的Safari,fininsh后,它看起来在两个一样的吗? 是否有支持HTML,CSS和JavaScript方面的Safari浏览器(桌​​面)和Safari(iphone)之间的区别? --------------解决方案------------- 它们都是基

  • 在哪个国家的webdevelopers(XHTML,CSS,Javascript和Framworks)有着很好的Schope? 2012-01-13

    在哪个国家的webdevelopers(XHTML,CSS,Javascript和Framworks)有着很好的Schope? --------------解决方案------------- 如果薪水在这里的问题的话,最好支付雇主通常是在西部和北部欧洲的金融部门. 虽然他们往往是不好的应力计...;) 但它的快乐很难进入金融领域没有任何经验.

  • 编辑通过管理面板网站模板(HTML,CSS,JS ..)是好是坏? 2012-01-16

    这个问题对于Web开发人员和架构师. 你怎么认为它有一个网站,你能编辑所有的模板的好或坏主意(HTML,CSS,JS,图片..)直接从管理面板? 如果您经常更新网站这种情况下,您无​​需搜索你的网站,你的开发机器的本地版本,搜索某个特定页面,进行修改,提交到源代码控制服务器,使部署..相反,所有你需要的仅仅是点击页面或本页面上的任何元素上右键,单击编辑,更新HTML的一部分,然后单击保存 - 长达30秒钟 - 所有从你的浏览器;) 你仍然可以有版本控制系统,这种方法和回滚这是错误地在网站上修改了

  • 匹配的网址,这并不包括ASP,apsx,CSS,htm.html,JPG 2012-01-22

    Q-1. 匹配的网址不包含ASP,apsx,CSS,htm.html,JPG, Q-2. 匹配的网址不与ASP,apsx,CSS,htm.html,JPG结束, --------------解决方案------------- 你想使用"匹配计数"功能,并使其匹配0. 例如. (匹配心不是ASPX或CSS中的所有字符,然后一个点,然后什么 ^.*\.((aspx) | (css)){0}.*$ 编辑,添加^(开始)和$(结束行字符) Q-1. 这是更好地做使用普通字符串搜索,但如果你坚持

  • HTML,CSS,JavaScript的 - 电子书(文本)读卡器 2012-02-02

    我是一个新手,所以要善待我:) 我有我想要呈现在html中一个大的文本,我希望文本"填满屏幕的房地产'取决于浏览器/设备 - 移动VS桌面 - 如果走极端话,我希望它树干剩余的文本,并在另一个HTML(即下页)呈现它. 我试图寻找分页和诸如此类的东西,我使用的HTML,CSS,JavaScript的..而且很新的这一切:) 我明白我的问题可能是模糊的,但即使是一个小的方向将帮助这么多! (只是为了让事情更清晰,我试图建立一个JavaScript的电子书阅读器,我可以在将来添加公共领域的书籍).

  • 什么是一些优秀的HTML 5,CSS 3和JavaScript的博客? 2012-02-02

    我下面Ajaxian的,但我不知道是否有关于HTML 5等真棒博客,CSS 3,JavaScript和这样的? --------------解决方案------------- CSS3.info是找出有关的最新动态,在CSS的世界很不错. 列表除了通常有关于Web开发(不包括专门HTML5,CSS3,JavaScript)的大文章. 从我的谷歌阅读器一些JavaScript的博客 http://www.davidflanagan.com/ http://dreaminginjavascript.

  • 移动开发仅使用HTML,CSS和JavaScript的 2012-02-26

    我想介绍一个类移动开发. 在过去,使用PhoneGap的一样东西长安装过程中阻止从完成任务很多,所以这次我希望让事情尽可能的简单. 我的首选语言的JavaScript,CSS和HTML. 我知道我可以创建使用这些语言网站的移动版本,但会通过Web浏览器. 是否有可能建立一个应用程序纯粹使用这些语言,并在手机上安装它,使用图标和一切? --------------解决方案------------- 你应该看看jQuery Mobile的. 这是一个HTML5 Javascript库,便于应用的创建

  • 不要CSS设计限制自己**前期**来布局,CSS可以处理? 2012-03-04

    经询问,这个问题如何到达CSS禅意?我现在明白了,我有问题,大多与定位. 我发现一些文章,告知CSS并不总是不够好为布局系统. http://echochamber.me/viewtopic.php?f=11&t=40154 http://www.flownet.com/ron/css-rant.html http://blog.workaround.org/2009/03/17/dont-abuse-css-for-page-layout/ 你的CSS设计师限价自己前期到设计,CSS可以处理?

  • 良好的所见即所得的网页编辑器(PHP,CSS,HTML,JavaScript)的为Ubuntu? 2012-03-22

    我在寻找的建议,以什么好的易于使用的web编辑器? 它需要编辑的PHP,JavaScript的HTML,CSS. 我在寻找的东西会加快我的发展目前我使用的是纳米. --------------解决方案------------- 我会去与Eclipse. 查阅Eclipse + PDT +集锦. 我现在的开发系统的工作原理是这样的: 4个显示器:1编码(蚀),1对Firefox,1 IE浏览器,一个用于日志. 1虚拟机是生产服务器的关闭重复. 使用AutoHotkey的 ,正如我保存的页面,它就会

  • 如何使用HTML,CSS和JavaScript添加一行亮点? 2012-03-28

    我想知道我怎么能使用HTML,CSS和JavaScript使行的亮点. 这里是我的代码: people.html <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div> <d

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 2.050 (s). 10 q(s)