CSS макет сетки, кажется, плавать влево? - PullRequest
Новая
       44

CSS макет сетки, кажется, плавать влево?

1 голос
/ 16 января 2020

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

Я использовал grid-template-areas и grid-template-columns, чтобы настроить размер столбцов и показать, где находится каждый элемент сетки. должен go. Однако, когда я отображаю веб-страницу, все элементы выровнены по крайнему левому столбцу, за исключением моего navbar и изображения героя, для которых установлена ​​ширина 100%, с ними все в порядке. Желаемая схема сетки подробно описана в нижней части автономного файла CSS и содержит медиа-запросы.

хорошего дня, спасибо за чтение (я новичок)

HTML КОД 

<!doctype html>
<html lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Home</title>
        <link href="normalize.css" rel="stylesheet">
        <link href="main.css" rel="stylesheet">
    </head>

<body>

    <div class="wrapper">

        <header class="navbar">
            <a id="top"></a>

            <img class="logo" src="randimage.png" alt="title" style=height:20px;>
            <nav class="topnav">
                <ul>                    
                    <li><a href="#">Learning journal</a></li>                   
                    <li><a href="/tutorial.html">Tutorial</a></li>
                    <li><a href="/contact.html">Contact me</a></li>
                </ul>
            </nav>
            </header>



        <div class="hero-image">
            <div class="hero-text">
                <h1>Learning Journal</h1>
                <p>This is a log of my journey in learning how to design a web site.</p>
            </div> 
        </div>

        <nav class="week-nav">
                <h2 class="contenthead">Weekly Posts</h2>
                <ol>
                    <li><a href='#week1'>Introduction to Web Design</a></li>
                    <li><a href='#week2'>Learning how to make web pages</a></li>
                    <li><a href='#week3'>Learning about lists, quotes and tables</a></li>
                    <li><a href='#week4'>CSS basics</a></li>
                    <li><a href='#week5'>CSS box model & styling text</a></li>
                    <li><a href='#week6'>Responsive web design</a></li>
                    <li><a href='#week7'>RWD2</a></li>
                    <li><a href='#week8'>RWD3</a></li>
                    <li><a href='#week9'>HTML5 & CSS forms</a></li>
                    <li><a href='#week10'></a></li>
                    <li><a href='#week11'></a></li>
                    <li><a href='#ref'>References</a></li>
                </ol>
</nav>

        <div class="table">
            <table>
                <caption><strong>Personal timetable</strong></caption>
                <tr>
                    <th>Day/Time</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                </tr>
                <tr>
                    <td>9-10am</td>
                    <td>e</td>
                    <td>e</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>10-11am</td>
                    <td>e</td>
                    <td>e</td>
                    <td>e</td>
                </tr>
                <tr>
                    <td>11-12pm</td>
                    <td>e</td>
                    <td>e</td>
                    <td>e</td>
                </tr>
                <tr>
                    <td>12-1pm</td>
                    <td>e</td>
                    <td>--</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>1-2pm</td>
                    <td>--</td>
                    <td>e</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>2-3pm</td>
                    <td>e</td>
                    <td>--</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>3-4pm</td>
                    <td>e</td>
                    <td>--</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>4-5pm</td>
                    <td>e</td>
                    <td>--</td>
                    <td>--</td>
                </tr>
            </table>
</div>

        <div class="main">

                <main>

                    <h2>Learning Journal</h2>

                    <article>
                        <header class="post">
                            <a id="week8"></a>
                            <h3>Week 8:</h3>
                            <p>Published on<time datetime="2019-12-20"><strong> December 20, 2019</strong></time></p>
                        </header>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>



                    </article>

                                <article>
                        <header class="post">
                            <a id="week7"></a>
                            <h3>Week 7:</h3>
                            <p>Published on<time datetime="2019-12-18"><strong> December 18, 2019</strong></time></p>
                        </header>

                        <h3>Flexible media</h3>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>

                    </article>

                    <article>

                        <header class="post">
                            <a id="week6"></a>
                            <h3>Week 6:</h3>
                            <p>Published on<time datetime="2019-12-16"><strong> December 16, 2019</strong></time></p>
                        </header>

                        <h3>Week 6 outline:</h3>
                        <ul>
                            <li>Reflection & changes</li>
                            <li>Wireframes</li>
                            <li>Responsive grid layout workflow</li>
                            <li>RWD for mobile</li>
                            <li>Media queries</li>
                            <li>Making images flexible</li>
                            <li>Testing responsiveness of web page</li>
                        </ul>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>

                    </article>

                    <article>
                        <header class="post">
                            <a id="week5"></a>
                            <h3>Week 5:</h3>
                            <p>Published on<time datetime="2019-12-10"><strong> December 10, 2019</strong></time></p>
                        </header>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>


                    </article>

                    <p><a href="#top">Go to top</a></p>

                </main>
