Check out this wireframe design I created: https://i.stack.imgur.com/Ro3dl.png
I'm working on translating this into HTML and CSS so that I can further develop it.
The 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 explain the div tags, "Column1" contains "side" which includes "menu" and "table".
"menu" represents the green menu box in the wireframe image.
"table" corresponds to the red league table box in the wireframe image.
"Column2" includes "news" (having "newspic" and "newstext"), along with "footer".
"newspic" reflects the yellow news image - headline box in the wireframe image.
"newstext" matches the orange news text preview box in the wireframe image.
"footer" aligns with the grey footer box in the wireframe image.
CSS Content:
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 is how the page will appear: https://i.stack.imgur.com/VcTlU.png
I presented this to my tutor during a recent class, but they couldn't identify the issue right away. I promised to revisit and inspect the code thoroughly, yet I'm still unable to figure it out. Can anyone easily spot the problem?