Search code examples
htmlcsscss-grid

CSS grid not rendering correctly

I have three problems with my grid that I'm trying to create to build the layout for my page.

The first problem is that I don't want the grid to span the length of the page. Currently it is set as the correct width but I want the whole thing centered in the middle of the page. Currently it is aligned to the left and I can't get it to align in the center.

The second problem is that I have a second grid with id sidebar and I've assigned it ro grid-area sidebar. The sidebargrid has sixteen rows. I created a .btn class and am trying to put an image inside each button. Currently the images are being placed in the correct grid areas but the buttons are not rendering.

The third problem is that I have #bannergrid assigned to the grid area banner. I set the background imaged inside the div in template.html which is showing corrrectly. #bannergrid has a grid area topright which I have set #login to. I have a .btn-login that I am trying to place in the #login div but it is not showing.

I currently have the page running on a development server at https://dcadventuresonline.com if you want to see what I'm currently seeing.

You can see all my project code here:

https://github.com/mikewycklendt/dcadventures

These are the relevant files:

template.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="{{ meta_name }}" content="{{ meta_content }}" />

        <title>{{ title }}</title>

        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Monda&display=swap" rel="stylesheet">

        {% for style in stylesheets %}
        <link href="{{ style.style }}" type="text/css" rel="stylesheet" />
        {% endfor %}

    </head>

    <body>


        <div class="container">

            <div id="bannergrid" style="background:url(/static/img/banner.jpg">
                <div id="topleft"></div>
                <div id="login">
                    <div class="btn-login"></div>
                </div>
                <div id="bottom"></div>
            </div>

            <div id="left"></div>

            <div id="sidebargrid" style="background:url(/static/img/sidebar.jpg">
            <div id="rules">
                <div class="button">

                </div>
            </div>
            <div id="games">
                <div class="btn">
                    <img src="/static/img/sidebar/gamesGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/gamesBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/gamesGOLD.png'" />
                </div>
            </div>
            <div id="stories">
                <div class="btn">
                    <img src="/static/img/sidebar/storiesGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/storiesBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/storiesGOLD.png'" />
                </div>
            </div>
            <div id="heroes">
                <div class="btn">
                    <img src="/static/img/sidebar/heroesGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/heroesBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/heroesGOLD.png'" />
                </div>
            </div>
            <div id="npcs">
                <div class="btn">
                    <img src="/static/img/sidebar/npcsGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/npcsBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/npcsGOLD.png'" />
                </div>
            </div>
            <div id="locations">
                <div class="btn">
                    <img src="/static/img/sidebar/locationsGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/locationsBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/locationsGOLD.png'" />
                </div>
            </div>
            <div id="skills">
                <div class="btn">
                    <img src="/static/img/sidebar/skillsGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/skillsBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/skillsGOLD.png'" />
                </div>
            </div>
            <div id="abilities">
                <div class="btn">
                    <img src="/static/img/sidebar/abilitiesGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/abilitiesBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/abilitiesGOLD.png'" />
                </div>
            </div>
            <div id="powers">
                <div class="btn">
                    <img src="/static/img/sidebar/powersGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/powersBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/powersGOLD.png'" />
                </div>
            </div>
            <div id="flaws">
                <div class="btn">
                    <img src="/static/img/sidebar/flawsGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/flawsBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/flawsGOLD.png'" />
                </div>
            </div>
            <div id="equipment">
                <div class="btn">
                    <img src="/static/img/sidebar/equipmentGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/equipmentBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/equipmentGOLD.png'" />
                </div>
            </div>
            <div id="devices">
                <div class="btn">
                    <img src="/static/img/sidebar/devicesGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/devicesBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/devicesGOLD.png'" />
                </div>
            </div>
            <div id="armor">
                <div class="btn">
                    <img src="/static/img/sidebar/armorGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/armorBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/armorGOLD.png'" />
                </div>
            </div>
            <div id="weapons">
                <div class="btn">
                    <img src="/static/img/sidebar/weaponsGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/weaponsBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/weaponsGOLD.png'" />
                </div>
            </div>
            <div id="vehicles">
                <div class="btn">
                    <img src="/static/img/sidebar/vehiclesGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/vehiclesBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/vehiclesGOLD.png'" />
                </div>
            </div>
            <div id="constructs">
                <div class="btn">
                    <img src="/static/img/sidebar/constructsGOLD.png" 
                    onmouseover="this.src='/static/img/sidebar/constructsBLUE.png'" 
                    onmouseout="this.src='/static/img/sidebar/constructsGOLD.png'" />
                </div>
            </div>
            </div>

            <div id="middle"></div>
            <div id="content">
                {% include includehtml %}
            </div>
            <div id="right"></div>
        </div>

    </body>
