Design featuring a combination of vertical columns and a fixed image placed in

Question

Design featuring a combination of vertical columns and a fixed image placed in

I'm currently in the process of creating a website and I have a specific page layout in mind that I would like to implement:

------------------------------------------
|    A catchy title        |            |
|    Here                  |   An unconventional  |
|                          |----------- image     |
|    Detailed description  |       present here |
|                By this person   |              |
|                                   | Some text displayed |
|                                   | over the image     |
|                                   |                   |
------------------------------------------

I am utilizing vuejs along with vuetify, and my initial attempt at achieving this layout looks something like this:

<div style="position:absolute; top:0px; right:0px; width="60%"; background-image: url('/Background1.png');> </div>
<v-row>
  <v-col cols=5>Title goes here </v-col>
  <v-col cols=7><v-col>
<v-row>
<v-row>
  <v-col cols=8>A lengthy description by someone there</v-col>
  <v-col cols=4>Text overlaying the image </v-col>
<v-row>

This setup works well on my screen with resolution 1920*1080, but as soon as I resize the window, the alignment of the second row becomes problematic as it no longer corresponds correctly with the edge of the image.

I am aware that the issue stems from my use of 'position:absolute', but I am unsure how to tackle this problem using a different approach.

Any guidance or assistance you can provide would be greatly appreciated. Thank you!

html css vue.js layout

Answer 1

Answer №1

Why is CSS grid not being utilized?

HTML:

<div class="container">
  <div class="title">Title</div>
  <div class="longDescription">Long description</div>
  <div class="img">Non-square image</div>
  <div class="textOverImg">Text over image</div>
</div>

CSS:

/* STYLING */

.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  background-color: blue;
  color: white;
}

.longDescription {
  background-color: red;
  color: white;
}

.img {
  background-color: yellow;
}

.textOverImg {
  background-color: green;
  color: white;
}

/* CSS GRID */

.container {
  display: grid;
  grid-template-columns: 40vw 10vw 40vw;
  grid-template-rows: repeat(10, 20px);
}

.title {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.longDescription {
  grid-column: 1 / span 2;
  grid-row: 4 / span 7;
  z-index: 10;
}

.img {
  grid-column: 2 / span 2;
  grid-row: 1 / span 5;
}

.textOverImg {
  grid-column: 3;
  grid-row: 5 / span 6;
}

Experience the visual outcome here: https://codepen.io/Sa1m0n/pen/jOqZPOy.

Answer 2

Why is CSS grid not being utilized?

HTML:

<div class="container">
  <div class="title">Title</div>
  <div class="longDescription">Long description</div>
  <div class="img">Non-square image</div>
  <div class="textOverImg">Text over image</div>
</div>

CSS:

/* STYLING */

.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  background-color: blue;
  color: white;
}

.longDescription {
  background-color: red;
  color: white;
}

.img {
  background-color: yellow;
}

.textOverImg {
  background-color: green;
  color: white;
}

/* CSS GRID */

.container {
  display: grid;
  grid-template-columns: 40vw 10vw 40vw;
  grid-template-rows: repeat(10, 20px);
}

.title {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.longDescription {
  grid-column: 1 / span 2;
  grid-row: 4 / span 7;
  z-index: 10;
}

.img {
  grid-column: 2 / span 2;
  grid-row: 1 / span 5;
}

.textOverImg {
  grid-column: 3;
  grid-row: 5 / span 6;
}

Experience the visual outcome here: https://codepen.io/Sa1m0n/pen/jOqZPOy.

Design featuring a combination of vertical columns and a fixed image placed in

Answer №1

Similar questions

Looking to eliminate the vertical spacing of the <hr> tag?

What is a method to position an <img> on top of text without obscuring the text or resorting to CSS background or text-indent

Tips on updating the default checkbox dynamically based on the current checkbox using JavaScript

JavaScript drag functionality is jerky on iPads, not seamless

updating the HTML DOM elements using JavaScript is not yielding any response

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Choosing CSS/JS selector: Pick the final element with a class that does not match

Is OpenLayers + Ajax causing issues or errors?

Make sure PTable maintains a horizontal layout on any device with PrimeNG

Switching hover behavior on dropdown menu for mobile and desktop devices

Is there a way to locate and delete an image element with a broken hyperlink?

Showing a placeholder image in the absence of any image

How do you transfer drop-down values from an HTML template to views in Django?

Tips for avoiding overflow while utilizing animations

Changing the height of a table row using CSS transitions

Error message stating that there is no property 'collection' in Firestore when using Firebase v9 modular syntax in Firebase Firestore

Is there a way for me to create a sidebar that is scrollable, like the one on www.youtube

Creating an 8-bit grayscale JPEG image using HTML5 and encoding it from a canvas source

"Having trouble with a single line conditional statement not functioning properly within data in a Vue

Resizing a webpage to fit within an IFRAME