</div>

        <div class="aside">  
            <aside>

                <a id="ref"></a>

                <h2 class="contenthead">References</h2>

                    <ul>
                        <li><a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla">Examples of Web Standards</a></li>
                        <li><a href="https://www.linkedin.com/learning/html5-structure-syntax-and-semantics/what-are-web-semantics?u=67552674">HTML5: Structure, Syntax and Semantics</a></li>
                        <li><a href="https://www.w3schools.com/html/">HTML definitions & concept clarity</a></li>
                        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements reference</a></li>
                        <li><a href="https://www.tutorialrepublic.com/html-tutorial/html-lists.php">HTML Lists</a></li>
                        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite">Quoting framework</a></li>
                        <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class and ID selectors</a></li>
                    </ul>

            </aside>
        </div>  

        <div class="footer">
            <footer>
                <a href="mailto:(myemail@service.com)">Email [myname]</a><br>
                <small>&copy; 2020, fname sname.</small>
            </footer>
        </div>

    </div>
</body>
</html>

CSS КОД 

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
/*importing google font*/

* {box-sizing: border-box;}

#wrapper {
    display: grid;
    max-width: 100%;
    margin: 0 auto;
}
body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: "helvetica neue", sans-serif;
    font-size: 1em;
}
body {
    /*background-image: url("/ci435/images/BG_IMAGE.png");*/
    /*background-repeat: repeat;*/
    /*un-comment these when you have created round boxes for each element containing raw text*/
}

