Guiding the way with headings listed beneath every point

Question

Guiding the way with headings listed beneath every point

Hello there!

I am trying to achieve a specific layout using this image as a reference. In the image, there are 3 different background images (represented by three Divs) and I want to add 3 List Points labeled as "LV", "RP", "IP" with centered descriptions/headings below them (such as Lv: 15, RP: 16975, etc).

My main challenge lies in controlling the centered width of these elements. I am struggling to figure out the best approach using CSS.

This is my HTML:

<div class="package">
    <div class="item-description">
        <div class="col-md-3"><span class="title">LV</span><span class="description">15</span></div>
        <div class="col-md-3"><span class="title">RP<span><span class="description">16975</span></div>
        <div class="col-md-3"><span class="title">IP<span><span class="description">40000</span></div>
    </div>
</div>

html css

Answer 1

Answer №1

Do you seek a design like this?

This layout uses multiple elements, which could potentially be transformed into pseudo elements. It provides a basic representation of the concept you are interested in.

Moreover, the utilization of IDs and classes makes it relatively easy to customize for your specific requirements.

.container {
  width: 32%;
  height: 200px;
  background: red;
  display: inline-block;
}
.container .title {
  margin-top: 100px;
  width: 32%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: white;
}
#one {
  background: url(http://placekitten.com/g/300/300);
}
#two {
  background: url(http://placekitten.com/g/200/200);
}
#three {
  background: url(http://placekitten.com/g/300/200);
}

<div id="one" class="container">
  <div class="title">200
    <div class="desc">I'm a very long description</div>
  </div>
  <div class="title">300
    <div class="desc">desc</div>
  </div>
  <div class="title">400
    <div class="desc">Be More Dog</div>
  </div>
</div>
<div id="two" class="container">
  <div class="title">200
    <div class="desc">desc</div>
  </div>
  <div class="title">300
    <div class="desc">I'm a tree.</div>
  </div>
  <div class="title">400
    <div class="desc">What is a description?</div>
  </div>
</div>
<div id="three" class="container">
  <div class="title">200
    <div class="desc">desc</div>
  </div>
  <div class="title">300
    <div class="desc">a description of what?</div>
  </div>
  <div class="title">400
    <div class="desc">Don't you like, er, trees?</div>
  </div>
</div>

You might also consider:

Note: In this version, I've incorporated a pseudo element effect, but to maintain code simplicity, I applied it universally instead of on individual items (like descriptions).

html,
body {
  margin: 0;
  padding: 0;
}
.sec {
  width: 33%;
  height: 200px;
  background: red;
  background: url(http://placekitten.com/g/200/200);
  position: relative;
  text-align: center;
  color: white;
  vertical-align: middle;
  display: inline-block;
  line-height: 200px;
  margin-left: -0.5%;
}
.col {
  width: 32%;
  margin-left: -0.5%;
  font-size: 25px;
  display: inline-block;
  position:relative;
}

.col:after{
  padding-top:25px;
  font-size: 10px;
  position:absolute;
  content:"description";

  left:25%;
  }

<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>


<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>


<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>

Answer 2

Do you seek a design like this?

This layout uses multiple elements, which could potentially be transformed into pseudo elements. It provides a basic representation of the concept you are interested in.

Moreover, the utilization of IDs and classes makes it relatively easy to customize for your specific requirements.

.container {
  width: 32%;
  height: 200px;
  background: red;
  display: inline-block;
}
.container .title {
  margin-top: 100px;
  width: 32%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: white;
}
#one {
  background: url(http://placekitten.com/g/300/300);
}
#two {
  background: url(http://placekitten.com/g/200/200);
}
#three {
  background: url(http://placekitten.com/g/300/200);
}

<div id="one" class="container">
  <div class="title">200
    <div class="desc">I'm a very long description</div>
  </div>
  <div class="title">300
    <div class="desc">desc</div>
  </div>
  <div class="title">400
    <div class="desc">Be More Dog</div>
  </div>
</div>
<div id="two" class="container">
  <div class="title">200
    <div class="desc">desc</div>
  </div>
  <div class="title">300
    <div class="desc">I'm a tree.</div>
  </div>
  <div class="title">400
    <div class="desc">What is a description?</div>
  </div>
</div>
<div id="three" class="container">
  <div class="title">200
    <div class="desc">desc</div>
  </div>
  <div class="title">300
    <div class="desc">a description of what?</div>
  </div>
  <div class="title">400
    <div class="desc">Don't you like, er, trees?</div>
  </div>
</div>

You might also consider:

Note: In this version, I've incorporated a pseudo element effect, but to maintain code simplicity, I applied it universally instead of on individual items (like descriptions).

html,
body {
  margin: 0;
  padding: 0;
}
.sec {
  width: 33%;
  height: 200px;
  background: red;
  background: url(http://placekitten.com/g/200/200);
  position: relative;
  text-align: center;
  color: white;
  vertical-align: middle;
  display: inline-block;
  line-height: 200px;
  margin-left: -0.5%;
}
.col {
  width: 32%;
  margin-left: -0.5%;
  font-size: 25px;
  display: inline-block;
  position:relative;
}

.col:after{
  padding-top:25px;
  font-size: 10px;
  position:absolute;
  content:"description";

  left:25%;
  }

<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>


<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>


<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>

Answer 3

Answer №2

Here's a CSS tip for you to try out:

.description, .title{float:left; width:100%; text-align:center;}

Answer 4

Here's a CSS tip for you to try out:

.description, .title{float:left; width:100%; text-align:center;}

Guiding the way with headings listed beneath every point

Answer №1

Answer №2

Similar questions

Input Form Label inexplicably rounded off at odd location

Missing sidebar display

Rearranging the layout of elements: CSS switches up the text and button,

Sometimes, in extremely rare instances, external stylesheets may fail to download or be properly applied

Changing CSS module variables through JavaScript programming

Prevent ui-select from being highlighted when clicked

Library of User Interface components for React Native applications

Height set at 100% but not extending to the entire parent element

What is the best way to ensure my php variable is easily accessed?

Using jQuery to swap an image with a div element and then using the image as the

Flexbox Columns Maintaining Width when Window is Resized

Animate the height transition of contenteditable after a line of text is added (using shift+enter) or removed

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

There was an issue loading the map on an HTML code that was returned from an ajax request

Using PHP to generate a table populated with generic elements from an array

``Enhance your website with stunning Bootstrap 4 image cards that beautifully showcase

Using CSS box-shadow to elevate an image

Alignment Woes in Bootstrap Designs

Tips on positioning an element absolutely so that it stops right before another element as the screen width is adjusted

"Add a new style sheet to the homepage of your WordPress site using the