苦苦挣扎将这种布局转换为CSS [英] Struggling to convert this layout into CSS
问题描述
这个想法很简单。该网站的宽度为800px，位于浏览器窗口的中间位置，在网站的两侧，我想要一个与之对齐的不同的
背景图像。如果我使用基于表格的
布局，则代码如下：
< head>
< style type =" text / css">
#bgleft {
background：url（left_half_circle.gif）right top repeat-y;
}
#bgright {
背景：url（right_half_circle.gif）左上方重复-y;
}
< / style>
< / head>
< body marginheight =" 0" MARGINWIDTH =" 0" TOPMARGIN = QUOT; 0" leftmargin =" 0">
< table border =" 0" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" width =" 100％">
< tr>
< td width =" 49％" id =" bgleft">< img src =" pixel.gif" ALT ="" height =" 1"
width =" 1">< / td>
< td width =" 2％" valign =" top">
我的800px宽内容到这里< br>
< img src =" foo.gif"宽度= QUOT; 800" height =" 1000">
< td width =" 49％" id =" bgright">< img src =" pixel.gif" ALT ="" height =" 1"
width =" 1">< / td>
< / tr>
< / table>
< / body>
< / html>
供参考，假设左边bg图像如下：
http：//www.gdls .com / images / contacts / ... alf_circle.gif 和右边像
这个： http://www.gdls.com/images/contacts/...alf_circle.gif
mark写道：
这个想法很简单。
实际上，它*可能是*简单[原文如此]，但是你描述它的方式，
它真的不是' T。你提出的问题似乎是不必要的复杂。
该网站是800px宽
但我的浏览器的视口宽度为792px。 :-(（有时候它是1280像素，但很多时候它们介于两者之间。大部分时间 - 实际上是在事实上，实际上是虚拟的所有的时间 - 它的大小与800px不同。）
并且位于浏览器窗口中间的
中间，
好吧，不是当它比浏览器窗口宽时
两边的该网站我想要一个不同的
背景图像对齐它。如果我这样做基于表格
布局，代码如下：
等一下;如果你*是*它*会* ...？非常有条件的话
现有网站。这就是你的原因没有提供URL？因为你没有
没有实际的代码你试图转换？
&l t; head>
< style type =" text / css">
#bgleft {
背景： url（left_half_circle.gif）右上方重复-y; }
#bgright {
background：url（right_half_circle.gif）left top repeat-y; }
您可能（或可能不想）根据功能命名您的课程而不是内容。当我看到＃" bgleft"时，我认为这是你想要的背景
左边。你的意思是它是由左半部分b / b
半圆组成的背景。即使我们假设你总是希望你的右边边框装饰你的
右边边框装饰，你仍然可以
想要改变装饰，即使用其他一些图像，如
squiggles.gif。在这种情况下，＃bgleft会很傻。
< / style>
< / head>
< body MARGINHEIGHT =" 0" MARGINWIDTH =" 0" TOPMARGIN = QUOT; 0" leftmargin =" 0">
< table border =" 0" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" width =" 100％">
< tr>
< td width =" 49％" id =" bgleft">< img src =" pixel.gif" ALT ="" height =" 1"
width =" 1">< / td>
< td width =" 2％" valign =" top">
我的800px宽内容到这里< br>
< img src =" foo.gif"宽度= QUOT; 800" height =" 1000">
< td width =" 49％" id =" bgright">< img src =" pixel.gif" ALT ="" height =" 1"
width =" 1">< / td>
< / tr>
< / table>
< / body>
< / html>
这是因为代码不是实际的（但只是在你的帖子上输入了
苍蝇）上面的代码不要做你声称你想要它的东西
吗？你不知道800px宽的内容吗？除了40000px或更宽的显示器外，是不是可能是
800px？
>
作为参考，假设左边的bg图像如下：
http://www.gdls.com/images/contacts/...alf_circle.gif 和就像
这样： http：// www.gdls.com/images/contacts/...alf_circle.gif
如需参考我们假设您复制并粘贴而无需支付
关注？ ;-)
无论如何，我在我认为你可能真正想要的东西上摇摆不定，而且我已经想出了这个（doctype HTML 4.01 strict，等等。遗漏）：
img＃foo {width：800px;高度：1000像素; }
#bgright {background：url（right_half_circle.gif）left top repeat-y; }
#bgleft {background：url（left_half_circle.gif）右上方重复-y; }
#stuff {width：800px;保证金：.5em auto;
< div id =" bgright">
< div id =" bgleft">
< p id =" stuff">我的800px宽内容到这里
< img id =" foo" SRC =" foo.gif" alt =" foo">< / p>
< / div>
< / div>
在FF，Netscape，Opera和IE6中测试过。它*在我的
Opera中干净利落*，它似乎无法接受宽度设置作为最大值。
（对于Opera，你会需要在< imgin
HTML之前添加< brright，之后它会中断，但是自动边距仍然无法正常工作。）
那里可能是已知的解决方法，但我会让你自己看看
。我甚至不确定我是否已经解决了你真正的问题。
-
John
" John Hosking" < Jo ** @ DELETE.Hosking.name.INVALIDwrote in message
news：45 ********** @ news.bluewin.ch ...
< blockquote class =post_quotes>
mark写道：
>这个想法很简单。
实际上，它*可能是*简单[原文如此]，但你描述它的方式，它
真的不是' T。你提出的问题似乎是不必要的，因为这很复杂。
我会等你看看你的解决方案......
>该网站是800px宽
但我的浏览器的视口宽792px。 :-(（有时它是1280像素，但很多时间它介于两者之间。大部分时间 - 实际上，
几乎所有的时间 - 它的大小与800px不同。）
这完全不是重点，你为什么要选择聪明
我的样本值仅仅是为了这个例子的好处吗？我可以给出400px，600px，1200px的
。它仅用于测试
目的。
>并且位于浏览器窗口的中间，
好吧，不是当它比浏览器窗口更宽时
yawn
>
>我想要一个与之对齐的不同
背景图片。如果我使用基于表格的布局进行此操作，代码如下：
等一下;如果你*是* ... *会* ...？对于现有网站来说，非常有条件的单词
。这就是为什么你没有提供URL？因为你没有
没有实际的代码，你试图转换
伙计，你有什么问题？我没有提供URL，因为我正在本地测试
。我已经提供了示例代码，真的很抱歉，如果它不够好，那么
你。如果你想测试它，那么你所要做的就是复制和粘贴，并保存我链接的图像。
>< head>
< style type =" text / css">
#bgleft {
背景：url（left_half_circle。 gif）右上方重复-y; }
#bgright {
背景：url（right_half_circle.gif）左上方重复-y; }
您可能（或可能不想）根据功能命名您的课程而不是内容。当我看到＃" bgleft"时，我认为这是你想要的背景
左边。你的意思是它是由左半部分b / b
半圆组成的背景。即使我们假设你总是希望你的右边边框装饰你的
右边边框装饰，你仍然可以
想要改变装饰，即使用其他一些图像，如
squiggles.gif。在这种情况下，＃bgleft会很傻。
为什么你在跟我说话，好像我有点迟钝？我正在测试一个
布局，故事结束。我很抱歉，如果你不喜欢我给我的ID命名的方式。
>< / style>
< / head>
< body marginheight =" 0" MARGINWIDTH =" 0" TOPMARGIN = QUOT; 0" leftmargin =" 0">
< table border =" 0" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" width =" 100％">
< tr>
< td width =" 49％" id =" bgleft">< img src =" pixel.gif" ALT ="" height =" 1"
width =" 1">< / td>
< td width =" 2％" valign =" top">
我的800px宽内容在这里< br>
< img src =" foo.gif"宽度= QUOT; 800" height =" 1000">
< td width =" 49％" id =" bgright">< img src =" pixel.gif" ALT ="" height =" 1"
width =" 1">< / td>
< / tr>
< / table>
< / body>
< / html>
是不是因为代码不是实际的（只是输入了你的帖子上面就是b / b
）上面的代码不做你声称你想做的事吗？
对不起，但确实如此。我把它测试之前就把它测试了。我已经多次使用过这种类型的布局了。我觉得很有趣你
告诉我我的代码并没有做我已经知道的事情。更像是你不要实际理解我想要的东西。
你不知道800px宽的内容吗？ ;除了40000px或更宽的显示器外，不可能是800px
？
你为什么给我讲课？看来你没有兴趣尝试回复我的帖子，你只想通过尝试纠正我的每个实例
>供参考，假设左边的bg图像如下：
http://www.gdls.com/images/contacts/...alf_circle.gif 和右边
喜欢这： http://www.gdls.com/images/contacts/ ... alf_circle.gif
参考我们假设您复制并粘贴而不支付
关注度如何？ ;-)
抱歉，你错了。我发布的代码完全符合预期。我两次用同一个链接粘贴了
（真的很遗憾），但是没有一个genuis弄明白我
打了一个错字，因为图像名称就在那里CSS
无论如何，我采取了我认为你可能真正想要的方式，我来了这个（文档类型HTML）
4.01严格，等人省略）：
img＃foo {width：800px;高度：1000像素; }
#bgright {background：url（right_half_circle.gif）left top repeat-y; }
#bgleft {background：url（left_half_circle.gif）右上方重复-y; }
#stuff {width：800px;保证金：.5em auto;
< div id =" bgright">
< div id =" bgleft">
< p id =" stuff">我的800px宽内容到这里
< img id =" foo" SRC =" foo.gif" alt =" foo">< / p>
< / div>
< / div>
嗯，这真的证明你没有测试我的代码（所有你需要做的就是
复制并粘贴到它一个HTML文件并保存图像）。这根本不是我想要的b $ b。你已将背景放在浏览器的两侧
窗口，最左边和最右边。图像本身并不重要（它们可能是摩托车上猪的图片）。你可以放一个你想要的任何形象
那里，重点是坐下。在示例代码中我给出了背景
固定在内容div的任一侧，而不是在
浏览器窗口的两侧。
>我甚至不确定我是否已经解决了你的真正问题。
这是你在整个帖子中唯一说过的，我实际上同意
with。为什么你在做出回应时必须做这样的屁股？如果最终你会想出一个解决方案，但是你得到了它，那么我会原谅你给b
$ b完全错了，告诉我我的代码不行实际上是什么时候。
" John Hosking" < Jo ** @ DELETE.Hosking.name.INVALIDwrote in message
news：45 ********** @ news.bluewin.ch ...
以下是我将OP中的代码粘贴到HTML文件中以及
图像的内容：
http://img112.imageshack.us/my.php?i...icture2tm6 .png （
http：// img112 .imageshack.us / img112 / 5360 / picture2tm6.png ）
调整大小的浏览器：
http://img294.imageshack.us/my.php?i...icture3dt4.png （
http://img294.imageshack.us/ img294 / 4214 / picture3dt4.png ）注意有
没有水平滚动条。
Thi s正是我想要实现的目标。因此，你错误地说我的代码错了，或者说我在发布之前没有检查我的代码。我建议你在以这种方式打电话给我之前弄清楚你的事实。
The idea of this is very simle. The site is 800px wide and sits in the
middle of the browser window, on either side of the site I want a different
background image aligned against it. If I were doing this with table based
layout the code would be as follows:
<head>
<style type="text/css">
#bgleft {
background: url(left_half_circle.gif) right top repeat-y;
}
#bgright {
background: url(right_half_circle.gif) left top repeat-y;
}
</style>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="49%" id="bgleft"><img src="pixel.gif" alt="" height="1"
width="1"></td>
<td width="2%" valign="top">
My 800px wide content goes here<br>
<img src="foo.gif" width="800" height="1000">
<td width="49%" id="bgright"><img src="pixel.gif" alt="" height="1"
width="1"></td>
</tr>
</table>
</body>
</html>
For reference assume the left bg image is like:
http://www.gdls.com/images/contacts/...alf_circle.gif and the right like
this: http://www.gdls.com/images/contacts/...alf_circle.gif
mark wrote:The idea of this is very simle.Actually, it *could* be simple [sic], but the way you''ve described it,
it really isn''t. The problem as you''ve posed it seems to be
unnecessarily complicated.
The site is 800px wideBut my browser''s viewport is 792px wide. :-( (Sometimes it''s 1280px, but
a lot of the time it''s somewhere in between. Most of the time -- in
fact, virtually ALL of the time -- it''s some size different from 800px.)
and sits in the
middle of the browser window,well, not when it''s wider than the browser window
on either side of the site I want a different
background image aligned against it. If I were doing this with table based
layout the code would be as follows:Wait a minute; if you *were*... it *would*...? Awfully conditional words
for an existing site. Is that why you didn''t provide a URL? Because you
don''t have actual code you''re trying to "convert"?
<head>
<style type="text/css">
#bgleft {
background: url(left_half_circle.gif) right top repeat-y; }
#bgright {
background: url(right_half_circle.gif) left top repeat-y; }You may (or may not) want to name your classes based on function rather
than content. When I see #"bgleft", I think it''s the background you want
on the left. You mean it to be the background made of left-half
semi-circles. Even if we assume you''re going to always want your
right-side border decoration on the right, it''s still possible you will
want to change the decoration, i.e., use some other image, like
squiggles.gif. In that case, "#bgleft" will be pretty silly.
</style>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="49%" id="bgleft"><img src="pixel.gif" alt="" height="1"
width="1"></td>
<td width="2%" valign="top">
My 800px wide content goes here<br>
<img src="foo.gif" width="800" height="1000">
<td width="49%" id="bgright"><img src="pixel.gif" alt="" height="1"
width="1"></td>
</tr>
</table>
</body>
</html>Is it because the code isn''t actual (but merely typed in to your post on
the fly) that the code above doesn''t do what you claim you want it to
do? Aren''t you aware that the "800px wide content" isn''t likely to be
800px except on a 40000px or wider display?>
For reference assume the left bg image is like:
http://www.gdls.com/images/contacts/...alf_circle.gif and the right like
this: http://www.gdls.com/images/contacts/...alf_circle.gifHow about for reference we assume you copied and pasted without paying
attention? ;-)
Anyway, I took a swing at what I thought you might really want, and I
came up with this (doctype HTML 4.01 strict, et. al. omitted):
img#foo { width:800px; height:1000px; }
#bgright { background: url(right_half_circle.gif) left top repeat-y; }
#bgleft { background: url(left_half_circle.gif) right top repeat-y; }
#stuff {width:800px; margin:.5em auto;
<div id="bgright">
<div id="bgleft">
<p id="stuff">My 800px wide content goes here
<img id="foo" src="foo.gif" alt="foo"></p>
</div>
</div>
Tested in FF, Netscape, Opera and IE6. It *does not work* cleanly in my
Opera, which doesn''t seem to accept the width setting as a maximum.
(For Opera, you''d need to add the <brright before the <imgin the
HTML, after which it breaks OK, but the auto margins still don''t work.)
There are probably known workarounds for this, but I will let you look
for them yourself. I''m not even sure I''ve been addressing your real problem.
--
John
"John Hosking" <Jo**@DELETE.Hosking.name.INVALIDwrote in message
news:45**********@news.bluewin.ch...mark wrote:>The idea of this is very simle.
Actually, it *could* be simple [sic], but the way you''ve described it, it
really isn''t. The problem as you''ve posed it seems to be unnecessarily
complicated.I''ll wait and see your solution then...
>The site is 800px wide
But my browser''s viewport is 792px wide. :-( (Sometimes it''s 1280px, but a
lot of the time it''s somewhere in between. Most of the time -- in fact,
virtually ALL of the time -- it''s some size different from 800px.)this is totally beside the point, why are you trying to be smart by picking
me out on a sample value I gave merely for the benefit of this example? I
could have given 400px, 600px, 1200px. It''s merely used for testing
purposes.
> and sits in the middle of the browser window,
well, not when it''s wider than the browser windowyawn
>> on either side of the site I want a different
background image aligned against it. If I were doing this with table
based layout the code would be as follows:
Wait a minute; if you *were*... it *would*...? Awfully conditional words
for an existing site. Is that why you didn''t provide a URL? Because you
don''t have actual code you''re trying to "convert"Mate, what is your problem? I didn''t provide a URL because I''m testing
locally. I''ve provided sample code, really sorry if it''s not good enough for
you. If you wish to test it, then all you have to do is copy and paste and
save the images I linked.
><head>
<style type="text/css">
#bgleft {
background: url(left_half_circle.gif) right top repeat-y; }
#bgright {
background: url(right_half_circle.gif) left top repeat-y; }
You may (or may not) want to name your classes based on function rather
than content. When I see #"bgleft", I think it''s the background you want
on the left. You mean it to be the background made of left-half
semi-circles. Even if we assume you''re going to always want your
right-side border decoration on the right, it''s still possible you will
want to change the decoration, i.e., use some other image, like
squiggles.gif. In that case, "#bgleft" will be pretty silly.why are you talking at me like I''m some kind of retard? I''m testing out a
layout, end of story. I''m sorry if you don''t like the way I''m named my IDs.
></style>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="49%" id="bgleft"><img src="pixel.gif" alt="" height="1"
width="1"></td>
<td width="2%" valign="top">
My 800px wide content goes here<br>
<img src="foo.gif" width="800" height="1000">
<td width="49%" id="bgright"><img src="pixel.gif" alt="" height="1"
width="1"></td>
</tr>
</table>
</body>
</html>
Is it because the code isn''t actual (but merely typed in to your post on
the fly) that the code above doesn''t do what you claim you want it to do?I''m sorry, but it does. I tested it before putting it into the post. I''ve
also used this type of layout many times before. I find it funny that you
tell me my code doesn''t do what I already know it does. More like you don''t
actually understand what I want.
Aren''t you aware that the "800px wide content" isn''t likely to be 800px
except on a 40000px or wider display?why are you giving me lectures? It seems you have no interest in trying to
answer my post, you just want to big yourself up by trying to correct me in
every instance
>For reference assume the left bg image is like:
http://www.gdls.com/images/contacts/...alf_circle.gif and the right
like this: http://www.gdls.com/images/contacts/...alf_circle.gif
How about for reference we assume you copied and pasted without paying
attention? ;-)sorry, you''re wrong. The code I posted works EXACTLY as intended. I pasted
the same link twice(really sorry), but doesn''t take a genuis to figure out I
made a typo given the image names are right there in the CSS
Anyway, I took a swing at what I thought you might really want, and I came
up with this (doctype HTML 4.01 strict, et. al. omitted):
img#foo { width:800px; height:1000px; }
#bgright { background: url(right_half_circle.gif) left top repeat-y; }
#bgleft { background: url(left_half_circle.gif) right top repeat-y; }
#stuff {width:800px; margin:.5em auto;
<div id="bgright">
<div id="bgleft">
<p id="stuff">My 800px wide content goes here
<img id="foo" src="foo.gif" alt="foo"></p>
</div>
</div>well, that really is proof you didn''t test my code(all you had to do was
copy and paste it into a HTML file and save the images). This is not at all
what I wanted. You''ve put the backgrounds at either side of the browser
window, far left and far right. The images themselves are unimportant(they
could be pictures of pigs on motorbikes). You could put a any image you want
there, the point is where the sit. In the sample code I gave the background
are fixed on either side of the content div, not on either side of the
browser window.
>I''m not even sure I''ve been addressing your real problem.that''s the only thing you''ve said in your whole post that I actually agree
with. Why do you have to be such an ass when responding? I would have
forgiven you if at the end you''d come up with a solution but you got it
totally wrong, telling my my code doesn''t work when it actually does.
"John Hosking" <Jo**@DELETE.Hosking.name.INVALIDwrote in message
news:45**********@news.bluewin.ch...
Here is what I see if I paste the code in my OP into a HTML file along with
the images:
http://img112.imageshack.us/my.php?i...icture2tm6.png (
http://img112.imageshack.us/img112/5360/picture2tm6.png )
resized browser:
http://img294.imageshack.us/my.php?i...icture3dt4.png (
http://img294.imageshack.us/img294/4214/picture3dt4.png ) notice there are
no horizontal scrollbars.
This is exactly what I want to achieve. Therefore you are wrong in saying
that my code is wrong, or that I didn''t check my code before posted. I
suggest you get your facts straight before calling my out in such a way.
这篇关于苦苦挣扎将这种布局转换为CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