.navbar {
    max-width: 100%;
    padding: 1em 1em;
    background: #000;
    height: 3em;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

a { text-decoration: none; color: #2c3ad1; }
a:hover { text-decoration: underline; }
a:visited { color: #5c13bd; }
a:active { color: #e8d05a; }

.topnav {
    height: 3em;
    font-weight: bold;
    list-style: none;
    float: right;
}
main {
    clear: left;
}
.topnav li {
    display: inline-block;
    text-transform: uppercase;
    line-height: 1.2em;
    font-size: 0.7em;
    text-indent: 3em;
}
.topnav ul {
    position: relative;
    bottom: 2.5em;
    right: 1.6em;
}

.topnav a:link { color: lightgrey;}
.topnav a:hover { 
    color: #fff;
    border-bottom: 1000px #fff
}
.topnav a:visited { color: #fff; }

.logo {
    height: 20px;
    width: 100%;
    float: left;
}

.navbar:after {
    content: "";
    visibility: hidden;
    display: block;
    clear: both;
}
table {
    background-color: #FFF;
    border: solid 4px #4682B4;
    border-spacing: 0;
    text-align: center;
}
tbody tr:nth-child(even) {
    background-color: #B0C4DE;
}
th {
    background-color: #4682B4;
    padding: 3px;
}
caption {
    font-size: 1.3em;
    padding-bottom: 0.5em;
    /*space between caption and the table underneath*/
}
.hero-image {
    background-image: linear-gradient(to bottom, rgba(0, 175, 255, 0.4), rgba(117, 19, 93, 0.73)), url("/ci435/images/bannerImages/lj.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 70vh;
    /*justify-content: center;*/
}
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

/*GRID LAYOUT*/
.navbar {
    grid-area: navbar;
}
.hero-image {
    grid-area: hero;
}
.week-nav {
    grid-area: week-nav;
}
.table {
    grid-area: table;
}
main {
    grid-area: main;
}
aside {
    grid-area: aside;
}
footer {
    grid-area: footer;
}

/*LAYOUT STYLES*/
#wrapper {
    display: grid;
    grid-template-areas:
        "navbar"
        "hero"
        "week-nav"
        "table"
        "main"
        "aside"
        "footer";
}

@media (min-width: 750px) {
    #wrapper {
    grid-template-columns: 3fr 7fr;
    grid-template-areas: 
        "navbar  navbar"
        "hero  hero"
        "week-nav  table"
        "week-nav  main"
        "aside  main"
        "footer  footer";
    }
}

@media (min-width: 1000px) {
    #wrapper {
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
                 "navbar  navbar  navbar"
                 "hero  hero  hero"
                 "week-nav  table  aside"
                 "week-nav  main  aside"
                 "footer  footer  footer";
        }
}


@media (max-width: 500px) {
    table {
        display:none;
   }
}

1 Ответ

0 голосов
/ 21 января 2020

Похоже, что ваши проблемы исходят от ваших css селекторов.

Во-первых, ваша сетка не применяется, потому что в вашем css вы используете селектор идентификатора (#wrapper), но в вашем html вы даете ему класс, а не id, "обертку". Изменение либо html на id, либо css на класс исправит это - если вы думаете, что это шаблон-обертка, вы будете использовать его повторно, затем установите его как класс, иначе я бы порекомендовал изменение html для установки id = "wrapper".

Далее, селекторы, которые вы используете для назначения областей сетки для основного, бокового и нижнего колонтитулов, являются селекторами тегов. Проблема в том, что каждый из ваших элементов main, aside и footer обернут в div внутри оболочки, так что иерархически это на самом деле #wrapper -> div container -> main / aside / footer. Таким образом, атрибуты области сетки каждого основного / стороннего / нижнего колонтитула не используются, поскольку они ищут в своем непосредственном родителе, контейнере div, области сетки-шаблона, когда он действительно находится в #wrapper. Чтобы исправить это, вы можете либо переместить атрибуты области сетки в css из селектора тегов в селектор контейнера div, либо, если контейнеры div не используются иным образом, удалить их полностью.

Вот модифицированный css для работы с сеткой: 

@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
/*importing google font*/

* {
  box-sizing: border-box;
}

#wrapper {
  display: grid;
  max-width: 100%;
  margin: 0 auto;
}
body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "helvetica neue", sans-serif;
  font-size: 1em;
}
body {
  /*background-image: url("/ci435/images/BG_IMAGE.png");*/
  /*background-repeat: repeat;*/
  /*un-comment these when you have created round boxes for each element containing raw text*/
}

.navbar {
  grid-area: navbar;
  max-width: 100%;
  padding: 1em 1em;
  background: #000;
  height: 3em;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

a {
  text-decoration: none;
  color: #2c3ad1;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: #5c13bd;
}
a:active {
  color: #e8d05a;
}

.topnav {
  height: 3em;
  font-weight: bold;
  list-style: none;
  float: right;
}
main {
  clear: left;
}
.topnav li {
  display: inline-block;
  text-transform: uppercase;
  line-height: 1.2em;
  font-size: 0.7em;
  text-indent: 3em;
}
.topnav ul {
  position: relative;
  bottom: 2.5em;
  right: 1.6em;
}

.topnav a:link {
  color: lightgrey;
}
.topnav a:hover {
  color: #fff;
  border-bottom: 1000px #fff;
}
.topnav a:visited {
  color: #fff;
}

.logo {
  height: 20px;
  width: 100%;
  float: left;
}

.navbar:after {
  content: "";
  visibility: hidden;
  display: block;
  clear: both;
}
table {
  background-color: #fff;
  border: solid 4px #4682b4;
  border-spacing: 0;
  text-align: center;
}
tbody tr:nth-child(even) {
  background-color: #b0c4de;
}
th {
  background-color: #4682b4;
  padding: 3px;
}
caption {
  font-size: 1.3em;
  padding-bottom: 0.5em;
  /*space between caption and the table underneath*/
}
.hero-image {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 175, 255, 0.4),
      rgba(117, 19, 93, 0.73)
    ),
    url("/ci435/images/bannerImages/lj.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 70vh;
  /*justify-content: center;*/
}
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/*GRID LAYOUT*/
.navbar {
  grid-area: navbar;
}
.hero-image {
  grid-area: hero;
}
.week-nav {
  grid-area: week-nav;
}
.table {
  grid-area: table;
}
.main {
  grid-area: main;
}
.aside {
  grid-area: aside;
}
.footer {
  grid-area: footer;
}

/*LAYOUT STYLES*/
.wrapper {
  display: grid;
  grid-template-areas:
    "navbar"
    "hero"
    "week-nav"
    "table"
    "main"
    "aside"
    "footer";
}

@media (min-width: 750px) {
  .wrapper {
    grid-template-columns: 3fr 7fr;
    grid-template-areas:
      "navbar  navbar"
      "hero  hero"
      "week-nav  table"
      "week-nav  main"
      "aside  main"
      "footer  footer";
  }
}

@media (min-width: 1000px) {
  .wrapper {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "navbar  navbar  navbar"
      "hero  hero  hero"
      "week-nav  table  aside"
      "week-nav  main  aside"
      "footer  footer  footer";
  }
}

@media (max-width: 500px) {
  table {
    display: none;
  }
}

Надеюсь, это поможет!

...