2列布局的问题 [英] Problem with 2 columns layout
问题描述
嗨
我在下面粘贴的代码只是练习所以颜色很傻，
它是帮我看看哪里是。这次的文字没有设置为
。
我正在处理固定的2列/页眉/页脚布局，我适应了
$ b我在网上找到的$ b。
有些东西是错的，因为我不能在我的导航和内容DIV'之间放置1px纯黑色边框
没有布局分手。我在导航和内容div上尝试了
无济于事。我在其他地方放置了
边框。
代码在W3C网站上验证XHTML，并且在验证CSS时出现了一个小错误
在 http://www.htmlhelp.com/cgi-bin/ 上
csscheck.cgi。 （W3C CSS验证器现在已经关闭了。）
错误说：
-Error：选择器必须以AZ，az，AZ范围内的字符开头
Unicode字符161-255，或转义的Unicode字符作为
数字代码。
无法想象错误，但我确定它与我的
破坏的布局无关。
我在Firefox 2和IE 7中测试并运行XP home ed。 sp2。
这是代码：
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict / / EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = " HTTP：//www.w3.org/1999/xhtml"郎= QUOT;恩" xml：lang =" en">
< head>
< title> XHTML 1.0 Strict Template< / title>
< meta http-equiv =" Content-type" content =" text / html;
charset = iso-8859-1" />
< meta http-equiv =" Content-Language"含量=" EN-US" />
< style type =" text / css">
html * {
margin：0 ;
填充：0;
}
身体{
保证金：20px;
背景：＃E7AD52;
颜色：＃000000;
}
div＃container {
宽度：700px;
保证金：自动;
背景：＃EF1616;
颜色：＃000000;
border ：1px纯黑色;
}
div＃header {
背景：＃16EF2B;
颜色：＃ 000000;
身高：80px;
边框底部：1px纯黑色;
}
div＃navigation {
浮动：左;
宽度：200px;
背景：＃EF1616;
颜色：＃000000 ;
}
div #content {
float：right;
宽度：500px;
背景：＃6979DB;
颜色：＃000000;
}
div＃footer {
clear：both;
背景：＃D07867;
颜色： ＃000000;
border-top：1px纯黑色;
}
< / style>
< / head>
< body>
< div id =" container">
< div id =" header">
< h1>世界棕榈< / h1>
< / div>
< div id =" navigation">
列长列很长填充填充长文本列
文字傻很长很填充傻傻的make make make make text
填充很长的文字
列傻傻很长柱很长柱填充长填充
填充物长傻很长很傻傻傻长填充物制作栏目
填充物使傻〜
长期填充非常好。
< / div>
< div id =" content">
列长长列非常长填充填充长文本列
文字很傻很长很填充窗台y make make make make text
填充很长的文字
列傻傻很长柱很长柱填充填充长制作
填充物长傻很长傻傻傻长填充物制作柱子
填充物傻乎乎
很长很长填充。
非常好填充傻长长填充柱长傻
傻列填充填充填充非常填充文字填充填充柱制作
填充使文字非常好
非常填充填充长非常填充柱非常长填充物
傻傻非常使填充物愚蠢制作柱柱
填充长文字很长长填充栏使文字非常好
傻列填充傻文字填充文字填充填充填充物制作
make make make文本填充物
填充填充符使得愚蠢的文本文本填充非常填充
列非常
列文本长列使傻长文本非常非常非常非常非常充足的填充物
非常长的填充物填充非常填充愚蠢非常使填充文本
填充文本使愚蠢的文本
text长填充填充文本填充长文本很长很长
填充填充填充傻长制作列使傻长列长
制作非常
列长长列非常长填充填充长文本栏目
文字傻很长很傻傻赚制作长文字
填充很长文本
柱子傻傻很长柱很长柱填充物长填充
填充物长傻很长很傻傻傻长填充物制作柱子
填充物制作很傻
很长很长的填充。
非常让填充傻长长的填充柱长得傻
傻列填充填充填充非常填充文字填充填充栏制作
填充使文字非常好
make very fill fill long make very very填充柱很长非常填充物
傻很让填料傻逼制作柱柱
填充长文字很长文字很长填充栏使文字非常好
傻列填充傻文填文填充填充填充制作
make make make文本填充
填充填充填充制作文本文本填充使填充非常充填
栏非常
< / div>
< div id =" footer">
页脚
< / div>
< / div>
< / body>
< / html>
非常感谢您的帮助
Patrick
vaindiouxatyahoo.com
varois83写道：
嗨
我在下面粘贴的代码只是练习所以颜色很傻，
它可以帮助我看看它在哪里。这次的文字没有设置为
。
我正在处理固定的2列/页眉/页脚布局，我适应了
$ b我在网上找到的$ b。
有些东西是错的，因为我不能在我的导航和内容DIV'之间放置1px纯黑色边框
没有布局分手。我在导航和内容div上尝试了
无济于事。我在其他地方放置了
边框。
代码在W3C网站上验证XHTML，并且在验证CSS时出现了一个小错误
在 http://www.htmlhelp.com/cgi-bin/ 上
csscheck.cgi。 （W3C CSS验证器现在已经关闭了。）
错误说：
-Error：选择器必须以AZ，az，AZ范围内的字符开头
Unicode字符161-255，或转义的Unicode字符作为
数字代码。
无法想象错误，但我确定它与我的
破坏的布局无关。
我在Firefox 2和IE 7中测试并运行XP home ed。 sp2。
这是代码：
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict / / EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = " HTTP：//www.w3.org/1999/xhtml"郎= QUOT;恩" xml：lang =" en">
< head>
< title> XHTML 1.0 Strict Template< / title>
< meta http-equiv =" Content-type" content =" text / html;
charset = iso-8859-1" />
< meta http-equiv =" Content-Language"含量=" EN-US" />
< style type =" text / css">
html * {
margin：0 ;
填充：0;
}
如果你的容器只使用700px，那么你不需要
设置页面每个元素的边距和填充。实际上，
将用于托管文本的块级元素的填充设置为0px
a不好主意：这将使阅读更加困难，文本通风更少。 />
body {
margin：20px;
background：＃E7AD52;
color ：＃000000;
}
如果容器将在剩余的可用
宽度内居中，那为什么你需要设置保证金？这是不需要的。
div＃container {
宽度：700px;
保证金：汽车;
背景：＃EF1616;
颜色：＃000000;
边框：1px纯黑色;
}
div＃header {
背景：＃16EF2B;
颜色：＃000000;
身高：80px;
border-bottom：1px纯黑色;
}
div＃navigation {
float：左;
宽度：200px;
背景：＃EF1616;
颜色：＃000000;
}
div #content {
float：right;
宽度：500px;
背景：＃6979DB;
颜色：＃000000;
}
div＃footer {
clear：both;
clear：右边更好。
背景：＃D07867;
颜色：＃000000;
border-top：1px纯黑色;
}
< / style>
< / head>
< body>
< div id =" container">
请注意，< div id =" container"复制正文的角色
元素：可以删除完全是< div
id =" container"让身体像你的< div id ="容器一样行动，所以
，DOM树少了复杂且易于管理。
< div id =" header">
< h1>世界棕榈< / h1>
< / div>
< div id =" navigation">
列长长列非常长填充填写填充长文本栏目
文字傻很长很傻傻赚制作长文字
填写很长的文字
柱傻傻很长柱很长柱填充物长填充
填充物长傻很长傻傻傻长填充物制作柱子
填充物傻傻
很长很长。
< / div>
< div id =" content">
列长长列非常长填充填充长文本列
文字很傻很长很傻傻傻傻的做长文字
填充很长的文字
列傻傻很长柱很长柱填充填充长< br $> b $ b填充物长傻很长傻傻傻长填充物制作柱子
填充物制作傻瓜
长期填充非常。
非常使填充傻长长填充柱长傻
傻列填充填充填充非常填充文字填充填充柱制作
填充使文字非常好
非常填充填充长非常填充柱非常长填充物
傻傻非常使填充物愚蠢制作柱柱
填充长文字非常长填充栏使文字非常好
傻列填充傻文字填充文字填充填充填充物制作
make m ake make text filler
填充填充符make make make make text make make very stuff
column very
column text long column傻傻的长文字填充傻很好
非常长的填充填充非常填充傻非常使填充文本
填充文本使愚蠢的文本
文本长填充填充文本填充长文本很长很长
填充填充填充傻长制作列使傻长列长
make very
列长长列非常长填充填充长文本栏
文字傻很长很傻傻赚make make make text
填充很长的文字
栏傻傻很长柱很长柱填充物长填充
填充物长傻很长傻傻傻长填充物制作柱子
填充物傻乎乎
很长很长填充。
非常使填充傻长长填充柱长m ake傻傻的
傻傻的填充填充填充非常填充文字填充填充栏制作
填充使文字非常好
make very fill填充很长非常填充柱非常长填充物
傻很让填料傻使制作柱柱
填充长文字很长文字非常长填充栏使文字非常
傻列填充傻文字填充文字填充填充填充制作
make make make文本填充
填充列填充使傻制作文本文本填充非常填充
列非常
< / div>
< div id =" footer">
页脚
< / div>
< / div>
< / body>
< / html>
非常感谢您的帮助
Patrick
vaindiouxatyahoo.com
这是我的解决方案：
http://www.gtalbot.org/NvuSection/Nv...STemplate.html
我刚设置边框宽度为3px，使其非常明显，明显。
$ b $bGérard
-
在您的网站中使用Web标准网页（2006年12月更新）
http：// developer。 mozilla.org/en/docs...your_Web_Pages
GérardTalbotaécrit：
varois83写道：
>嗨
[snipped]
>>
Patrick
vaindiouxatyahoo.com
这是我的解决方案：
http://www.gtalbot.org/NvuSection/Nv...STemplate.html
我刚设置边框宽度为3px，使其非常明显，引人注目。
我刚刚检查了页面，它可以与IE7，Safari 2.0.4，
Firefox 2.0.0.1，Seamonkey 1.1和Opera一起工作9.20。
$ b $bGérard
-
在网页中使用网络标准（2006年12月更新）
http://developer.mozilla.org/en/docs...your_Web_Pages
Scripsit varois83：
代码在W3C网站上验证XHTML并且有一个在 http：//上验证CSS时出现小错误
www.htmlhelp.com/cgi-bin/
csscheck.cgi。 （W3C CSS验证器现在已经关闭了。）
（最近W3C CSS Validator出现了一些奇怪的现象。
我们希望他们能尽快解决。=
错误说：
- 错误：选择器必须以AZ，az，
Unicode字符161-255范围内的字符开头，或者转义为Unicode字符作为
数字代码。
无法解决这个错误，但我确定它与我的
破损布局无关。
如果你仔细查看错误信息，你会注意到它与
" *"有关。并且在 http://www.htmlhelp.com/tools/csscheck/you 可以阅读：
注意：CSSCheck主要是一个CSS1检查器。许多CSS2属性支持
，但新的CSS2选择器将g导致错误。
和通用选择器*确实是一个新的CSS2选择器。
-
Jukka K. Korpela（Yucca）
http://www.cs.tut.fi/~jkorpela/
Hi
The code I am pasting below is just practice so the colors are goofy,
it''s to help me see what is where. The text isn''t styled either at
this time.
I am working on a fixed 2 columns/header/footer layout that I adapted
from one I found on the web.
Something is wrong as I can''t place a 1px solid black border between
my navigation and content DIV''s without the layout breaking up. I
tried on both the navigation and content div''s to no avail. I placed
the border everywhere else.
The code validate for XHTML on the W3C site and there is a minor error
while validating the CSS on http://www.htmlhelp.com/cgi-bin/
csscheck.cgi. (W3C CSS validator is down right now.)
The error says:
-Error: Selectors must begin with a character in the range A-Z, a-z,
Unicode characters 161-255, or an escaped Unicode character as a
numeric code.
Can''t figure that error out but I am sure it has nothing to do with my
broken layout.
I test in Firefox 2 and IE 7 and am running XP home ed. sp2.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>XHTML 1.0 Strict Template</title>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
html * {
margin: 0;
padding: 0;
}
body {
margin: 20px;
background: #E7AD52;
color: #000000;
}
div#container {
width: 700px;
margin: auto;
background: #EF1616;
color: #000000;
border: 1px solid black;
}
div#header {
background: #16EF2B;
color: #000000;
height: 80px;
border-bottom: 1px solid black;
}
div#navigation {
float: left;
width: 200px;
background: #EF1616;
color: #000000;
}
div#content {
float: right;
width: 500px;
background: #6979DB;
color: #000000;
}
div#footer {
clear: both;
background: #D07867;
color: #000000;
border-top: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Palms of the world</h1>
</div>
<div id="navigation">
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
</div>
<div id="content">
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
very make make fill silly long long filler column long make silly
silly column filler fill fill very filler text fill filler column make
fill make text very make
make very fill fill long make very filler column very long very filler
silly very make filler silly make make column column
fill long make long text very make long fill column make text very
silly column filler silly text fill text filler filler filler make
make make make text filler
fill column filler make silly make text text fill make very filler
column very
column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text
filler text make silly text
text long fill fill make text fill long text very silly long long
filler filler fill silly long make column make silly long column long
make very
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
very make make fill silly long long filler column long make silly
silly column filler fill fill very filler text fill filler column make
fill make text very make
make very fill fill long make very filler column very long very filler
silly very make filler silly make make column column
fill long make long text very make long fill column make text very
silly column filler silly text fill text filler filler filler make
make make make text filler
fill column filler make silly make text text fill make very filler
column very
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Thanks a lot for your help
Patrick
vaindiouxatyahoo.com
varois83 wrote :Hi
The code I am pasting below is just practice so the colors are goofy,
it''s to help me see what is where. The text isn''t styled either at
this time.
I am working on a fixed 2 columns/header/footer layout that I adapted
from one I found on the web.
Something is wrong as I can''t place a 1px solid black border between
my navigation and content DIV''s without the layout breaking up. I
tried on both the navigation and content div''s to no avail. I placed
the border everywhere else.
The code validate for XHTML on the W3C site and there is a minor error
while validating the CSS on http://www.htmlhelp.com/cgi-bin/
csscheck.cgi. (W3C CSS validator is down right now.)
The error says:
-Error: Selectors must begin with a character in the range A-Z, a-z,
Unicode characters 161-255, or an escaped Unicode character as a
numeric code.
Can''t figure that error out but I am sure it has nothing to do with my
broken layout.
I test in Firefox 2 and IE 7 and am running XP home ed. sp2.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>XHTML 1.0 Strict Template</title>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
html * {
margin: 0;
padding: 0;
}If your container is only going to use 700px, then you do not need to
set the margin and padding of every element of the page. In fact,
setting the padding of block-level elements used to host text to 0px is
a bad idea: this will make reading more difficult, less ventilated text.
body {
margin: 20px;
background: #E7AD52;
color: #000000;
}If container is going to be centered within the remaining available
width, then why do you need to set the margin? It''s unneeded.
div#container {
width: 700px;
margin: auto;
background: #EF1616;
color: #000000;
border: 1px solid black;
}
div#header {
background: #16EF2B;
color: #000000;
height: 80px;
border-bottom: 1px solid black;
}
div#navigation {
float: left;
width: 200px;
background: #EF1616;
color: #000000;
}
div#content {
float: right;
width: 500px;
background: #6979DB;
color: #000000;
}
div#footer {
clear: both;clear: right is better.
background: #D07867;
color: #000000;
border-top: 1px solid black;
}
</style>
</head>
<body>
<div id="container">Notice here that <div id="container"duplicates the role of the body
element: it could be possible to remove entirely the <div
id="container"and let the body act like your <div id="container"so
that the DOM tree is less complex and easier to manage.
<div id="header">
<h1>Palms of the world</h1>
</div>
<div id="navigation">
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
</div>
<div id="content">
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
very make make fill silly long long filler column long make silly
silly column filler fill fill very filler text fill filler column make
fill make text very make
make very fill fill long make very filler column very long very filler
silly very make filler silly make make column column
fill long make long text very make long fill column make text very
silly column filler silly text fill text filler filler filler make
make make make text filler
fill column filler make silly make text text fill make very filler
column very
column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text
filler text make silly text
text long fill fill make text fill long text very silly long long
filler filler fill silly long make column make silly long column long
make very
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
very make make fill silly long long filler column long make silly
silly column filler fill fill very filler text fill filler column make
fill make text very make
make very fill fill long make very filler column very long very filler
silly very make filler silly make make column column
fill long make long text very make long fill column make text very
silly column filler silly text fill text filler filler filler make
make make make text filler
fill column filler make silly make text text fill make very filler
column very
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Thanks a lot for your help
Patrick
vaindiouxatyahoo.com
Here''s my solution:
http://www.gtalbot.org/NvuSection/Nv...STemplate.html
I just set the border-width to 3px to make it very visible, noticeable.
Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Gérard Talbot a écrit :varois83 wrote :>Hi
[snipped]
>>
Patrick
vaindiouxatyahoo.com
Here''s my solution:
http://www.gtalbot.org/NvuSection/Nv...STemplate.html
I just set the border-width to 3px to make it very visible, noticeable.I just checked the page and it works accordingly with IE7, Safari 2.0.4,
Firefox 2.0.0.1, Seamonkey 1.1 and Opera 9.20.
Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Scripsit varois83:
The code validate for XHTML on the W3C site and there is a minor error
while validating the CSS on http://www.htmlhelp.com/cgi-bin/
csscheck.cgi. (W3C CSS validator is down right now.)(There''s been something very odd with the "W3C CSS Validator" recently.
Let''s hope they''ll fix it soon.=
The error says:
-Error: Selectors must begin with a character in the range A-Z, a-z,
Unicode characters 161-255, or an escaped Unicode character as a
numeric code.
Can''t figure that error out but I am sure it has nothing to do with my
broken layout.If you look at the error message closely, you''ll note that it relates to
"*". And at http://www.htmlhelp.com/tools/csscheck/you can read:
"Note: CSSCheck is primarily a CSS1 checker. Many CSS2 properties are
supported, but new CSS2 selectors will generate errors."
And the universal selector "*" is indeed a "new" CSS2 selector.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
这篇关于2列布局的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
