背景图像位置和< pre> /< code>标签问题

我希望背景图像能够突破周围的 边框，因此它显示为与边界文本边缘重叠。 我尝试使用负背景位置，但这使得图像 在边界下消失。 z-index在这里没有帮助，因为它与< pre>的所有 有关。标签。 第一个问题：任何想法如何让图像显示重叠 底层页面和风格内容而不诉诸 复杂化单独的标签和/或绝对定位？ 然后我的页面上有代码示例，我更愿意使用 < ;代码>围绕这些标签。不幸的是，这并没有保持 格式，如< pre>是的，包括空格，返回等等。所以我是 想要使用pre标签而不是添加类''code''，但这个 不正确在html中使用可用的标签。 第二个问题：有没有办法让我的代码标签采用< pre> 质量格式？或者是使用< code>< pre>的唯一方式... < / pre>< / code>组合的？ （使用& nbsp，标签等正确对齐 真的不是一个理想的选项。） 感谢阅读，更多回复！ br /> Rgds Sh。I am building a default sheet for my linux-related pages.Since many linux users still rely on/prefer viewing textmode andunstyled content I try to stick to the correct html tags to pertain goodreadibility on browsers w/o css-support.For important notes, warnings etc I use the <pre> tag, which shows in aneat bordered box when viewed with css, and depending on its class aclarifying background-image is shown.I would like the background image to ''break out'' of the surroundingborder, so it shows as overlapping the bordered text edge.I tried using a negative background-position but that makes the imagedisappear under the border. z-index no help here, as it relates to allof the <pre> tag.FIRST QUESTION: Any idea how I can have the images shown overlappingboth the underlying page and the styled content without resorting tocomplicating separate tags and/or absolute positioning?Then I have code samples on my pages, and I would prefer to use the<code> tags surrounding these. Unfortunately this doesn''t keep theformatting like <pre> does, including spaces, returns etc. So I amtempted to use pre tags instead with a class ''code'' added, but thisisn''t correct use of the available tags in html.SECOND QUESTION: Is there a way of making my code tags adopt the <pre>qualities wrt formatting ? Or is the only way using <code><pre> ...</pre></code> combo''s? (Aligning properly using &nbsp, tabs and such isreally not a desirable option.)Thanks for reading, and more so for replying!RgdsSh.推荐答案 Schraalhans Keukenmeester写道：Schraalhans Keukenmeester wrote:我正在为我的linux相关页面构建一个默认工作表。由于许多linux用户仍然依赖于/更喜欢查看textmode和无格式内容我试着坚持正确的HTML标签与浏览器w / o css-support相关的良好可读性。 我们吗？我使用linux，我偶尔会在其中一个文本 浏览器中检查我的页面，但我通常使用konqueror，有时候使用firefox。你知道 统计数据的用途是什么？我想知道。谢谢！ 对于重要的笔记，警告等我使用< pre>标签，当用css查看时显示在一个整洁的边框中，并根据其类别显示澄清背景图像。 我会坚持使用< pre>对于预先格式化的文本，如公式和 诗歌。为了清晰起见，请保持其预期用途。 我希望背景图像能够突破周围的边界，因此它显示为与边界文本边缘重叠。 br /> 我尝试使用负背景位置，但这会使图像在边界下消失。 z-index在这里没有帮助，因为它涉及< pre>的所有。标签。 在纯文字模式下，这显然毫无意义。这将是图形启用的 。 :) 第一个问题：任何想法如何让图像显示重叠底层页面和样式内容而不诉诸复杂化单独的标签和/或绝对定位？ 我不这么认为，但我不会问我是不是想这样做。 可能确实是javascript或类似的方式。 然后我的页面上有代码示例，我更愿意使用<代码>围绕这些标签。不幸的是，这并没有保持格式，如< pre>确实如此，包括空格，返回等等。所以我很想使用pre标签而不是添加类''code''，但这并没有正确使用html中的可用标签。 我会使用代码标记，并在样式 定义中指定等宽字体。快递是一个明显但丑陋的选择。我可能会选择另一个 字体作为主要选项，并降级为快递给那些 没有其他字体的人。 第二个问题：有没有办法让我的代码标签采用格式化的< pre> 质量？或者是使用< code>< pre>的唯一方式... < / pre>< / code>组合的？ （使用& nbsp，tab等正确对齐确实不是理想的选择。） 在样式表中。见上文。 感谢阅读，更多回复！ I am building a default sheet for my linux-related pages. Since many linux users still rely on/prefer viewing textmode and unstyled content I try to stick to the correct html tags to pertain good readibility on browsers w/o css-support.Do we? I use linux, and I occasionally check my pages in one of the textbrowsers, but I normally use konqueror and sometimes firefox. Do you knowwhat the stats are for text only usage? I would like to know. Thanks! For important notes, warnings etc I use the <pre> tag, which shows in a neat bordered box when viewed with css, and depending on its class a clarifying background-image is shown.I would stick to using <pre> for preformatted text, like formulae andpoetry. Keep it to its intended use for clarity. I would like the background image to ''break out'' of the surrounding border, so it shows as overlapping the bordered text edge. I tried using a negative background-position but that makes the image disappear under the border. z-index no help here, as it relates to all of the <pre> tag.In text only mode, this is obviously pointless. This would be for thegraphically enabled. :) FIRST QUESTION: Any idea how I can have the images shown overlapping both the underlying page and the styled content without resorting to complicating separate tags and/or absolute positioning?I don''t think so, but I wouldn''t ask me if I was trying to do this. Theremay indeed be a way with javascript or something similar. Then I have code samples on my pages, and I would prefer to use the <code> tags surrounding these. Unfortunately this doesn''t keep the formatting like <pre> does, including spaces, returns etc. So I am tempted to use pre tags instead with a class ''code'' added, but this isn''t correct use of the available tags in html.I would use the code tag, and specify a monospace font within the styledefinition. Courier is an obvious but ugly choice. I might pick anotherfont as the primary option, and downgrade back to courier for those whodon''t have the other fonts. SECOND QUESTION: Is there a way of making my code tags adopt the <pre> qualities wrt formatting ? Or is the only way using <code><pre> ... </pre></code> combo''s? (Aligning properly using &nbsp, tabs and such is really not a desirable option.)In a style sheet. See above. Thanks for reading, and more so for replying! 感谢您的询问，我希望这会有所帮助。 Carolyn - Carolyn MarengerThanks for asking, I hope this helps.Carolyn--Carolyn Marenger Carolyn Marenger写道：Carolyn Marenger wrote: Schraalhans Keukenmeester写道： Schraalhans Keukenmeester wrote:我正在为我的linux相关页面构建一个默认表格。因为很多linux用户仍然依赖/更喜欢查看文本模式和无风格的内容我尝试坚持使用正确的html标签，以便在没有css支持的浏览器上获得良好的可读性。 我们？我使用linux，偶尔会在一个文本浏览器中检查我的页面，但我通常使用konqueror，有时候使用firefox。你知道吗？对于纯文字用途，统计数据是什么？我想知道。谢谢！I am building a default sheet for my linux-related pages.Since many linux users still rely on/prefer viewing textmode andunstyled content I try to stick to the correct html tags to pertain goodreadibility on browsers w/o css-support. Do we? I use linux, and I occasionally check my pages in one of the text browsers, but I normally use konqueror and sometimes firefox. Do you know what the stats are for text only usage? I would like to know. Thanks! 嗯，我可能在这里夸大了。我也没有统计数据。我只是想要''所有''那些在那里工作* nix盒子的穷人用 没有安装X支持。或者将我自己的经验投射到 想象中的人群中。换句话说：有可能使用不支持CSS样式的浏览器或者关闭 风格的人来查看我的页面 。从我自己的经验和偏见来看，这样的用户 - 比如任何人 - 更有可能在* nix用户中找到而不是MS 奴隶。至于统计数据，我打算找出答案。 无论如何，坚持（广泛接受的）标准/建议永远不会伤害任何人。Hmm, I may have exaggerated here. And I have no stats either. I was justthinking of ''all'' those poor people out there working on *nix boxes withno X support installed. Or projecting my own experience onto animaginary crowd. So rephrase: It is possible my page will be viewedusing browsers that don''t support css styling, or by people who havestyle turned off. And judging from my own experience and prejudice, suchusers -if any- are more likely to be found amongst *nix users than MSslaves. As for the stats, I intend to find out.Anyways, adhering to (widely accepted) standards/recommendations neverhurt anyone.对于重要的注释，警告等我使用< pre>标签，当用css查看时显示在一个整洁的边框中，并根据其类别显示澄清背景图像。 我会坚持使用<预>对于预先格式化的文本，如公式和诗歌。为了清晰起见，请保持其预期用途。For important notes, warnings etc I use the <pre> tag, which shows in aneat bordered box when viewed with css, and depending on its class aclarifying background-image is shown. I would stick to using <pre> for preformatted text, like formulae and poetry. Keep it to its intended use for clarity. 正是我的观点！我已经看到了最奇怪和非常正统（ab）使用 的标签和构造。所有在流行的浏览器中隐藏得相当不错，但有时候在其他浏览器中接近无法使用。Precisely my point! I''ve seen the weirdest and highly unorthodox (ab)useof tags and constructs. All hidden quite nicely in popular browsers, butclose to unusable in others, at times.我希望背景图片能够突破 '周围的边框，所以它显示为重叠边框文字边缘。 我尝试使用负背景位置，但这使图像消失在边框下。 z-index在这里没有帮助，因为它涉及< pre>的所有。标签。 在纯文本模式下，这显然是没有意义的。这将是图形启用的。 ：）I would like the background image to ''break out'' of the surroundingborder, so it shows as overlapping the bordered text edge.I tried using a negative background-position but that makes the imagedisappear under the border. z-index no help here, as it relates to allof the <pre> tag. In text only mode, this is obviously pointless. This would be for the graphically enabled. :) 正确。上面的纯文本/无css浏览blahblah只是为了遵守标准而作为 的动机/辩护。Correct. The text-only/no-css browsing blahblah above only served as amotivation/defense for my intent to comply with standards.第一个问题：任何想法如何让图像显示重叠底层页面和样式内容而不诉诸复杂化单独的标签和/或绝对定位？ 我我不这么认为，但我不会问我是不是想这样做。有可能确实是javascript或类似的方式。FIRST QUESTION: Any idea how I can have the images shown overlappingboth the underlying page and the styled content without resorting tocomplicating separate tags and/or absolute positioning? I don''t think so, but I wouldn''t ask me if I was trying to do this. There may indeed be a way with javascript or something similar. 我正在尝试使用包装div和相对位置的新结构 $ < pre>之外的bg图像的b $ b标签。不太理想，但是它可以正常工作 sofar（我现在很害怕在IE中尝试我的手工......我可能需要 稍后辅导）。I am trying a new construction with a wrapper div and relative placementof the bg image outside the <pre> tag. Not ideal, but it works okaysofar (only I am scared to try my handiwork in IE now... I may needcounseling later on).然后我的页面上有代码示例，我更愿意使用< code>围绕这些标签。不幸的是，这并没有保持格式，如< pre>确实如此，包括空格，返回等等。所以我很想使用pre标签而不是添加类''code''，但这并没有正确使用html中的可用标签。 我会使用代码标记，并在样式定义中指定等宽字体。快递是一个明显但丑陋的选择。我可能会选择另一种字体作为主要选项，并且对于那些没有其他字体的人，请降级回快递。Then I have code samples on my pages, and I would prefer to use the<code> tags surrounding these. Unfortunately this doesn''t keep theformatting like <pre> does, including spaces, returns etc. So I amtempted to use pre tags instead with a class ''code'' added, but thisisn''t correct use of the available tags in html. I would use the code tag, and specify a monospace font within the style definition. Courier is an obvious but ugly choice. I might pick another font as the primary option, and downgrade back to courier for those who don''t have the other fonts. Courier是_indeed_丑陋的。虽然可识别，并且很快就与许多编码相关联的。任何字体，特别是你会在等宽的部门中找到？？大多数我都遇到过比快递更多或更少的b / b 吸引力。虽然我们正在使用它，但是常规字体会让你感觉好吗？Courier is _indeed_ ugly. recognizable though, and immediatelyassociated by many with coding. Any font in particular you''d go for inthe monospaced department? Most I''ve ran into have as much as or lessappeal than courier. While we''re at it, which regular font strikes yourfancy?第二个问题：有没有办法让我的代码标签采用< pre> < / pre>< / code>组合的？ （使用& nbsp，tab等正确对齐确实不是理想的选择。） 在样式表中。见上文。SECOND QUESTION: Is there a way of making my code tags adopt the <pre>qualities wrt formatting ? Or is the only way using <code><pre> ...</pre></code> combo''s? (Aligning properly using &nbsp, tabs and such isreally not a desirable option.) In a style sheet. See above. 如何确保< code>内容看起来整齐地缩进在非样式的 显示屏上？或许嵌套< pre>在它里面...嗯，也许我在这里太挑剔了。How does one ensure <code> content looks neatly indented on a non-styleddisplay? Perhaps nest a <pre> inside it... Hmm, maybe I am too fussy here.感谢阅读，更多的回复！Thanks for reading, and more so for replying! 谢谢你问，我希望这会有所帮助。 Carolyn Thanks for asking, I hope this helps. Carolyn 欢呼，欢迎。它确实有所帮助，或者至少可以为灵感加油。 间接让我笑（我在浏览器中查看了你的域名。 从未读过整个网站''内容不到10秒。） Sh。Cheers, and welcome. It did help, or at least refuel inspiration.And made me laugh indirectly (I checked out your domain in my browser.Never before read a whole site''s content in under 10 secs.)Sh. Schraalhans Keukenmeester写道：Schraalhans Keukenmeester wrote: Courier是_indeed_丑陋。虽然可识别，但很多人立即与编码相关联。任何字体特别是你会在等宽的部门找到吗？ Courier is _indeed_ ugly. recognizable though, and immediately associated by many with coding. Any font in particular you''d go for in the monospaced department? 我喜欢...... font-family：Bitstream Vera Sans Mono，Lucida Console， " Andale Mono"，monospace; - Toby A Inkster BSc（荣誉）ARCS 与我联系〜 http://tobyinkster.co.uk/contactI like...font-family: "Bitstream Vera Sans Mono", "Lucida Console","Andale Mono", monospace;--Toby A Inkster BSc (Hons) ARCSContact Me ~ http://tobyinkster.co.uk/contact 这篇关于背景图像位置和&lt; pre&gt; /&lt; code&gt;标签问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！