Problem with navigator (FlexBox and Grid-area)

Question

Problem with navigator (FlexBox and Grid-area)

@Ashley128 → + 1,000Nov 17.2023

I want to place a navigator list vertical from horizontal.

How do I do that:?

HTML file

<!DOCTYPE html>
<html lang="zxx">

<head>
 <meta charset="UTF-8">
 <meta name="description" content="Checkpoint 3">
 <meta name="author" content="Tiet Hoc Co">
 <link rel="stylesheet" href="css/style.css">
 <title>Tiet, Hoc Co</title>
</head>
 <body>
 <div class="wrapper">
 <header>
 <img src="images/logo.jpg" alt="logga" title="Vår logotype">
 <div>
 <nav>
 <ul>
 <li><a href="#">Hem</a></li>
 <li><a href="#">Turist</a></li>
 <li><a href="#">Bilder</a></li>
 <li><a href="#">Om</a></li>
 </ul>
 </nav>
 </div>
 </header>
 
 
 <main>
 <header class="back">
 <h1>Tiet, Hoc Co</h1>
 </header>
 
 <div class="gallery">
 <header class="bild01">
 <img src="images/plommon.jpg" alt="Gallery image 1" class="gallery__img">
 </header>
 <header class="bild05">
 <h2>Section 1: Rubrik 1</h2>
 </header>
 <header class="bild09">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild13">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild17">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild02">
 <img src="images/plommon.jpg" alt="Gallery image 1" class="gallery__img">
 </header>
 <header class="bild06">
 <h2>Section 2: Rubrik 2</h2>
 </header>
 <header class="bild10">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild14">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild18">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild03">
 <img src="images/plommon.jpg" alt="Gallery image 1" class="gallery__img">
 </header>
 <header class="bild07">
 <h2>Section 3: Rubrik 3</h2>
 </header>
 <header class="bild11">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild15">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild19">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild04">
 <img src="images/plommon.jpg" alt="Gallery image 1" class="gallery__img">
 </header>
 <header class="bild08">
 <h2>Section 4: Rubrik 4</h2>
 </header>
 <header class="bild12">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild16">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 <header class="bild20">
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non</p>
 </header>
 </div> 
 </main>
 
 <footer>
 <div class="slut">
 <header class="fot">
 <h3>Adress</h3>
 <p>Adam akvarium</p>
 <p>Fiskvägen 1</p>
 <p>123 45 Fiskstad</p>
 </header>
 <header class="nav2">
 
 <nav>
 <ul>
 <li><a href="#">Hem</a></li>
 <li><a href="#">Turist</a></li>
 <li><a href="#">Bilder</a></li>
 <li><a href="#">Om</a></li>
 </ul>
 </nav>
 </header>
 <header class="citat">
 <h3>Citat</h3>
 <p>Footer: At vero eos et accusamus et iusto</p>
 </header>
 <p>Footer: At vero eos et accusamus et iusto</p>
 </div>
 </footer>
 </div>
 </body>
</html>

CSS file

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@font-face {
 font-family: Raleway;
 src: url('../fonts/raleway.woff') format('woff'),
 url('../fonts/raleway.woff2') format('woff2');
}

header {
 background-color: white;
 display: flex;
 
 justify-content: space-between;
}

.wrapper {
 width: 1300px;
}

header img {
 height: 80px;
 width: 150px;
}

nav li {
 
 background-color: cyan;
 padding: 10px;
 display: inline-block;
 
}



header.back{
 height: 600px;
 background-image: url("../images/beach.jpg");
 background-size: cover;
 background-position: center;
 display: flex;
 justify-content: center;
 align-items: center;
 
}

nav ul {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0 20px;
 background-color: aqua;
 padding: 10px;
}

/* mouse over link */
a:hover {
 color: hotpink;
 background-color: black;
}


.container {
 width: 100%;
 margin: 2rem auto; 
 }
 
img[alt="Gallery image 1"] {
 width: 200px;
 height: 200px;
 border-radius: 100%;
}


 .gallery {
 padding-top: 50px;
 display: grid;
 /*justify-content:space-between;*/
 column-gap: 2rem;
 grid-template-columns: 200px 200px 200px 200px;
 grid-template-rows: 200px 50px 160px 160px 160px;
 grid-template-areas: 
 "a01 a02 a03 a04"
 "a05 a06 a07 a08"
 "a09 a10 a11 a12"
 "a13 a14 a15 a16"
 "a17 a18 a19 a20";
 }

 header.bild01 {
 grid-area: a01;
 }
 
 header.bild05 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a05;
 }

 header.bild09 {
 background-color: hsl(165, 60%, 80%);
 font-weight: bold;
 grid-area: a09;
 }

 header.bild13 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a13;
 }

 header.bild17 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a17;
 }

 header.bild02 {
 grid-area: a02;
 }
 
 header.bild06 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a06;
 }

 header.bild10 {
 background-color: hsl(165, 60%, 80%);
 font-weight: bold;
 grid-area: a10;
 }

 header.bild14 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a14;
 }

 header.bild18 {
 grid-area: a18;
 background-color: hsl(165, 60%, 80%);
 }

 header.bild03 {
 grid-area: a03;
 }
 
 header.bild07 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a07;
 }

 header.bild11 {
 background-color: hsl(165, 60%, 80%);
 font-weight: bold;
 grid-area: a11;
 }

 header.bild15 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a15;
 }

 header.bild19 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a19;
 }

 header.bild04 {
 grid-area: a04;
 }
 
 header.bild08 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a08;
 }

 header.bild12 {
 background-color: hsl(165, 60%, 80%);
 font-weight: bold;
 grid-area: a12;
 }

 header.bild16 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a16;
 }

 header.bild20 {
 background-color: hsl(165, 60%, 80%);
 grid-area: a20;
 }
 
 .slut {
 display: grid;
 grid-template-columns: 300px 300px 300px;
 grid-template-rows: 150px 100px;
 grid-template-areas: 
 "b01 b02 b03"
 "b04 b05 b06";
 }

 header.fot {
 display: inline-block;
 padding-top: 0rem;
 padding-bottom: 0rem;
 grid-area: b01;
 }

 header.nav2 {
 background-color: cyan;
 grid-area: b02;
 display: inline; 
 
 }

 header.nav2 ul {
 display:flex;
 grid-area: b06;
 }

 header.citat {
 grid-area: b03;
 display: inline-block;
 }

