How to align elements on the page?

Asked

Viewed 81 times

0

Hello, I’m beginner in HTML and CSS, I’m learning by hobby to develop themes for social network Tumblr, I’m making this layout for test purposes as I did draft in Photoshop:

Layout desenvolvido no Photoshop

Only when coding it, the area of the sidebar and the posting are deregulated and I’ve tried in every way to align them, but I can’t, what am I doing wrong? There my codes and the Tumblr link I am developing the layout.

         /*Corpo da Página*/
            
            body {
                background: url("https://i.imgur.com/ujnC90p.png") no-repeat fixed;
                font-family: 'Open Sans Condensed', sans-serif;
                font-size: 15px;
                text-align: justify;
                color: #7db1a5;
            }
            
            /*Caixa*/
            
            #conteiner {
                display: flex;
                justify-content: center;
            }
            
            /*Conteúdo*/
            
            .content {
                display: flex;
                justify-content: center;
                width: 810px;
                background: #f3edcd;
                margin-top: 45px;
                margin-bottom: 40px;
            }
            
            /*Cabeçalho*/
            
            .header {
                width: 1000px;
                height: 1000px;
                background: url("https://i.imgur.com/gpaEEDj.png") no-repeat scroll;
                margin: 10px;
            }
            
            .entry {
                display: flex;
                flex-direction: row;
            }

            /*Barra Lateral*/
            
            .sidebar {
                width: 131px;
                height: 121px;
                background: red;
                margin-top: 10px;
                margin-right: 10px;
                padding: 10px;
            }
            
            /*Faixa*/
            
            .ribbon {
                margin-top: -10px;
                margin-left: -16px;
            }
            
            /*Postagem*/
            
            .post {
                width: 400px;
                background: transparent;
                margin-top: 150px;
                margin-bottom: 10px;
                padding: 10px;
            }
            
            
            /*Título*/
            
            .title {
                font-size: 20px;
                text-align: center;
                color: #f2d377;
                padding: 5px;
            }
 <!-- Div de Caixa -->
        
        <div id="conteiner">
            
            <!-- Div de Conteúdo -->
            
            <div class="content">
                
                <!-- Div de Cabeçalho -->
                
                <div class="header">
                    
                    <!-- Div de Logotipo -->
                    
                    <div class="logo">
                        
                        <img src="https://i.imgur.com/J3ME7rw.png">
                        
                    </div>
                    
                    <!-- Fim da Div de Logotipo -->
                    
                </div>
                
                <!-- Fim da Div de Cabeçalho -->
                
                <!-- Div de Acesso --> 
                
                <div class="entry">
                    
                    <!-- Div de Barra Lateral -->
                    
                    <div class="sidebar">
                        
                        <!-- Div de Faixa --> 
                        
                        <div class="ribbon"></div>
                        
                    </div>
                    
                    <!-- Fim da Div de Barra Lateral -->
                    
                    <!-- Div de Postagem --> 
                    
                    <div class="post">
                        
                        <!-- Block de Postagem -->
                        
                        {block:Posts}
                        
                        <!-- Block de Texto -->
                        
                        {block:Text}
                        
                        <!-- Div de Título -->
                        
                        <div class="title">
                            
                            {Title}
                            
                        </div>
                        
                        {Body}
                        
                        {/block:Text}
                        
                        {/block:Posts}
                        
                    </div>
                    
                </div>
                
                <!-- Fim da Div de Acesso -->
                
            </div>
            
            <!-- Fim da Div de conteúdo -->
            
        </div>
        
        <!-- Fim da Div de Caixa -->

The Tumblr: http://stripestheme.tumblr.com

2 answers

0

    <div id="conteiner">

        <!-- Div de Conteúdo -->

        <div class="content">

            <!-- Div de Cabeçalho -->

            <div class="header">

                <!-- Div de Logotipo -->

                <div class="logo">

                    <img src="https://i.imgur.com/J3ME7rw.png">

                </div>

                <!-- Fim da Div de Logotipo -->

            </div>

            <!-- Fim da Div de Cabeçalho -->

            <!-- Div de Acesso --> 

            <div class="entry">

                <!-- Div de Barra Lateral -->

                <div class="sidebar">

                    <!-- Div de Faixa --> 

                    <div class="ribbon"></div>

                </div>

                <!-- Fim da Div de Barra Lateral -->

                <!-- Div de Postagem --> 

                <div class="post">

                    <!-- Block de Postagem -->

                    {block:Posts}

                    <!-- Block de Texto -->

                    {block:Text}

                    <!-- Div de Título -->

                    <div class="title">

                        {Title}

                    </div>

                    {Body}

                    {/block:Text}

                    {/block:Posts}

                </div>

            </div>

            <!-- Fim da Div de Acesso -->

        </div>

        <!-- Fim da Div de conteúdo -->

    </div>

    <!-- Fim da Div de Caixa -->

0

Hello, I made some adjustments to css just to align correctly the way you want.

<style>
    /*Corpo da Página*/            
    body {
        background: url("https://i.imgur.com/ujnC90p.png") repeat;
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 15px;
        text-align: justify;
        color: #7db1a5;
    }

    /*Caixa*/

    #conteiner {
        display: flex;
        justify-content: center;
    }

    /*Conteúdo*/

    .content {
        width: 810px;
        background: #f3edcd;
        margin-top: 45px;
        margin-bottom: 40px;
    }

    /*Cabeçalho*/

    .header {
        width: calc(100% - 20px);
        background: url("https://i.imgur.com/gpaEEDj.png") no-repeat;
        margin: 10px;
        padding:20px 0;
        text-align:center;
    }


    .entry {
        display: flex;
        flex-direction: row;

    }

    /*Barra Lateral*/

    .sidebar {
        width: 131px;
        height: 121px;
        background: red;
        margin-right: 10px;
        padding: 10px;
    }

    /*Faixa*/

    .ribbon {
        margin-top: -10px;
        margin-left: -16px;
    }

    /*Postagem*/

    .post {
        flex-grow:1;
        background: #00f;
        margin-bottom: 10px;
        padding: 10px;
    }


    /*Título*/

    .title {
        font-size: 20px;
        text-align: center;
        color: #f2d377;
        padding: 5px;
    }
</style>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.