What is the method for creating a rectangle with text inside using HTML and CSS?

Hello, I need help with achieving this design using HTML and CSS. Can you assist me, please?

https://i.stack.imgur.com/xOHVX.jpg

This is what I have attempted so far:

Below is my CSS code:

.line-lg{
   width:120%; 
   text-align: center; 
   border-bottom: 2px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
}

.line-lg span{
  background:#4e5d6c; 
    padding:0 10px; 
}

.rectangle{
padding-top: 40px;
  width:100px;
  height:100px;
  border:1px solid #000; 
  position: relative;
  text-align: center;
}

And here is my HTML code:

<table class="table">
   <tr>
      <td>
         <div class="rectangle">
            <h4 class="line-lg"><span>Lol</span></h4>
         </div>
      </td>
      <td>
         <div class="rectangle">
            <h4 class="line"><span>Lol</span></h4>
         </div>
      </td>
      <td>
         <div class="rectangle"></div>
         <h4 class="line"><span>Lol</span></h4>
         </div>
      </td>
   </tr>
</table>

However, the result is not as expected:

https://i.stack.imgur.com/zNDKd.jpg

The line is not filling all the space, and I am unsure of how to fix it. As a beginner in HTML/CSS, any advice or guidance would be greatly appreciated.

htmlcss

Answer №1

Here is a method to achieve this

.parent {
    width: 500px;
    height: 140px;
    position: relative;
    background-color: slategray;
}
.container {
    width: 100%;
    padding: 30px;
    text-align: justify;
    font-size: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
}
.lol {
    font-size: 14px;
    display: inline-block;
    border: 1px solid black;
    width: 80px;
    height: 80px;
    text-align: center;
}
.container:after {
    content:'';
    display: inline-block;
    width: 100%;
}
.lol span {
    line-height: 80px;
    background-color: slategray;
    padding: 4px;
}
.line {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    border-bottom: 1px solid red;
}</echo></pre>
<pre><code><div class="parent">
    <div class="line"></div>
    <div class="container">
        <div class="lol"><span>LOL</span></div>
        <div class="lol"><span>LOL</span></div>
        <div class="lol"><span>LOL</span></div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Jquery to transform characters into visual representations

Do you think it is wise to utilize a jQuery function that replaces each character in a text with custom character images? For instance, when using the function, you need to specify which element you would like the characters replaced in, and jQuery will d ...

jqueryhtmlfonts

Customize Typography style variations in Material-UI version 5

I have encountered a similar issue, but with a twist from Can't override root styles of Typography from Materil-UI Back in v4, I had a theme set up like this: import { createTheme } from '@material-ui/core/styles'; export const theme = cre ...

cssmaterial-ui

Pagination functionality in TablePress allows for improved organization and

Currently, I am utilizing the TablePress plugin on my WordPress website and I am aiming to achieve a pagination layout similar to this illustration: . How can I modify the pagination to display the text 'page 1 of X' instead of 'previous&apo ...

htmlcsswordpressdatatable

Prevent HTML from being escaped in data-binding while utilizing repeat-templates in Polymer

Hey there! <template repeat="{{item in items}}"> <div layout horizontal> <div>{{item['content']}}</div> <div>{{item['more_content'])}</div> ...

htmldata-bindingdartpolymer

"Troubleshoot: jQuery UI accordion not functioning properly in response to

I've encountered an issue with the accordion functionality while working with dynamic data. To address this, I'm incorporating JavaScript to generate <div> and <h3> tags for the accordion. Here is the code snippet I am using: $(&ap ...

javascriptjqueryhtml

How to trigger a JavaScript function using a button click

I've been struggling to figure out why my JavaScript code isn't functioning properly within Ionic. Can anyone guide me on how to store a number in a variable, display that variable, and increment it when a button is clicked? I have successfully ...

javascripthtmlcss

The z-index property fails to function properly when used with a relative parent and after/before pseudo-elements

Here is the code snippet (prototype) that I am working with: .headerz { position: relative; padding: 5rem 0 0 5rem; margin: 3rem 0 0 0; color: #000; font-size: 3.8rem; text-transform: uppercase; z-index: 24; } .headerz::before { content ...

htmlcssz-indexpseudo-element

When moving to a different page, PHP seems to have a problem keeping the session values in place

As I work on my PHP application, I encounter an issue with maintaining session values. In this scenario, I have two files: 'sidebar.php' and 'home.php'. The sidebar is included on the home page, and it contains login controls. Logging i ...

phphtmlsession

What is the best place in Rails to add @media CSS tags?

Currently, my layout.html.erb contains some CSS rules with @media queries. <style> @media (max-width: 900px) { .green-button{ display: none!important; } .chat_button{ margin-top: 20px!important; } #myCarousel{ ...

cssruby-on-rails

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

I'm attempting to extract hover text content from plotly traces that have been shared online. This is a new type of scraping for me, and I'm exploring ways to accomplish this task in R without relying on selenium or phantomjs, possibly with the u ...

javascripthtmlrweb-scrapingrvest

Creating a customizable navigation bar using only CSS

I'm currently working on creating a navigation bar using only HTML and CSS, without the need for JavaScript to open and close it. However, I've encountered an issue where the navigation bar remains open even after setting display: none or visibi ...

css

Ways to send a list with dictionaries in an HTML template and retrieve their data

Within my Django project, I am dealing with a specific list: my_list=[{'id':1,'username':'sometext'},{'id':2,'username':'someothertext'}] I have passed this list to the template using the followi ...

pythonhtmlpython-3.xdjango

What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...

javascriptjqueryhtmlcssaccordion

How to Integrate a DIV Table with Ajax.BeginForm in MVC4

My goal is to integrate a div table with Ajax.BeginForm: This combination will generate the following structure: <div class="Table"> <div class="Title"> <p>This is a Table</p> </div> <div class="Heading"> & ...

cssajaxasp.net-mvc-4html

Placing an emblem after the header wording

Within my h1 tag, I have a header text that I would like to display alongside a small icon on the right side. The length of the text can vary, which presents a challenge in alignment. I attempted to use a background image with no repeat, but it ends up p ...

htmlcssimagebackground

Learn the method to conceal rows within a table simply by toggling a button

I need a function that will hide the rows below a row with a header and button, and only reveal them when another row with a header and button is clicked. When one of the +/- buttons is clicked, it should hide or expand all the rows with data content. http ...

javascripthtmljquerycss

What methods are available to fill a canvas with shapes other than circles?

My goal is to fill the canvas with a black color. The code I have used for this purpose is as follows: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle='rgba(0,0,0,0.1)'; ctx.fillRect(0,0,c.width,c.height) ...

javascripthtmlcanvashtml5-canvasmedia

Dealing with JSON data in the format of `(Object object)` requires a specific approach

I originally encountered object object when attempting to display JSON API data in HTML. I then used keyvalue in *ngFor which allowed me to display the object, but I am wondering how I can access and display the entire JSON data? Here are the relevant cod ...

htmlangulartypescript

Tips for creating a responsive graphic using Bootstrap CSS

I am currently trying to determine how to create individual graphics that can be directly loaded via CSS and made responsive. When I resize the screen, the graphics also adjust accordingly. However, on smaller displays such as mobile phones, the graphics ...

htmlcsstwitter-bootstrap

Center an element over two other elements using CSS

I have three elements: checkout-left, checkout-right, and product-2 <div class="order-form"> <div class="checkout-left"> <div class="video another-video"> ...

htmlcss