Let’s use the information obtained from previous topics and create a more or less meaningful layout of the simplest web page. First, let’s define the basic structure of a web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" type="text/css" />
<title>Block layout in HTML5</title>
</head>
<body>
<div id="header">
<h1>easywptutorials.com - Site about Lorem Ipsum</h1>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<div id="sidebar1" class="aside">
<h2>The standard Lorem Ipsum passage</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua..."</p>
</div>
<div id="sidebar2" class="aside">
<h2>1914 translation by H. Rackham</h2>
<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout.</p>
<h3>Options</h3>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<div id="article">
<h2>What is Lorem Ipsum?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
a Latin professor at Hampden-Sydney College in Virginia...</p>
</div>
</div>
<div id="footer">
<p>Contacts: admin@easywptutorials.com</p>
<p>Copyright © easywptutorials.com, 2016</p>
</div>
</body>
</html>
At the beginning there is a site header – a block with a header that contains the page title and navigation bar. Next comes the wrapper block, in which there are two sidebars and a block of the main content of the page. Sidebars conditionally also contain some content, but the main thing is that they are defined before the main block. And at the very bottom is a small footer.
At the beginning of the web page, a file include is defined style.css that will style the web page. Therefore, we will create the styles.css file in the same directory as the web page and define the following content in it:
* {
box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li{
margin: 0;
padding: 0;
border: 0;
font-size: 100%
vertical-align: baseline;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #f7f7f7;
}
#header{
background-color: #f4f4f4;
}
#header h1 {
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
padding: 30px 30px 30px 10px;
clear: both;
}
#nav {
background-color: #eee;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav li {
float: left;
list-style: none;
}
#nav a {
display: block;
color: black;
padding: 10px 25px;
text-decoration: none;
border-right: 1px solid #ccc;
}
#nav li:last-child a {
border-right: none;
}
#nav a:hover {
font-weight: bold;
}
#nav:after {
content: " ";
display: table;
clear: both;
}
.wrapper{
background-color: #f7f7f7;
}
.aside h2 {
font-size: 0.95em;
margin-top: 15px;
}
.aside h3 {
font-size: 0.85em;
margin-top: 10px;
}
.aside p, .aside li {
font-size: .75em;
margin-top: 10px;
}
.aside li{
list-style-type: none;
}
#sidebar1 {
float: left;
width: 20%;
padding: 0 10px 0 20px;
}
#sidebar2 {
float: right;
width: 20%;
padding: 0 20px 0 10px;
}
#article{
background-color: #fafafa;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 20%;
margin-right: 20%;
padding: 15px;
width: 60%;
}
#article:after{
clear:both;
display:table;
content:'';
}
#article h2{
font-size: 1.3em;
margin-bottom:15px;
}
#article p{
line-height: 150%;
margin-bottom: 15px;
}
#footer{
border-top: 1px solid #ccc;
font-size: .8em;
text-align: center;
padding: 10px 10px 30px 10px;
}
#nav ul, #header h1, .wrapper, #footer p {
max-width: 1200px;
margin: 0 auto;
}
.wrapper, #nav, #header, #footer{
min-width: 768px;
}
The first three styles will reset the default style settings for the elements we are using, and will also set the style of the body element.
The following pair of styles controls the display of the header (header) and page title:
#header{
background-color: #f4f4f4;
}
#header h1 {
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
padding: 30px 30px 30px 10px;
clear: both;
}
The following style set controls the creation of the horizontal navigation bar:
#nav {
background-color: #eee;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav li {
float: left;
list-style: none;
}
#nav a {
display: block;
color: black;
padding: 10px 25px;
text-decoration: none;
border-right: 1px solid #ccc;
}
#nav li:last-child a {
border-right: none;
}
#nav a:hover {
font-weight: bold;
}
#nav:after {
content: " ";
display: table;
clear: both;
}
In one of the previous topics, creating a horizontal navigation bar was discussed in detail. In principle, nothing new is added here: elements
Next comes the setting of the middle part of the page, in particular, the sidebars:
.wrapper{
background-color: #f7f7f7;
}
.aside h2 {
font-size: 0.95em;
margin-top: 15px;
}
.aside h3 {
font-size: 0.85em;
margin-top: 10px;
}
.aside p, .aside li {
font-size: .75em;
margin-top: 10px;
}
.aside li{
list-style-type: none;
}
#sidebar1 {
float: left;
width: 20%;
padding: 0 10px 0 20px;
}
#sidebar2 {
float: right;
width: 20%;
padding: 0 20px 0 10px;
}
The wrapper class style allows you to set the background color for the sidebars. Each sidebar has a width of 20% of the page width. Percentage values will automatically adjust the width of the blocks to the width of the browser window when it expands or narrows.
Here are the styles for the main content block and footer:
#article{
background-color: #fafafa;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 20%;
margin-right: 20%;
padding: 15px;
width: 60%;
}
#article:after{
clear:both;
display:table;
content:'';
}
#article h2{
font-size: 1.3em;
margin-bottom:15px;
}
#article p{
line-height: 150%;
margin-bottom: 15px;
}
#footer{
border-top: 1px solid #ccc;
font-size: .8em;
text-align: center;
padding: 10px 10px 30px 10px;
}
Since the sidebars are 20% wide each, the main block is set to 60% width and 20% left and right padding.
And at the end there are a couple of rather important styles:
#nav ul, #header h1, .wrapper, #footer p {
max-width: 1200px;
margin: 0 auto;
}
.wrapper, #nav, #header, #footer{
min-width: 768px;
}
At the beginning, a maximum width of 1200 pixels is defined for a number of selectors. This means that the main elements of the page will not go beyond 1200 pixels. And the automatic margin on the left and right will allow you to center the content of the elements. That is, with a browser width of 1400 pixels, these elements with a width of 1200 pixels will be placed as if in the middle, and on the right and left there will be indents with a width of (1400-1200) / 2 = 100 pixels.
The second style will allow you to make a fixed minimum width for a number of elements. That is, as a result, when the browser window is shrunk, the sidebars and the main block will look smaller, and when the window is shrunk to less than 768 pixels, a scrollbar is formed.
This size model is not perfect. And then we will look at more flexible and common concepts based on adaptive layout.
As a result, we get the following simple layout:
