使用 HTML 和 CSS 为 class 设计网站原型。 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" 组成，后者由 "menu" 和 "table" 组成。

"menu"对应线框图中的绿色菜单框。

"table"对应线框图中的红色联赛table框。

"Column2"由"news"组成（由"newspic"和"newstext"组成），以及"footer".

"newspic"对应线框图中的黄色新闻图片-标题框。

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

"footer"对应线框图片中的灰色页脚框。

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

几天前我在 class 和我的导师一起，他们无法立即发现代码有什么问题。我告诉他们我会把它带回家再检查一遍，看看是什么问题，但我仍然无法破解。谁能一眼看出哪里出了问题？

Answer 1

在我回答之前，我想说你的导师不是很好，如果他看不出任何东西。

您的 HTML class 与 CSS 的大小写不匹配。
您 CSS 需要稍微整理一下，在必要时添加相对定位，指定尺寸，也说明显示类型和各种其他位。
您没有第 2 列 class？
我只申请了次要工作。你需要清理其他所有东西。
请一位新的网络开发老师。

我在上班，所以任何其他问题都可以问，我会尽可能回复。

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>

使用 HTML 和 CSS 为 class 设计网站原型。 CSS 不工作，我不确定我哪里出错了

Doing a design prototype of a website for a class using HTML with CSS. CSS isn't working and I'm not sure where I'm going wrong

html

css

layout

wireframe