I have 2 problems:

1. In the upper corner I want space between the navigator selections. How to do? I MUST use FlexBox design.

2. In the botton I want the navigator nav2 placed ion vertical position. How to do this? Here I MUST use Grid-Area concept.

I wan to look like this. See the marked area in the picture.

to post a answer

CSS HTML

4 Replies _↴

@SempervivumNov 17.2023 — #General recommendation: Remove the fixed width for the wrapping container in order to make the page responsive:
.wrapper {
/* width: 1300px; */
}

Regarding 1.
justify-content: space-between is the correct approach, the arrangement is as you require.

Regarding 2.
Adding flex-direction: column; does what you require:
header.nav2 ul {
display: flex;
grid-area: b06;
flex-direction: column;
}

One more recommendation: I suspect that the images have a relation to the texts below or the texts are a description for the images? If so a figure tag containing the images and the texts in a figcaption tag would be more appropriate.

These elements do not behave responsively as the width is fixed. Either use mediaquerys to reduce the number in one row to 2 and 1 depending on the width of the viewport.
Or consider using this CSS for the gallery:
div.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
It will place the items dynamically that way that the number per row is optimal.

@Ashley128authorNov 17.2023 — #Hi,
If I want these function for :

Responsive changes
When the screen width decreases to 1320 pixels, the width of the wrapper must be 100% and there must be a 10 pixel space between the wrapper and its content.

When the screen width decreases to 900 pixels, your main section should be re-layout to consist of 2 columns. Allow 2 sections to fit in each column.

In addition, your footer must be redesigned. The section with the address should occupy the entire width of the screen and below this section your secondary navigation and your quote should each occupy half of the remaining space.

How will my code look like?

@Ashley128authorThe full code plzNov 17.2023

@Ashley128authorCan you send me the whole files to [email protected]Nov 17.2023

@SempervivumNov 17.2023 — #"When the screen width decreases to 1320 pixels"
I see, use max-width instead:
.wrapper {
max-width: 1300px;
}

"When the screen width decreases to 900 pixels, your main section should be re-layout to consist of 2 columns. Allow 2 sections to fit in each column."
Use a mediaquery to achieve this:
.gallery {
padding-top: 50px;
display: grid;
/* create 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
column-gap: 2rem;
}

@media only screen and (max-width: 700px) {
.gallery {
/* create 2 columns */
grid-template-columns: 1fr 1fr;
}
}

@Ashley128author The full code ate Nov 17.2023

@Ashley128authorThe full code plzNov 17.2023

@Ashley128authorCan you send me the whole files to [email protected]Nov 17.2023

Also in #CSS _↴

Sizing an image based on screen Is it possible to style only a portion of a character with CSS?Is this property search a custom design?

Answer 1

It seems like you're having trouble with using FlexBox and Grid-area in your navigator. Without specific details about the problem, I can only provide general advice and examples on how to use these CSS features.

FlexBox is a one-dimensional layout model that allows you to control the distribution of space and alignment of content within a container. Here's a basic example of how to use FlexBox:


 .nav {
 display: flex;
 justify-content: space-between;
 }
 
 .nav-item {
 flex: 1;
 }

In this example, the .nav container is set to display as a flex container. The justify-content: space-between; style means that the items within the container will be evenly distributed in the line with a full width of space between them. The .nav-item elements will take up an equal amount of space within the .nav container.

Grid-area, on the other hand, is a part of the CSS Grid Layout. It allows you to name grid items and refer to them by name when setting up your grid layout. Here's a basic example:


 .grid-container {
 display: grid;
 grid-template-areas: 
 "header header header"
 "nav content content"
 "footer footer footer";
 }
 
 .header {
 grid-area: header;
 }
 
 .nav {
 grid-area: nav;
 }
 
 .content {
 grid-area: content;
 }
 
 .footer {
 grid-area: footer;
 }

In this example, the .grid-container is set to display as a grid. The grid-template-areas property is used to specify the structure of the grid. The .header, .nav, .content, and .footer elements are then assigned to their respective areas in the grid using the grid-area property.

If you're still having trouble, please provide more specific details about your problem so I can give a more targeted solution.

Problem with navigator (FlexBox and Grid-area)

4 Replies _↴

Also in #CSS _↴

Success!

Social

Version

Problem with navigator (FlexBox and Grid-area)

4 Replies ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Replies _↴

Also in #CSS _↴