问题标签 [fluid]

我正在努力将设计好的网页布局变为现实。该设计可能有点不寻常，所以我不确定是否可以实现。基本上，我将有一个 900 像素的固定宽度内容框。内容框将位于页面正文的中间。我想向页面添加两个垂直列，并带有褪色的 png。左侧的 png 将从左侧的纯黑色变为右侧的透明。右侧的 png 将从右侧的纯黑色渐变为左侧的透明。这两个 png 的宽度分别为 250 像素。一旦所有东西都定位好，布局应该看起来像一张在左右边缘褪色的纸。但是，诀窍在于重新调整页面大小。我想确保当屏幕宽度小于 1500 像素时（两列都部分在屏幕之外），列不会在内容框下方滑动，而只是缩小到零。请考虑下面的图片。黑色轮廓是屏幕，蓝色是内容，红色是列。当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 考虑下面的图像。黑色轮廓是屏幕，蓝色是内容，红色是列。当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 考虑下面的图像。黑色轮廓是屏幕，蓝色是内容，红色是列。当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 柱子分开了，但仍然保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 柱子分开了，但仍然保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3]

** 无法发布图片 :(

我正在使用typo3 制作我的第一个网站，我需要在我的第一页上放置一个带有随机页面的框。

我做了一个前端扩展，里面有一个 ViewHelper，它显示了一个带有 HelloWorld 文本的框。

我的问题是如何获取有关页面的信息，获取随机页面及其内容？

您可以访问FB.Canvas.getPageInfo以阅读信息，但它们似乎无法滚动到流体高度的精确位置，因为根据开发人员文档FB.Canvas.scrollTo，仅当 Canvas Height 设置为“可设置（默认：800px）”时才启用。

知道为什么吗？有什么解决方法吗？

我正在尝试在typo3 页面中使用页面内容图像。我上传了 2 张图片，在 DB 中只存储了文件名。

好的 - 我在上传目录中找到了图片！但是现在我必须如何显示图像？！

我可以对上传目录 url 进行 hrdcode 并从 db 添加文件名，但这真的很丑而且不灵活。

我尝试使用<f:image />但没有机会，因为它需要一个资源路径？！好的 - 我找到了资源目录，但我无法从 cms 中的标准typo3 页面上传图像。

这<f:image />对我来说真的很有用，因为我需要显示不同尺寸的图像并裁剪它们。这一切都在 ViewHelper 中实现，但我不能告诉 ViewHelper 在上传目录中拍摄我的图像。

请帮助我如何使用页面上的图像。页面内容上的图片上传菜单在后端非常有用，但我无法在前端显示结果。

我让自己陷入了一些困境，我有一个固定宽度的站点，但需要两个流体宽度条才能 100% 穿过屏幕。我正在为相关网站使用一个相当糟糕的 wordpress 模板，每次保存任何设置时，它都会根据其设置保存内容宽度。在这种情况下，它是 900 像素。

事情是我对整个网站的 900 像素感到满意，它只是我需要 100% 的页眉栏和页脚栏，即使这些栏内的元素也可以是 900 像素，我只需要颜色扩展到屏幕的每一侧.

有问题的网站是http://mysterybox.co/您可以从下面的图片中看到我需要扩展哪个栏。如果有人能指出我正确的方向，那就太好了。

我在扩展中使用了自己的流体渲染器：

我$fluidTemplate稍后使用它来分配模板文件、变量并渲染它：

一切正常，除了->render()通话。自 TYPO3 4.6 以来，我收到一个错误 500，没有任何指定的异常。使用 TYPO3 4.5 LTS 它正在工作！

我希望有人有一个想法。提前致谢！

我试图使按钮响应并缩放到浏览器大小。

我确实将图像设置为标签上的背景图像，但似乎没有得到预期的效果。我现在正在使用与以下代码内联的图像。

HTML

CSS

现场示例 http://www.oatbook.co.uk/preview/

问题是它当前响应宽度，但显示整个精灵的高度似乎保持不变。

接受其他最佳实践建议

我正在寻找一种情况，其中一些导航按钮粘在浏览器窗口的边缘，我假设一些 css 和 javascript，我已经很长时间没有进行任何编码了，我想知道是否有人可以指出我正确的方向。

http://www.flickr.com/photos/66009984@N00/6824355131/

我想获得流畅的布局，但在设计布局时遇到了一些问题。

我想到的是一种布局，其中页面的内容部分总是填满整个浏览器的宽度。在内容的左侧，我有两个宽度可能不同的菜单。

可以在此处找到所需布局的快速草图： 布局

我有这个按钮：

我想知道是否可以在 facebook 应用程序 iframe 中执行类似 jquery 代码的操作：

谢谢 ;）！

编辑1（按照马修约翰斯顿的回答）：

这就是我的意思：http: //jsfiddle.net/ajXjg/4/

注意： FB.Canvas.scrollTo不适用于流体画布设置

编辑2（对于需要[我现在希望]的人）：

唯一的方法是使用锚链接，你不会得到平滑的滚动:(...在 Firefox 中它们不起作用！