Работа с сеткой CSS и выравниванием макета - PullRequest
Новая
       7

Работа с сеткой CSS и выравниванием макета

0 голосов
/ 28 апреля 2018

Я пытаюсь поместить фон за всей сеткой CSS. У вас есть изображение томата в теле, но я хочу, чтобы этот цвет фона был полностью вокруг основного тега. Я пробовал несколько разных способов обернуть его, но что-то у меня противоречивое.

Еще одна вещь - я не могу заставить пелену также запускаться под панелью навигации, и я хочу, чтобы панель навигации растягивалась через верх и не перекрывалась при первой загрузке страницы. Я не уверен, правильно ли было бы просто поставить маржу. Я хочу думать, что есть какой-то другой способ сделать это.

Вот это jsfiddle 

body {
background: tomato;

/* font-family: Helvetica, Arial, sans-serif;
line-height: 1.5; */
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
margin: 0px auto;
padding: 0px;
width:80%
}

html{
    background: linear-gradient(to right, palegreen,paleturquoise, plum);

}

/* main */
main{
    width: 85%;
    height: 80px;
    margin:.5em  auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;
}

main > div:nth-child(odd){
    background: peachpuff;

}

main > div {
    background: palegreen;
    padding: 1em;
    border-radius: 20px;

}

чтобы показать, что происходит, поэтому, если кто-нибудь знает, как это исправить, пожалуйста, дайте мне знать.

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

Ваш элемент main имел фиксированную высоту 80px, которую я удалил.

Чтобы запустить содержимое после навигационной панели, я добавил margin-top из height из navbar. Вы также можете сделать это через Javascript, если ваша панель навигации может иметь динамическую высоту, см. этот пост , чтобы получить высоту, и о том, как применить css через js . 

body {
    background:tomato;

    /* font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5; */
    font: normal 1em/1.5 Helvetica, Arial, sans-serif;
    margin: 0px auto;
    padding: 0px;
    width:80%;
    }

    html{
        background: linear-gradient(to right, palegreen,paleturquoise, plum);

    }


    

    /* nav top bar  */
nav{
    width: 100%;
    overflow: auto;
    background: rgba(255, 255, 255, 0.507);
    display:grid; 
    grid-template-columns: repeat(3, 1fr);
    height: 50px;
    position: fixed;
    top:0;

    

}

/* logo adjustments */

#logo{
    text-align: center; 

}

 #logo > img{
    
    border-radius: 20%;
    height: 35px;
    margin: .5em;
 }

/* main */
main{
    
    width: 85%;
    margin:.5em  auto;
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;
    
}

main > div:nth-child(odd){
    background: peachpuff;

}

main > div {
    background: palegreen;
    padding: 1em;
    border-radius: 20px;

}


/* Side navigation menu */

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;  /* Stay on top */
    left: 0;
    background-color: #111; /*black*/
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    overflow-x: hidden;

}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Home Page</title>
    <link rel="stylesheet" href="css/backgroundgrid.css">
    <script src="js/javascript.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script" type='text/css'>


</head>

<body>

    <header>

        <nav>
            <div id="sideNavBar" class="sidenav">

                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <a href="index.html">Home</a>
                <a href="resume.html">Resume</a>
                <a href="#">Page 2</a>
                <a href="#">Page 3</a>

            </div>

            <!-- Use any element to open the sidenav -->
            <span style="font-size:35px;cursor:pointer;margin-left:.5em;" onclick="openNav()">&#9776; </span>

            <span id="logo">
                <img src="images/logosamuelsmall.png">
            </span>


        </nav>


    </header>

    <main>
        <div>gfdgdf</div>

        <div>
            <div class="card-container">
                <div class="card">
                    <div class="side">
                        <h3 class="heading-banner head-text">Background</h3>
                    </div>

                    <div class="side back">

                        <ul>
                            <li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
                                and has heart. I've lived in lots of different places and have worked in lots of different
                                jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
                            <li>I've been working with technology, customer support and sales for 10+ years. </li>
                            <li>I love music, cooking and learning</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div>gfdgdf</div>

        <div>
            <div class="card-container">
                <div class="card">
                    <div class="side">
                        <h3 class="heading-banner head-text">Background</h3>
                    </div>

                    <div class="side back">

                        <ul>
                            <li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
                                and has heart. I've lived in lots of different places and have worked in lots of different
                                jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
                            <li>I've been working with technology, customer support and sales for 10+ years. </li>
                            <li>I love music, cooking and learning</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


        <div>gfdgdf</div>

        <div>
            <div class="card-container">
                <div class="card">
                    <div class="side">
                        <h3 class="heading-banner head-text">Background</h3>
                    </div>

                    <div class="side back">

                        <ul>
                            <li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
                                and has heart. I've lived in lots of different places and have worked in lots of different
                                jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
                            <li>I've been working with technology, customer support and sales for 10+ years. </li>
                            <li>I love music, cooking and learning</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </main>

</body>


</html>
0 голосов
/ 28 апреля 2018

Удаление height в главном исправит проблему с цветом фона. 

main{
    width: 85%;
    margin:.5em  auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;
}

Добавить left:0 к верхней панели навигации. 

nav{
    width: 100%;
    overflow: auto;
    background: rgba(255, 255, 255, 0.507);
    display:grid; 
    grid-template-columns: repeat(3, 1fr);
    height: 50px;;
    position: fixed;
    top:0;
    left: 0px; /*add this to stretch */
}

Предоставление margin-top основному - неплохая идея. Это нормальный способ сделать это.

...