我搞砸了CSS ......我想 [英] I screwed up the CSS...I think
问题描述
我使用EW3和应用样式任务窗格将样式应用于页面上的div。 任务窗格设置为通过我正在使用的css文件向我显示所有可用的样式。 一切都工作正常然后我无意中做错了什么我被卡住了。
I use EW3 and the apply styles task pane to apply styles to divs on a page. The task pane is set to show me all available styles via the css file I'm using. Everything was working fine and then I inadvertently did something wrong and I'm stuck.
现在，任务窗格中只显示两种样式（#masthead和#top_nav）我怀疑我做了一些错误的css代码（见下文）。一切都很好，但事实并非如此，我感到很困惑。反馈将不胜感激。
Now, only two styles show up in the task pane (#masthead and #top_nav) and I suspect I did something wrong to the css code (see below). Everything was working fine and then it wasn't and I'm baffled. Feedback would be appreciated.
PS，对于那些读过我过去帖子的人，你会注意到我正在努力学习和学习。
PS, for those of you that have read my past posts you'll notice I'm trying real hard and learning.
/ * CSS布局* / b
#masthead {
$
background-color：#FFFFFF;
宽度：900px;
身高：135px;
保证金权利：自动;
margin-left：auto;
background-image：url（'images / Florida-Secondary-Border-B.jpg'）;
background-repeat：no-repeat;
clip：rect（10px，auto，auto，auto）;
}
#top_nav {
border-bottom：3px double＃3463FF;
宽度：900px;
身高：24px;
background-color：#FFFFFF;
保证金权利：自动;
margin-left：auto;
h1 {font-family：Verdana，Geneva，Tahoma，sans-serif;
font-family：Verdana，Geneva，Tahoma，sans-serif;
font-size：8pt;
font-weight：bold;
text-align：center;
}
#container {
最小宽度：600px;
宽度：900px;
保证金权利：自动;
margin-left：auto;
最小高度：300px;
background-color：#FFFFFF;
}
#left_col {
宽度：200px;
float：left;
最小高度：300px;
background-color：#FFFFFF;
}
#right_col {
border-width：thin;
border-color：＃336CFC;
宽度：194px;
float：right;
最小高度：300px;
background-color：#FFFFFF;
border-left-style：dotted;
padding-right：3px;
padding-left：3px;
font-family：Arial，Helvetica，sans-serif;
font-size：9pt;
font-weight：bold;
text-align：right;
}
#page_content {
margin-left：200px;
保证金权利：200px;
background-color：#FFFFFF;
padding-left：8px;
}
#footer {
清除：两者;
background-color：＃0000FF;
宽度：900px;
身高：30px;
保证金权利：自动;
margin-left：auto;
}
#reservations {
background-color：#FFFFFF;
font-family：Arial，Helvetica，sans-serif;
font-size：11pt;
宽度：900px;
身高：40px;
}
＃rt-col-Art {
background-image：url（'Florida-Collage-1.jpg'）;
background-repeat：no-repeat;
宽度：200px;
清除：两者;
身高：900px;
}
＃rt-col-text {
font-family：Arial，Helvetica，sans-serif;
font-size：8pt;
font-weight：bold;
保证金权利：10px;
}
.greenbold {
font-family：Cambria，Cochin，Georgia，Times，"Times New Roman"，serif;
font-size：11pt;
颜色：＃9C2938;
font-weight：bold;
text-align：center;
}
/* CSS layout */
#masthead {
background-color: #FFFFFF;
width: 900px;
height: 135px;
margin-right: auto;
margin-left: auto;
background-image: url('images/Florida-Secondary-Border-B.jpg');
background-repeat: no-repeat;
clip: rect(10px, auto, auto, auto);
}
#top_nav {
border-bottom: 3px double #3463FF;
width: 900px;
height: 24px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
h1 { font-family: Verdana, Geneva, Tahoma, sans-serif;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 8pt;
font-weight: bold;
text-align: center;
}
#container {
min-width: 600px;
width: 900px;
margin-right: auto;
margin-left: auto;
min-height: 300px;
background-color: #FFFFFF;
}
#left_col {
width: 200px;
float: left;
min-height: 300px;
background-color: #FFFFFF;
}
#right_col {
border-width: thin;
border-color: #336CFC;
width: 194px;
float: right;
min-height: 300px;
background-color: #FFFFFF;
border-left-style: dotted;
padding-right: 3px;
padding-left: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
text-align: right;
}
#page_content {
margin-left: 200px;
margin-right: 200px;
background-color: #FFFFFF;
padding-left: 8px;
}
#footer {
clear: both;
background-color: #0000FF;
width: 900px;
height: 30px;
margin-right: auto;
margin-left: auto;
}
#reservations {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
width: 900px;
height: 40px;
}
#rt-col-Art {
background-image: url('Florida-Collage-1.jpg');
background-repeat: no-repeat;
width: 200px;
clear: both;
height: 900px;
}
#rt-col-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
margin-right: 10px;
}
.greenbold {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: 11pt;
color: #9C2938;
font-weight: bold;
text-align: center;
}
推荐答案
Tony，
我知道您正在尝试但请提供指向使用上述css的真实页面的链接。我们需要在内容中看到它以提供帮助。但是，从代码中可以看出一些事情。
I recognize that you are trying but would you please provide a link to a real page that uses the css above. We need to see it in situ with content to provide help. However, there are a few things I can say from looking at the code.
首先，不要在网上使用积分。这是纸张16点等于物理英寸的固定测量单位。一个在网络上没有意义的定义因为在网络上问题是通过物理尺寸来解决的。我有4个montiors连接到运行两个不同操作系统的系统
。它们是13英寸的OS X 1280x1024。屏幕，1240"1440x1024"屏幕，1280x1024在12"屏幕和23x"1920x1050"屏幕。您的8pt类型可以是与最高分辨率屏幕上的4.2pt打印相同的物理尺寸
到6.5pt在纸上最低分辨率的屏幕。其中三个屏幕是非常常见的分辨率，而最高分辨率主要是在非常高端的笔记本电脑上。这些笔记本电脑经常附带预先选择的大字体，以便人们更容易阅读文字。这将导致类型大约增加30％，并且您为高度指定的所有大小都会导致显示问题。
First, don't use points on the web. that is a fixed unit of measurement for paper 16 points equal physical inch. A defintition that has not meaning on the web since on the web the issue is resolution by physical size. I have 4 montiors connected to systems running two different operating systems. They are OS X 1280x1024 on a 13" screen, 1440x1024 on a 12.1" screen, 1280x1024 on a 12" screen and 1920x1050 on a 23" screen. You 8pt type can be the same physical size as 4.2pt print on the highest resolution screen to 6.5pt on paper on the lowest resoltuion of the screens. Three of those screens are extremely common resolutions while the highest resolution is found primarily on very high end laptops. Those laptops frequently ship with large fonts pre-selected to make it easier for folks to read text on them. That will cause the type to be approximately 30% larger and all the sizing you have specified for heights are linkely to result is display problems.
其次，基于Verdana的大小是20％大于Arial和你列出的其他替代字体，所以没有安装Verdana的人（也就是使用Mac而不使用Mac的人：Office，Linux或其他非MS操作系统）会看到荒谬的
小文本。这就是为什么我不建议在网上使用Verdana。
Second, you size basing on Verdana which is 20% larger than Arial and the other alternative fonts you list so someone who does not have Verdana installed (aka folks using Macs without Mac: Office, Linux or other non -MS operating systems) will see absurdly small text. this is why I do not recommend using Verdana on the web.
注意"使用"结尾处的大小差异。在以下两行中：
Notice the difference in size at the end of "using" in the two lines below:
这是使用Verdana编写的。
这是使用Arial编写的。
第三个问题，你是否在yoru列上设置了高度。这意味着如果超出适合它的内容将被切断或创建滚动条。如果没有足够的内容，您将有不必要的空白空间。不要将高度放在文本容器上。
Third issue, is you have heights set on yoru columns. That means if the content more than will fit it will either be cut off or create a scrollbar. If there isn't enough content you will have unnecessary empty space. Don't put heights on text containers.
最后，＃top_nav定义中的h1定义无效。在h1之前应该有一个结束}。
Finally, you have the h1 definition inside your #top_nav definition is invalid. There should be a closing } before the h1.
这篇关于我搞砸了CSS ......我想的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
