调整 CSS 以扩展标题答案

【问题标题】：tweak CSS to expand header调整 CSS 以扩展标题
【发布时间】：2010-03-04 16:38:48
【问题描述】：

对于这个网站：

http://yoursdproperty.com/

你看到顶部一直有一些额外的空白吗？

我将如何扩展该图像以摆脱该空间？

奇怪的是，运行标题图像的 Flash 文件已经被我更改为页面的宽度。虽然 CSS 中的某些东西使它成为 940 宽的旧尺寸。

请注意，我只对调整 css 或 html 感兴趣，而不是 flash 或 javascript

【问题讨论】：

您应该在此处发布相关的 html 和 css。您是否查看了 #at-flashheader 或 #flashcontent 的 CSS？
嘿 jball 是的，我试过了，调整高度没有做任何事情
Pekka 的回答（如下）进一步说明您为此使用 Flash 的原因，而不是 JavaScript 图像加载器甚至是动画 gif？
我认为您不应该拉伸文本下方的图像（在左上角）。有些照片让这段文字难以阅读，因为对比度不时变得非常低。

标签： css flash

【解决方案1】：

你需要改变html中embed标签的宽度

<embed height="250" width="1050" wmode="transparent" quality="high" name="topheader" id="topheader" src="/templates/pjo_joomlaforall/images/header.swf" type="application/x-shockwave-flash">

然后从 div #at-flashheader 中删除 width:940

【讨论】：

【解决方案2】：

问题（正确吗？）：

如何使 Flash 影片扩展到页面的整个宽度（而不是 940 像素）？
如何使 Flash 影片位于其父元素的顶部，从而位于页面的顶部？

以上操作无需修改 Javascript 或 Flash 即可完成。

答案：

第 1 部分：
您似乎正在使用 FlashObject 来嵌入 Flash。
FlashObject 接受多个参数，其中第 3 个和第 4 个参数表示元素的宽度和高度属性。

只要设置了这些属性，它们就会覆盖您应用的任何其他 CSS 类。
要将宽度更改为 100%，您必须将 940 更改为 1040，或者可能更改为“100%”。

 <script type="text/javascript">
    var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", '100%', 250, 7);
    fo.addParam("wmode", "transparent");
    fo.write("flashcontent");
 </script>

虽然这可能算作使用 Javascript，但它是唯一可行的解决方案。

第 2 部分：
您正在处理的实际 swf 是 240 像素宽和 200 像素高。
Flash 文件中的“image”部分只有 50px 高，位于 swf 的垂直中心。

无法使用 CSS 放大 SWF 中 50 像素的中心。
您可以做的是使用 CSS 放大 swf 以使中心的高度符合您的需要，然后使用更多的 CSS 裁剪顶部和底部的空白。

将嵌入标签放置在溢出被隐藏的元素内，并为嵌入应用负上边距（或负位置），等于您希望裁剪的空白。

<style type="text/css"> 
#at-flashheader{ 
    overflow:hidden
}
#flashcontent{
    margin-top:-40px;
}
</style>
<div id="at-flashheader"><div id="flashcontent"></div></div>

'当然，如果 swf 的宽度是百分比，这将不会真正起作用，因为空白的高度不会是恒定的。如果将宽度设置为常数，例如 1040px，则可以相应地设置负上边距。

顺便说一句：

您确实应该使用 Mootools 或 JQuery 而不是 Flash。
举个例子——我的浏览器上有 Flashblock，为了看看你在说什么，我不得不跳过去。如果我一直在使用 iPhone，那么跳绳也无济于事。

【讨论】：

【解决方案3】：

将margin-top:-45px 添加到类at-flashheader

【讨论】：

但底部有更多空白。可以拉伸整个东西吗？
这取决于 Flash 电影的制作方式。拉伸它可能会使它看起来像废话。只需使电影大小合适即可。

【解决方案4】：

您的 Flash 电影需要为 960 x 250 才能达到该空间的全宽和全长（它将位于经纪人照片的后面，对吗？）。

把它放在左边：0；和顶部：0；你是直的。

【讨论】：

我将 Flash doc 上的尺寸更改为我认为的 1050 宽。如果您在 images 文件夹中打开 swf 文件，您会看到它更宽。所以它必须在 CSS 中调整它的大小。
看起来像从右边切换你的#at-flasheader:0;向左：0；做了左对齐的伎俩。使用 Firebug，看起来 .swf 占据了整个 div。所以电影尺寸是关闭的。电影里面有空白吗？
不行，打开 images 文件夹中的 header.swf 文件。它应该以原始格式播放幻灯片。
嘿，你知道我的朋友还是什么？
很奇怪。抱歉耽搁了;生日周末！我确实看到它是正确的尺寸。让我想想接下来我能做什么......

【解决方案5】：

不是您的问题的答案，但为什么这首先出现在 Flash 中？据我所知，这样做的唯一效果是当您关闭 JavaScript 时标题保持空白。

【讨论】：

我赞成这个（除非我没有票了......），特别是因为 js/jQuery 会更流畅地实现相同的效果。或者像动画 .gif 这样简单的东西可以工作... =/
@ricebowl：我同意，但不同意 GIF 动画。您不能或至少不应该将 GIF（或 PNG8）用于照片：可用颜色数（256）太少，无法很好地绘制彩色照片，而且它的压缩算法无法像 JPEG 一样压缩照片压缩（后者也适用于 PNG24）。
@Marcel，关于动画gifs（和pngs）的质量，我绝对同意，我的意思只是建议有更好的——而且技术含量更低的跨浏览器，跨平台-意味着实现OP的目标而不是使用Flash。 =)

【解决方案6】：

我想说几点：

使它成为一个 javascript 图像淡入淡出画廊。它的处理器密集度更低，更有可能在所有平台上工作，而且更容易上手。
这可能有点多，但将站点宽度链接到 960 像素（请参阅 www.960.gs）将使其更适合以 1024x768（仍然是常见分辨率）运行而没有水平滚动条的人的浏览器窗口.

【讨论】：

【解决方案7】：

通过使用舞台宽度和舞台高度变量在 Flash 中使用动作脚本来完成。如果您没有 Flash 源，请将 swf 包装到一个新的 swf 中，以便新的 swf 扩展嵌套的 swf。

【讨论】：

【解决方案8】：

你必须按照 Emily 说的去做，让 Flash 填充页眉区域。

在您的情况下，您可以在 FlashObject 调用中更改对象/嵌入标签的宽度：

var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", "1050", "250", "7");

但据我所知，您仍然会在顶部有空白，因为 swf 文件（或者更确切地说是 swf 文件中的图像）具有内置的空白。您必须编辑 Flash 以消除空白。

【讨论】：