Creating a unique box design with HTML and CSS

Question

Creating a unique box design with HTML and CSS

Looking to create a design layout using HTML & CSS similar to the one shown in the screenshot below. While I've made progress up to this point, I am wondering if there is a way to adjust the elements as indicated by the red lines in the screenshot.

https://i.sstatic.net/eSxtd.png

.bracketbox1,.bracketbox2,.bracketbox3,.bracketbox4,.bracketbox5,.bracketbox6{
                vertical-align:middle;
            }
            .bracketbox1 img{
                width:80px;
                height:80px;
            }
            .bracketbox2 img{
                width:85px;
                height:85px;
            }
            ...
            ...
            ...
        </div>

html css

Answer 1

Answer №1

To quickly solve this issue, consider adding a colspan attribute:

.bracketbox1,
.bracketbox2,
.bracketbox3,
.bracketbox4,
.bracketbox5,
.bracketbox6 {
  vertical-align: middle;
}
.bracketbox1 img {
  width: 80px;
  height: 80px;
}
... (more CSS styles)
.mt-10 {
  margin-top: 20px;
}

<div style="width: 320px;">
  <div style="display: block;">
    <div class="clearfix"></div>
    <table border="0" data-comboid="1" class="tg mt-10">
      <tbody>
      ... (table content)
    </table>
  </div>
</div>

To create a space between line3 and line4, consider adding more columns.

However, using this approach may be unnecessarily complex. It might be better to achieve the desired result with fewer elements and additional CSS, or use a JavaScript library and canvas for a quicker solution.

Answer 2

To quickly solve this issue, consider adding a colspan attribute:

.bracketbox1,
.bracketbox2,
.bracketbox3,
.bracketbox4,
.bracketbox5,
.bracketbox6 {
  vertical-align: middle;
}
.bracketbox1 img {
  width: 80px;
  height: 80px;
}
... (more CSS styles)
.mt-10 {
  margin-top: 20px;
}

<div style="width: 320px;">
  <div style="display: block;">
    <div class="clearfix"></div>
    <table border="0" data-comboid="1" class="tg mt-10">
      <tbody>
      ... (table content)
    </table>
  </div>
</div>

To create a space between line3 and line4, consider adding more columns.

However, using this approach may be unnecessarily complex. It might be better to achieve the desired result with fewer elements and additional CSS, or use a JavaScript library and canvas for a quicker solution.

Creating a unique box design with HTML and CSS

Answer №1

Similar questions

Adaptive web layout (Adjusting design based on screen size)

Split-button dropdowns within tabs implemented with Bootstrap

Firefox compatibility issue caused by jQuery's appendTo function disrupting hyperlink functionality

Complete the form by following a hyperlink located on a different webpage

If the LocalStorage value is empty, relocate to a different location

Could there be a scenario where the body onload function runs but there is still some unexec

Tips for building a carousel-style transition using React Router

Center align one div and right align another div in the same row

Styling Material UI components with CSS is a great way to

Is there a way I can turn off the dragging functionality in my situation?

"Troubleshooting: Issue with CSS code on Codepen when trying to create

Incorporate PHP functionality into an HTML document

Use JQuery to gradually decrease the opacity of divs individually

What is the best way to adjust the height of an IFrame to match the size of its content?

Problem with stacking order in Internet Explorer 7

Unable to modify div style using a JS function

Looking to create a pop-up using javascript, css, or jQuery?

The hover effect is not functioning upon loading

Is there a way to eliminate the bottom border using CSS?

Adjust the cursor style using Javascript