Я неправильно использую сетку CSS? - PullRequest
Новая
       31

Я неправильно использую сетку CSS?

0 голосов
/ 05 августа 2020 

.grid-container {
    display: grid;
    grid-template-areas:
        "header header header header header"
        "article main main main main"
        "article main main main main"
        "article main main main main"
        "footer footer footer footer footer";
    grid-template-columns: 20% auto auto auto auto;
    grid-template-rows: 15% auto auto auto 10%;
    grid-gap: 3px;
}

.hBanner {
    grid-area: header;
    border: solid 2px black;
    text-align: center;
}
/*  ^^Head Banner^^  */
.aHead {
    grid-area: article;
    border: solid 2px black;
    text-align: center;
}
    .aHead h3 {
        font-size: 3vw;
    }
    .aHead ul {
        font-size: 2vw;
    }
    .aHead li {
        list-style-position: inside;
        padding-left: 0;
    }

/*  ^^Article Headings^^ */
.mBody {
    grid-area: main;
    border: solid 2px black;
    text-align: center;
}
    .mBody iframe {
        background-image: url(https://www.clker.com/cliparts/4/b/2/9/151641893861684429we-are-awesome-clipart.med.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

/*  ^^Main Body^^  */
.updates {
    grid-area: footer;
    border: solid 2px black;
    overflow: hidden;
    white-space: nowrap;
}
    .updates p {
        width: 100%;
        height: 100%;
        margin: 0;
        text-align: center;
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        -moz-animation: scroll-left 13s linear infinite;
        -webkit-animation: scroll-left 13s linear infinite;
        animation: scroll-left 13s linear infinite;
    }
    @-moz-keyframes scroll-left {
        0%  { -moz-transform: translateX(100%); }
        100%    { -moz-transform: translateX(-131%); }
    }
    @-webkit-keyframes scroll-left {
        0%  { -webkit-transform: translateX(100%); }
        100%    { -webkit-transform: translateX(-131%); }
    }
    @keyframes scroll-left {
        0%   { -moz-transform: translateX(100%); 
               -webkit-transform: translateX(100%);
               transform: translateX(100%);
             }
        100% { -moz-transform: translateX(-131%);
               -webkit-transform: translateX(-131%);
               transform: translateX(-131%);
              }
    }
    /*  ^^Footer Banner^^  */
/*
canvas {
    width: 250px;
    height: 100px;
    border: solid 1px gray;
    position: relative;
    margin: auto;
}
        */
<!DOCTYPE html>
<html>
<head>
    <title>MyBlog</title>
    <meta http-equiv="refresh" content="300">
    <link rel="stylesheet" type="text/css" href="MyBlog.css">
    <script src="MyBlog.js"></script>
</head>

<body>
    <div class="grid-container">
        <!--Header-->
        <div class="hBanner">My Blog</div>
        <!--***********************************************-->
        <!--Entries from Google DOCS-->
        <div class="aHead">
            <h3>
                Entries<h3>
                    <ul>
                        <li><a href="https://docs.google.com/document/d/e/2PACX-1vRQPbexsSqrD5E7tzli9iZtQMav7b94kvCncT8t1o07b32jg_5_CrbxtyAz2dfxyOL-UNVz_g4nM4eT/pub?embedded=true" target="myFrame">Entry 01</a></li>
                        <li><a href="https://docs.google.com/document/d/e/2PACX-1vTcHl05YdAILSCPM-BeH5y8eyw0gySOmNZyktl7Dj4PMoJtUaZfaWUO8EbxyxqyieNbeZ9_XnVcmect/pub?embedded=true" target="myFrame">Entry 02</a></li>
                <!--    <li><a href="?embedded=true" target="myFrame">Entry 03</a></li>
                        <li><a href="?embedded=true" target="myFrame">Entry 04</a></li>
                        <li><a href="?embedded=true" target="myFrame">Entry 05</a></li> -->
                    </ul>
        </div>
        <!--***********************************************-->
        <!--DOCS viewer-->
        <div class="mBody">
            <iframe name="myFrame"></iframe>

            <!--***********************************************-->
            <!--Game-->
            <!--    <canvas id="canvas" width="500px" height="400px"></canvas>  -->
        </div>

        <!--NEWS banner-->
        <div class="updates">
            <p>Welcome To My Blog!!</p>
        </div>
        <!--***********************************************-->
    </div>
</body>
</html>

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

Это то, что у меня есть:

** МОЙ КОД 

.grid-container {
    display: grid;
    grid-template:
        'header header header header header'
        'article main main main main'
        'article main main main main'
        'article main main main main'
        'footer footer footer footer footer';
    grid-gap: 3px;
}

.hBanner {
    grid-area: header;
    border: solid 2px black;
    text-align: center;
}
/*  ^^Head Banner^^  */
.aHead {
    grid-area: article;
    border: solid 2px black;
    text-align: center;
}
    .aHead h3 {
        font-size: 3vw;
    }
    .aHead ul {
        font-size: 2vw;
    }
    .aHead li {
        list-style-position: inside;
        padding-left: 0;
    }

/*  ^^Article Headings^^ */
.mBody {
    grid-area: main;
    border: solid 2px black;
    text-align: center;
}
    .mBody iframe {
        background-image: url(https://www.clker.com/cliparts/4/b/2/9/151641893861684429we-are-awesome-clipart.med.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

/*  ^^Main Body^^  */
.updates {
    grid-area: footer;
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 4;
    border: solid 2px black;
    overflow: hidden;
    white-space: nowrap;
}
    .updates p {
        width: 100%;
        height: 100%;
        margin: 0;
        text-align: center;
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        -moz-animation: scroll-left 13s linear infinite;
        -webkit-animation: scroll-left 13s linear infinite;
        animation: scroll-left 13s linear infinite;
    }
    @-moz-keyframes scroll-left {
        0%  { -moz-transform: translateX(100%); }
        100%    { -moz-transform: translateX(-131%); }
    }
    @-webkit-keyframes scroll-left {
        0%  { -webkit-transform: translateX(100%); }
        100%    { -webkit-transform: translateX(-131%); }
    }
    @keyframes scroll-left {
        0%   { -moz-transform: translateX(100%); 
               -webkit-transform: translateX(100%);
               transform: translateX(100%);
             }
        100% { -moz-transform: translateX(-131%);
               -webkit-transform: translateX(-131%);
               transform: translateX(-131%);
              }
    }
    /*  ^^Footer Banner^^  */
/*
canvas {
    width: 250px;
    height: 100px;
    border: solid 1px gray;
    position: relative;
    margin: auto;
}
        */
<!DOCTYPE html>
<html>
<head>
    <title>MyBlog</title>
    <meta http-equiv="refresh" content="300">
    <link rel="stylesheet" type="text/css" href="MyBlog.css">
    <script src="MyBlog.js"></script>
</head>

<body>
    <div class="grid-container">
        <!--Header-->
        <div class="hBanner">My Blog</div>
        <!--***********************************************-->
        <!--Entries from Google DOCS-->
        <div class="aHead">
            <h3>
                Entries<h3>
                    <ul>
                        <li><a href="https:///pub?embedded=true" target="myFrame">Entry 01</a></li>
                        <li><a href="https:///pub?embedded=true" target="myFrame">Entry 02</a></li>
                <!--    <li><a href="?embedded=true" target="myFrame">Entry 03</a></li>
                        <li><a href="?embedded=true" target="myFrame">Entry 04</a></li>
                        <li><a href="?embedded=true" target="myFrame">Entry 05</a></li> -->
                    </ul>
        </div>
        <!--***********************************************-->
        <!--DOCS viewer-->
        <div class="mBody">
            <iframe name="myFrame"></iframe>

            <!--***********************************************-->
            <!--Game-->
            <!--    <canvas id="canvas" width="500px" height="400px"></canvas>  -->
        </div>

        <!--NEWS banner-->
        <div class="updates">
            <p>Welcome To My Blog!!</p>
        </div>
        <!--***********************************************-->
    </div>
</body>
</html>

Как вы можете видеть в моем CSS, мой макет должен выглядеть примерно так: 'ЧЧЧЧЧ' 'АММММ' 'АММММ' 'АММММ «FFFFF» Я знаю очень простой макет, но теперь я застрял в том, неправильно ли я размещаю синтаксис или просто печатаю что-то бессмысленное. Любая помощь будет принята с благодарностью.

EDITED: Я внес некоторые изменения в CSS. Кажется, что это работает, если вы запускаете снайперы, но по какой-то причине он не работает правильно, если я запускаю его локально. [снимок экрана] [локальный] [снимок экрана] [stackoverflow] Предварительный просмотр выполняется в браузере Chrome, а я использую сообщество Visual Studio 2019 для редактирования текста. У меня может быть больше проблем, чем просто плохие навыки программирования.

1 Ответ

0 голосов
/ 05 августа 2020

Прежде всего, если вы планируете сделать свой сайт легкодоступным на планшетах и ​​мобильных телефонах, вам обязательно нужно использовать сетку или флексбоксы для макета. Отказ от поплавка - правильный способ go.

Если я правильно понимаю, ваша единственная проблема - это ширина нижнего колонтитула. Если это так, вам просто нужно изменить одну строку: 

.updates {
...
grid-column-end: 6;
...
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...