Div 布局 - 重复图像帮助
我试图将我网站的主要内容部分包裹在这种笔记本风格的外观中。
然而,在主要内容部分,我有一个重复的图像,有时会在图像的中间被切断,看起来不正确,有谁知道如何在 Photoshop 或 CSS 中解决这个问题?
我必须保持垂直的液体布局,具有固定的宽度,但是我希望它看起来像笔记本,而不是被剪掉并看起来很垃圾。
这是该网站,其中包含所发生情况的示例,谢谢:
I am trying to get the main content portion of my website to be wrapped in this notebook style look.
However on the main content portion I have a repeating image that sometimes cuts off at halfway through the image and doesn't look right, does anyone have any ideas on how to fix this either in Photoshop or with CSS ?
I have to maintain a liquid layout vertically, with the fixed width, however I want it to look like a notebook and not cut out and look trashy.
Here is the site with the example of what happens, thanks:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(2)
如果您想使用重复图像作为背景,则应使用
div {line-height: 24px; /* equal to the height of the image */
}
所有其他图像(在您的情况下为content-Top.png
和content-Bottom .png
)应该是该图像或行高度的倍数。 我认为您遇到的问题是底部图像高 31 像素,顶部图像高 41 像素,重复图像高 24 像素。 这些高度不会很好地配合。
JavaScript 可以解决这个问题,但您可能会发现更简单地编辑图像以使它们共享共同的高度。
我认为
等于一行高,并且
标签之间的填充/边距应调整为等于一(或的整数倍)行高以保留主题。
A List Apart 这里有一篇关于此类事情的好文章:http: //www.alistapart.com/articles/settingtypeontheweb。
另外,因为有时我就是无法阻止自己(啊,失眠,我的宿敌...),我为您拼凑了一个演示页面,其中包含页面上的 CSS 供您细读-请注意:http://www.davidrhysthomas.co.uk/so/notebook.html
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
您的示例网址对我来说看起来不错,但我想我知道您在说什么。 我认为,您需要做的是强制
notebookContent
div 的高度为活页夹书脊图像高度的下一个倍数。 在 jQuery 中,它会是这样的:Your sample URL looks fine to me, but I think I know what you're talking about. What you would need to do, I think, is force the
notebookContent
div to a height that's the next multiple up of the binder-spine image's height. In jQuery, it'd be something like: