使用带有CSS的HTML为类设计网站原型。CSS不起作用，我也不知道哪里出了问题

Question

我设计了一个简单的线框，如下所示：http://i.imgur.com/APIdBZ0.png

我正试图在HTML & CSS中重新创建它，这样我就可以在它的基础上构建。

HTML代码

<!doctype html>
<html> 
<head> 
<title> Trinity FC </title> 

<style type="text/css" media="all"> 
@import "trinityfc.css"; 
</style> 

</head>


<body> 
<div id="container"> 

    <div id="header">
    <h1>Main Heading And Logo </h1>
    </div>

    <div id="Column1">


        <div id="side">



                <div id="menu"
                <p>menu sample text sample text sample text sample text sample text sample text sample text sample text</p>
                </div>

                <div id="table"
                <p>table sample text sample text sample text sample text sample text sample text sample text sample text</p>
                </div>

        </div>

    </div>



    <div id="Column2">

        <div id="news">

                <div id="newspic">
                <p>News Picture sample text sample text sample text sample text sample text sample text sample text sample text</p>
                </div>

                <div id="newstext">
                <p>News Text sample text sample text sample text sample text sample text sample text sample text sample text</p>
                </div>
        </div>

        <div id="footer"
        <p>Footer and Copyright Information</p>
        </div>


    </div>

</div> 

</body> 

为了澄清div标记，"Column1“由"side”组成，后者由“菜单”和"table“组成。

“菜单”对应于线框图像中的绿色菜单框。

“表”对应于线框图像中的红色列表框。

"Column2“包括”新闻“(包括”新闻“和”新闻文本“)以及”页脚“。

“新闻”对应于线框图像中的黄色新闻图片-标题框。

"newstext“对应于线框图像中的橙色新闻文本预览框。

“页脚”对应于线框图像中的灰色页脚框。

CSS

body{
background: #F3F2E8;
color: #51463D;
font: normal 100%/1#5 "Lucida Grande", "Lucida sans"; 
padding: 1em;
}

h1  {
    color: #A14141;
    font: normal 1#5em Georgia, serif;
    margin: 0;
}

em  {
    font-family: Palatino, Georgia, Times, serif;
}

img     {
    max-width: 100%;
}

#container 
{ 
background-color:#F0F5F3
}

#header {  
background-color:blue; 
width: 100%

}

#column1 {  
width:22.5%;
float:left;

}

#side { 
background-color:white; 
width:100%;
height:100%;

}
    #menu {  
    background-color:green; 
    width:95%;
    height:45%;
    }

    #table { 
    background-color:red; 
    width:95%;
    height:45%;
    }



#column2 {  
width:72.5%;
height:85%;
float:left;
}

    #news { 
    background-color:black; 
    width: 100%;
    }
        #newspic { 
        background-color:yellow; 
        width:100%;
        height:70%;
        }

        #newstext { 
        background-color:#FF6600; 
        width:100%;
        height:30%;     
        }

    #footer { 
    background-color:grey; 

    }

这使得我的页面看起来像这样：http://i.imgur.com/xes3uDl.png

几天前，我和我的家教一起上课，他们无法立即发现密码出了什么问题。我告诉他们我会把它带回家，再看一遍，看看是怎么回事，但我还是没办法解决。谁一眼就能看出是怎么回事？

Answer 1

在我回答之前，我只想说，如果你的导师什么都看不见的话，他就不是很好。

1. HTML类与CSS之间的大写错误匹配。
2. 您的CSS需要稍微调整一下，必要时添加相对位置，指定尺寸，说明显示类型和其他各种位元。
3. 你没有column2类吗？
4. 我只申请了一些小工作。你需要把其他的东西都清理干净。
5. 找一位新的网络开发老师。

我在工作，所以任何进一步的问题只要问，我会在任何可能的时候回答。

http://jsfiddle.net/ru4kej1t/

新的CSS：

​

body{
background: #F3F2E8;
color: #51463D;
font: normal 100%/1#5 "Lucida Grande", "Lucida sans"; 
padding: 1em;
}

h1  {
    color: #A14141;
    font: normal 1#5em Georgia, serif;
    margin: 0;
}

em  {
    font-family: Palatino, Georgia, Times, serif;
}

img     {
    max-width: 100%;
}

#container 
{ 
background-color:#F0F5F3
        position:relative;
}

#header {  
background-color:blue; 
width: 100%
position:relative;
}

#column1 {  
width:22.5%;
float:left;
height:500px;
position:relative;
background:red;
display:block;
}
#column2 {  
width:77%;
height:500px;
position:relative;
background:yellow;
display:inline-block;
}

<body> 
<div id="container"> 

    <div id="header">
    <h1>Main Heading And Logo </h1>
    </div>

    <div id="column1">


        <div id="side">



                <div id="menu"
                <p>menu sample text sample text sample text sample text sample text sample text sample text sample text</p>
                </div>

                <div id="table"
                <p>table sample text sample text sample text sample text sample text sample text sample text sample text</p>
                </div>

        </div>

    </div>



    <div id="column2">

        <div id="news">

                <div id="newspic">
                <p>News Picture sample text sample text sample text sample text sample text sample text sample text sample text</p>
                </div>

                <div id="newstext">
                <p>News Text sample text sample text sample text sample text sample text sample text sample text sample text</p>
                </div>
        </div>

        <div id="footer"
        <p>Footer and Copyright Information</p>
        </div>


    </div>

</div> 

​