[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

Link to comment

Share on other sites

Tessa

Link to comment

Share on other sites

Hyo

Link to comment

Share on other sites

Please sign in to comment

Posts

Topics

Browse

Activity

Store