Html - How do I code a text in front of these markers?

mico
July 22, 2024
211 views
3 votes
4 Answers

So in my html, I created a section and divisions. I have assigned classes for all of them. Like this:

h1 {
  text-align: center;
}

.marker {
  width: 150px;
  height: 25px;
  margin: 12px auto;
}

.red {
  background: linear-gradient(#be2525, #E2665D, #bd562d);
  box-shadow: 4px 5px 6px 0 #ee7878;
}

.blue {
  background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
  box-shadow: 4px 5px 6px 0 #78b9ee;
}

.container {
  background-color: white;
}

.cap,
.sleeve {
  display: inline-block;
}

.cap {
  width: 38px;
  height: 25px;
}

.sleeve {
  width: 73px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 12px double rgba(0, 0, 0, 0.75);
}

.green {
  background: linear-gradient(#19ca69, #2ce68f, #37c47d);
  box-shadow: 4px 5px 6px 0 #78eebd;
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color markers</title>
  <link href="marker.css" rel="stylesheet">
</head>
<h1>Colored Markers</h1>
<section class="container">
  <div class="marker red">
    <div class="cap"></div>
    <div class="sleeve"></div>
  </div>
  <div class="marker blue">
    <div class="cap"></div>
    <div class="sleeve"></div>
  </div>
  <div class="marker green">
    <div class="cap"></div>
    <div class="sleeve"></div>
  </div>
</section>

</html>

Actual output

But what I really want to do is this: (Desired output)

I tried nesting p elements with assigned class within every division, but it messed up the sleeve and cap elements on the markers.

I also tried assigning a third class on the markers but it did not also work. I tried to write a p element on the same line of the marker divs but the text is just so misplaced.

How do I input the text on top of the sleeve and cap?

Tags: css html

Answers

Here you have it:

h1 {
  text-align: center;
}

.marker {
  width: 150px;
  height: 25px;
  margin: 12px auto;
}

.red {
  background: linear-gradient(#be2525, #E2665D, #bd562d);
  box-shadow: 4px 5px 6px 0 #ee7878;
}

.blue {
  background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
  box-shadow: 4px 5px 6px 0 #78b9ee;
}

.container {
  background-color: white;
}

.cap,
.sleeve {
  display: inline-block;
}

.cap {
  width: 38px;
  height: 25px;
}

.sleeve {
  width: 73px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 12px double rgba(0, 0, 0, 0.75);
  position: absolute;/*new code*/
}

.green {
  background: linear-gradient(#19ca69, #2ce68f, #37c47d);
  box-shadow: 4px 5px 6px 0 #78eebd;
}


/*new code from here*/

.sleeve {
  text-align: center;
}

.sleeve span {
  margin-top: 6px;
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 13px;
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color markers</title>
  <link href="marker.css" rel="stylesheet">
</head>

<body>
  <!--missed this-->
  <h1>Colored Markers</h1>
  <section class="container">
    <div class="marker red">
      <div class="cap"></div>
      <div class="sleeve"><span>RED</span></div>
    </div>
    <div class="marker blue">
      <div class="cap"></div>
      <div class="sleeve"><span>BLUE</span></div>
    </div>
    <div class="marker green">
      <div class="cap"></div>
      <div class="sleeve"><span>GREEN</span></div>
    </div>
  </section>
</body>
<!--missed this too-->

</html>

Notice, that I’ve put the markers’ name inside span tag to be able to style them separately from the rest of the code.

I´ve created a new div .label, set it to absolute (so I had to set the .marker as relative). Them I positioned it over the marker and set the line height to macht the font size to make it vertical aligned.

h1 {
  text-align: center;
}

.marker {
  width: 150px;
  height: 25px;
  margin: 12px auto;
  position: relative;
}

.marker .label {
  position: absolute;
  width: 100%;
  text-align: center;
  color: black; 
  font-weight: bold;
  top: 0;
  left: 0;
  height: 100%;
  line-height: 25px; 
}

.red {
  background: linear-gradient(#be2525, #E2665D, #bd562d);
  box-shadow: 4px 5px 6px 0 #ee7878;
}

.blue {
  background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
  box-shadow: 4px 5px 6px 0 #78b9ee;
}

.green {
  background: linear-gradient(#19ca69, #2ce68f, #37c47d);
  box-shadow: 4px 5px 6px 0 #78eebd;
}

.container {
  background-color: white;
}

.cap,
.sleeve {
  display: inline-block;
}

.cap {
  width: 38px;
  height: 25px;
}

.sleeve {
  width: 73px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 12px double rgba(0, 0, 0, 0.75);
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Markers</title>
  <link href="marker.css" rel="stylesheet">
</head>

<body>
  <h1>Colored Markers</h1>
  <section class="container">
    <div class="marker red">
      <div class="label">Red</div>
      <div class="cap"></div>
      <div class="sleeve"></div>
    </div>
    <div class="marker blue">
      <div class="label">Blue</div>
      <div class="cap"></div>
      <div class="sleeve"></div>
    </div>
    <div class="marker green">
      <div class="label">Green</div>
      <div class="cap"></div>
      <div class="sleeve"></div>
    </div>
  </section>
</body>

</html>

This is because inline-block elements cause issues with line-height and font-size. You can play with line-height to get desired effect but that is not recommended.

Instead, make .marker a flex-box which aligns everything perfectly and remove display:inline-block from your .sleeve and .cap. Since, these are now block elements by default, font-size and line-height won’t cause problems.

I have used text-align: center and align-content: center on the sleeve to center the text. Also, added a span for text-styling. You can change these as per your needs.

h1 {
  text-align: center;
}

.marker {
  width: 150px;
  height: 25px;
  margin: 12px auto;
  display: flex;
}

.red {
  background: linear-gradient(#be2525, #E2665D, #bd562d);
  box-shadow: 4px 5px 6px 0 #ee7878;
}

.blue {
  background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
  box-shadow: 4px 5px 6px 0 #78b9ee;
}

.container {
  background-color: white;
}

.cap {
  width: 38px;
  height: 25px;
}

.sleeve {
  width: 73px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 12px double rgba(0, 0, 0, 0.75);
  text-align: center;
  align-content: center;
}

.green {
  background: linear-gradient(#19ca69, #2ce68f, #37c47d);
  box-shadow: 4px 5px 6px 0 #78eebd;
}

.label-text {
  font-weight: bold;
  font-family: 'arial';
  font-size: .9rem;
}

<h1>Colored Markers</h1>
<section class="container">
  <div class="marker red">
    <div class="cap"></div>
    <div class="sleeve"><span class="label-text">Red</span></div>
  </div>
  <div class="marker blue">
    <div class="cap"></div>
    <div class="sleeve"><span class="label-text">Blue</span></div>
  </div>
  <div class="marker green">
    <div class="cap"></div>
    <div class="sleeve"><span class="label-text">Green</span></div>
  </div>
</section>

The default for block elements in html is for them to each sit on their own line, whereas inline elements will stay on the same line. By default, the sleeve and cap divs you added will sit on different lines, until you added display: inline-block to them. If you add a <p> tag, and don’t add display: inline-block to it as well, it will mess up the other elements by moving things to a new line, which is what I assume is happening. Simply adding display: inline-block to the <p> tag will have it placed in a way that is not disrupting the previous layout, but the <p> tag is still not aligned and will appear at the bottom left of the element.

I would suggest using flexbox to align things. Here is how I implemented it:

h1 {
  text-align: center;
}

.marker {
  width: 150px;
  height: 25px;
  margin: 12px auto;
}

.red {
  background: linear-gradient(#be2525, #E2665D, #bd562d);
  box-shadow: 4px 5px 6px 0 #ee7878;
}

.blue {
  background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
  box-shadow: 4px 5px 6px 0 #78b9ee;
}

.container {
  background-color: white;
}

.cap,
.sleeve {
  display: inline-block;
}

.cap {
  width: 38px;
  height: 25px;
}

.sleeve {
  width: 73px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 12px double rgba(0, 0, 0, 0.75);
}

.green {
  background: linear-gradient(#19ca69, #2ce68f, #37c47d);
  box-shadow: 4px 5px 6px 0 #78eebd;
}

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color markers</title>
    <link href="markers.css" rel="stylesheet">
</head>
<body>
    <h1>Colored Markers</h1>
    <section class="container">
      <p>This is the original green marker you created</p>
        <div class="marker green">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <p>This blue example is using inline-block on the p element, so the styling of the other inline-block elements is not affected by the newline. It hasn't been aligned with flexbox which is why it is sitting on the bottom left corner (on the box-shadow)</p>
        <div class="marker blue">
            <div class="cap"></div>
            <div class="sleeve"><p style="display: inline-block;">test</p></div>
        </div>
        <p>And finally we add alignment using flexbox with this red marker</p>
        <div class="marker red" style="display: flex;">
            <div class="cap"></div>
            <div class="sleeve" style="display: flex; justify-content: center; align-items: center;"><p style="display: inline-block;">test</p></div>
        </div>
    </section>
</body>

</html>

There’s a few little things to keep in mind with what my design has done. First off, in your original example the cap and sleeve elements where not sitting directly next to each other (if you use developer tools to inspect the elements you can see there are a few pixels between them.) I imagine this was not intended in your design because there isn’t any CSS explicitly creating it. When I implemented flexbox this spacing is removed. Here you can see the slight difference. If you look at the red marker (the one I adjusted), the black bands are slightly to the left. This is actually the desired result because the cap width you’ve defined is not what is visually shown. So you may want to increase the cap width slightly to match the original.:

h1 {
  text-align: center;
}

.marker {
  width: 150px;
  height: 25px;
  margin: 12px auto;
}

.red {
  background: linear-gradient(#be2525, #E2665D, #bd562d);
  box-shadow: 4px 5px 6px 0 #ee7878;
}

.blue {
  background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
  box-shadow: 4px 5px 6px 0 #78b9ee;
}

.container {
  background-color: white;
}

.cap,
.sleeve {
  display: inline-block;
}

.cap {
  width: 38px;
  height: 25px;
}

.sleeve {
  width: 73px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 12px double rgba(0, 0, 0, 0.75);
}

.green {
  background: linear-gradient(#19ca69, #2ce68f, #37c47d);
  box-shadow: 4px 5px 6px 0 #78eebd;
}

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color markers</title>
    <link href="marker.css" rel="stylesheet">
</head>
<body>
    <h1>Colored Markers</h1>
    <section class="container">
        <div class="marker red" style="display: flex;">
            <div class="cap"></div>
            <div class="sleeve" style="display: flex; justify-content: center; align-items: center;"><p style="display: inline-block;">test</p></div>
        </div>
        <div class="marker blue">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
        <div class="marker green">
            <div class="cap"></div>
            <div class="sleeve"></div>
        </div>
    </section>
</body>

</html>

And finally, the text is centered within the sleeve element, but the left doubled border you added on the left is not included within the dimensions, so the centering is based on the edge of the border, not including the border. From your desired picture it appears you could want the border included in the element width when it comes to centering. You can fix this using padding on the right side of the sleeve element, or by messing around with box-sizing. If you would prefer there to only be vertical alignment, and all the colors left edge to start at the same place (like your image), you can delete justify-content: center; and just use a left padding instead.

A few things to note about your code, you don’t need two opening html tags, so if you want to denote the language is english you would replace <html> with <html lang="en"> instead of adding both. Also as pointed out by @Mister-Jojo you need to add opening and closing body tags to your html.

Here’s some additional info from W3:

"Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-block and display: block:" –W3 (CSS Layout – display: inline-block)

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I code a text in front of these markers?

Answers