</html>

template.css

@import "sidebar.css";

body{
    margin: 0px;
}


.container{
    display: grid;
    justify-content: center;
    grid-template-rows: 286px 3000px;
    grid-template-columns: 2px 250px 2px 1050px 2px;
    grid-template-areas: "banner banner banner banner banner"
                            "left sidebar middle content right"

}

#bannergrid{
    display: grid;
    grid-area: banner;
    background-image: url( 'img/banner.jpg' ) no-repeat;
    background-size: cover;
    width: 100%;
    grid-template-columns:  auto 140px;
    grid-template-rows: 45px auto;
    grid-template-areas: "topleft topright"
                            "bottom bottom";
    margin: 0px;
    
}

#login{
    grid-area: topright;
}

#topleft{
    grid-area: topleft;
}

#bottom{
    grid-area: bottom;
}

#left{
    grid-area: left;
    background-color: #153958;
}

#middle{
    grid-area: middle;
    background-color: #153958;
}

#right{
    grid-area: right;
    background-color: #153958;
}

#content{
    background-color: white;
    font-family: 'Montserrat', sans-serif;
    grid-area: content;
}

#sidebargrid{
    display: grid;
    grid-area: sidebar;
    background-image: url('img/sidebar.png') no-repeat;
    background-size: cover;
    grid-template-columns: 100%;
    grid-template-rows: 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px auto;
    grid-template-areas: "rules"
                            "games"
                            "stories"
                            "heroes"
                            "npcs"
                            "locations"
                            "skills"
                            "abilities"
                            "powers"
                            "flaws"
                            "equipment"
                            "devices"
                            "armor"
                            "weapons"
                            "vehicles"
                            "constructs"

}

.btn-login{
    width: 125px;
    height: 30px;
    margin: 15px;
    border: 2px solid white;
    border-color: white;
    background-color: #af0101;
    font-family: 'Monda', sans-serif;
    text-align: center;
    color: white;
}

.btn-login:hover {
    width: 125px;
    height: 30px;
    border: 2px solid white;
    border-color: white;
    background-color: #3a4e87;
    font-family: 'Monda', sans-serif;
    text-align: center;
    color: white;
}

sidebar.css

#rules{
    grid-area: rulea;
}

#games{
    grid-area: games;
}

#stories{
    grid-area: stories;
}

#heroes{
    grid-area: heroes;
}

#npcs{
    grid-area: npcs;
}

#locations{
    grid-area: locations;
}

#skills{
    grid-area: skills;

}

#abilities{
    grid-area: abilities;
}

#powers{
    grid-area: powers;
}

#flaws{
    grid-area: flaws;
}

#equipment{
    grid-area: equipment;
}

#devices{
    grid-area: devices;
}

#armor{
    grid-area: armor;
}

#weapons{
    grid-area: weapons;
}

#vehicles{
    grid-area: vehicles;
}

#constructs{
    grid-area: constructs;
}

.btn{
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 250px;
    height: 45px;
    margin: 0px;
    border-bottom: 2px solid #cdb99d;
}

.btn:hover {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 250px;
    height: 45px;
    margin: 0px;
    border-bottom: 2px solid #7ecef6;
    border-left: 2px solid #7ecef6;
    border-right: 2px solid #7ecef6;
}
Solution

  • Ok I solved all my problems.

    The sidebar buttons weren't showing because I didn't have the correct path set in app.py to my css files.

    To get .container to center I added justify-content inside the div in template.html

    btn-login wasnt showing because I had had my css files located in /static but then I moved them to /static/css but an old version of template.css was still in /static and thats the one i was still linking to in app.py and in that old version the button was called .button-login.