[Help] Web Structure

Hyo · April 21, 2016

Im trying to learn html5 and css, but now i cant understand how to do the structure of this image.

Any1 can explain me?

Need to do it only with html5 and css

Thanks in advance!

Tessa · April 21, 2016

Something like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Just a test... :)</title>
        <style>
            .blocks {
                margin-top: 20px;
                margin-bottom: 20px;
                padding: 10px 0;
                height: 520px;
                background-color: #ccc;
            }
            
            .container {
                margin-right: auto;
                margin-left: auto;
                width: 95%;
                background-color: #aaa;
            }

            #overall-header {
                width: 100%;
                height: 200px;
                background-color: #ccc;
            }
            
            #main-nav {
                float: left;
                margin-right: 2%;
                width: 23%;
            }
            
            #overall-body {
                float: left;
                width: 50%;
            }
            
            #body-header {
                height: 100px;
            }
            
            #body-container {
                margin-top: 10px;
                margin-bottom: 10px;
                height: 300px;
            }
            
            #body-footer {
                height: 100px;
            }
            
            #main-sidebar {
                float: right;
                margin-left: 2%;
                width: 23%;
            }
            
            #overall-footer {
                clear: both;
                width: 100%;
                height: 200px;
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <header id="overall-header">
            
        </header>
        <nav id="main-nav" class="blocks">
            
        </nav>
        <section id="overall-body" class="blocks">
            <header id="body-header" class="container">
                
            </header>
            <article id="body-container" class="container">
                
            </article>
            <footer id="body-footer" class="container">
                
            </footer>
        </section>
        <aside id="main-sidebar" class="blocks">
            
        </aside>
        <footer id="overall-footer">
            
        </footer>
    </body>
</html>

Edited April 21, 2016 by Tessa

Hyo · April 21, 2016

Thanks tessa! ;D

[Help] Web Structure

Recommended Posts

Hyo

Tessa

Hyo

Create an account or sign in to comment

Create an account

Sign in

Posts

Topics

Browse

Activity

Store

Important Information