如何在包装器中相对于包装器内的div设置div的位置?

时间:2011-07-07 06:40:41

标签: css width wrapper html css-position

我需要一些帮助。我正在上学进行平面设计,正在建立一个网站作为服务贸易。

我在photoshop中设计了模板,然后将其放入PSD2CSSOnline.com,这会扫出代码并拼接图像。

我能够编辑HTML和CSS足以让顶部的两条粉红色线条延伸到整个浏览器,但我不知道如何让底部的线条做同样的事情,因为不同页面上的文字将会变化,我认为div必须在包装器之外,以拉伸100%的宽度,所以我的问题是如何做到这仍然使它与包装内的div相关?

感谢任何帮助,我花了好几个小时试图解决这个问题!

作为参考,我上传了它,这样您就可以查看源代码并直观地看到我在说什么。要查看它,请转到此处:http://bellairo.com/anytime/

1 个答案:

答案 0 :(得分:0)

我对psd-css有点程序不太熟悉所以这有点难以理解......对于顶部的紫色线条,你似乎有2张图片:1是960 x 30px Layer-13.png,然后是24 x 30px Layer-12-rx.png,它在两个方向下重复到无限远。获得相同的png图像(Layer-12-rx .png)在页面底部执行相同的操作似乎是最简单的 - 在已经存在的图像下面重复此图像:Layer-7.png。

至于你关于线条与你的内容相关的问题:我注意到几乎所有的div都有位置:绝对适用于它们。小心这一点,因为当应用该属性时,它会从正常流程中删除div,因为css定位的东西然后你必须开始指定所有内容,而不是div自然地相互跟随 - 这对于像你的底线只是自然地将自己定位在你的内容之下,无论多么多。你的页脚线所处的div也有这个位置:绝对适用于它,这意味着你总是必须准确地告诉它每个页面的位置。一个开始是将其更改为位置:relative,然后使用left:和top:值,直到它位于正确的位置。然后它应该每次都在文本下面定位。 很好的参考是W3学校 - 定位信息检查出来:http://www.w3schools.com/css/css_positioning.asp