Div 布局 - 重复图像帮助

发布于 07-26 06:56 字数 373 浏览 9 评论 0原文

我试图将我网站的主要内容部分包裹在这种笔记本风格的外观中。

然而,在主要内容部分,我有一个重复的图像,有时会在图像的中间被切断,看起来不正确,有谁知道如何在 Photoshop 或 CSS 中解决这个问题?

我必须保持垂直的液体布局,具有固定的宽度,但是我希望它看起来像笔记本,而不是被剪掉并看起来很垃圾。

这是该网站,其中包含所发生情况的示例,谢谢:

http://www .seth-duncan.com/Test/Notebook/notebook.html

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:

http://www.seth-duncan.com/Test/Notebook/notebook.html

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

快乐很简单2024-08-02 06:56:36

您的示例网址对我来说看起来不错,但我想我知道您在说什么。 我认为,您需要做的是强制 notebookContent div 的高度为活页夹书脊图像高度的下一个倍数。 在 jQuery 中,它会是这样的:

$(document).ready(function() {
    var height = $('#notebookContent').height();
    var offset = height % 24;
    if(offset)
        $('#notebookContent').css('min-height', height + 24 - offset);
});

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:

$(document).ready(function() {
    var height = $('#notebookContent').height();
    var offset = height % 24;
    if(offset)
        $('#notebookContent').css('min-height', height + 24 - offset);
});
沦落红尘2024-08-02 06:56:36

如果您想使用重复图像作为背景,则应使用

div {line-height: 24px; /* equal to the height of the image */
    }

所有其他图像(在您的情况下为content-Top.pngcontent-Bottom .png)应该是该图像或行高度的倍数。 我认为您遇到的问题是底部图像高 31 像素,顶部图像高 41 像素,重复图像高 24 像素。 这些高度不会很好地配合。

JavaScript 可以解决这个问题,但您可能会发现更简单地编辑图像以使它们共享共同的高度。

我认为
等于一行高,并且

标签之间的填充/边距应调整为等于一(或的整数倍)行高以保留主题。

A List Apart 这里有一篇关于此类事情的好文章:http: //www.alistapart.com/articles/settingtypeontheweb

另外,因为有时我就是无法阻止自己(啊,失眠,我的宿敌...),我为您拼凑了一个演示页面,其中包含页面上的 CSS 供您细读-请注意:http://www.davidrhysthomas.co.uk/so/notebook.html

If you want to use a repeating image as a background, you should use

div {line-height: 24px; /* equal to the height of the image */
    }

and then all other images (in your case content-Top.png and content-Bottom.png) should be multiples of that image-, or line-, height. The problem you're having, I think, is that the bottom image is 31px tall, the top image is 41px tall and the repeating image is 24px tall. Those heights aren't going to mesh well.

Javascript can resolve this, but you'll probably find it easier to simply edit your images so that they share common heights.

I think <br /> is equal to one line-height, and padding/margins between <p> tags should be adjusted to be equal to one (or whole multiples of) the line height to preserve the theme.

A List Apart has a good article on this kind of thing over here: http://www.alistapart.com/articles/settingtypeontheweb.

Also, because sometimes I just can't stop myself (ah, insomnia, my old enemy...), I cobbled together a demo-page for you, with the CSS on-page for your perusing-pleasure: http://www.davidrhysthomas.co.uk/so/notebook.html

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文