I've designed a simple wireframe seen here: https://i.sstatic.net/Ro3dl.png
I'm trying to recreate this in HTML & CSS so I can just build on it.
HTML Code
<!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>
To clarify the div tags, "Column1" Consists of "side" which consists of "menu" and "table".
"menu" corresponds to the green menu box in the wireframe image.
"table" corresponds to the red league table box in the wireframe image.
"Column2" consists of "news" (which consists of "newspic" and "newstext"), as well as "footer".
"newspic" corresponds to the yellow news image - headline box in the wireframe image.
"newstext" corresponds to the orange news text preview box in the wireframe image.
"footer" corresponds to the grey footer box in the wireframe image.
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;
}
This leaves me with the page looking like this: https://i.sstatic.net/VcTlU.png
I was in class with my tutor a few days ago and they could not immediately spot what was wrong with the code. I told them I would take it home and look over it again to see what the issue was, but I still can't crack it. Can anyone see what is wrong at a glance?
Before I answer, I'd just like to say that your tutor isn't very good if he couldn't spot anything.
You have mismatching capitalization from your HTML classes to your CSS.
You're CSS required a slight neaten up, adding relative positioning where necessary, specifying dimensions, stating the display type too and various other bits.
You don't have a column2 class?
I have only applied minor work. You'll need to clean everything else up.
Get a new web development teacher.
I'm at work so any further questions just ask and I'll reply whenever I can.
New 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>