Ways to achieve varying border widths among multiple divs that are linked to text size

Hey there, I'm looking to make some changes to the UI of my game. I want to transform it from this: https://i.sstatic.net/iLpFY.jpg

To this (which is an edited version using paint.net of the previous image): https://i.sstatic.net/qudVm.jpg

<html>
    <body>
        <div id="hud">
            <div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;0&nbsp;</div>
            <div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;100 500 000000&nbsp;</div>
            <div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;LSPD - Cadet de la police trop cool&nbsp;</div>
        </div>
    </body>
</html>

img {
    vertical-align: middle;
}

#hud {
    position: absolute;
    font-family: 'Pricedown';
    font-size: 25px;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
    top: 35px;
    right: 5px;
}

Would really appreciate some help. Thanks!

htmlcss

Answer №1

Implement the use of flexbox along with margin-left: auto; and avoid directly styling your elements within the tags. This practice is not recommended and will only complicate things for you in the long term.

Sample HTML code:

<html>
    <body>
        <div id="hud">
            <div>&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;0&nbsp;
            </div>
            <div>&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;100 500 000000&nbsp; 
            </div>
            <div>&nbsp;LSPD - Cool Police Cadet&nbsp;
            </div>
        </div>
    </body>
</html>

Sample CSS code:

img {
  vertical-align: middle;
}

#hud {
  position: absolute;
  font-family: 'Pricedown';
  font-size: 25px;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  top: 35px;
  right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#hud > div{
  background-color:red;
  border: 2px solid #000; 
  border-radius: 3px; 
  background-color: rgba(200, 200, 200, 0.40);
  margin: 2px 10px;
  margin-left: auto;
}

View on CodePen

Answer №2

To ensure proper formatting, all inner div elements should be wrapped inside another div and have their display set to inline-block;

Click here to see an example

<html>
    <body>
        <div id="hud">
            <div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;0&nbsp;</div></div>
            <div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;<img src="https://i.imgur.com/7jElAfE.png"/>&nbsp;100 500 000000&nbsp;</div></div>
            <div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);">&nbsp;LSPD - Cadet de la police trop cool&nbsp;</div></div>
        </div>
    </body>
</html>

CSS:

#hud div div {
  display: inline-block;
}

To enhance readability and maintain good code structure, consider creating CSS classes for the inner div elements and defining appropriate styles for them.

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

A div with an absolute position containing a header, content, and footer

How can I place a header, content, and footer inside a div element with absolute positioning, where the position value cannot be changed? The header and footer have fixed heights, and the content should occupy the remaining space. The header should always ...

htmlcsscss-position

Incapable of modifying the text within a div container

I am currently working on a script that translates a Russian forum word by word using TreeWalker. However, there is a specific type of div element that I have been unable to change the text for. That leads to my question: How can I go about changing it? Un ...

javascriptjqueryhtmlajaxgreasemonkey

How can we use JavaScript to retrieve an element with custom styling?

I've encountered a strange issue with my script where it seems to stack up borders and display a 2px border instead of the intended 1px border when switching elements on click. Here is the link code I am using: <li ><a href="plumbing.php"&g ...

javascriptjqueryhtmlcssstyles

Establishing the rotation attribute of an SVG circle to create an angular progress tracker

Exploring the code of an Angular component and came across how the r attribute for an svg circle is defined like this: [attr.r]="radius - stroke / 2" This seems to work, but I'm wondering why it's done this way. Isn't the r attribute suppo ...

htmlangularsvg

When collapsing an accordion, Bootstrap radio buttons fail to properly select

I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...

javascripthtmlcsstwitter-bootstrap

Develop fresh JavaScript code using JavaScript

Is it possible to dynamically create a new row in an HTML table by clicking on a button? Each row contains multiple input fields. <script type="text/javascript> row = 2; specific_row_id = new Array(); $(document).ready(function() { $(".change_1 ...

javascriptjqueryhtml

Exploring Object Attributes in React

I'm working on a React app where I have an array of objects in a file called users.js, and another file named contacts.jsx. In the contacts.jsx file, I am trying to display a Material UI card and access the properties of the object within that card. ...

htmlcssreactjs

The output from the Compute function is not showing up in the TextBox as expected

I'm currently working on an HTML page that contains two textboxes and a button. I've created a Compute function to display the result in one of the textboxes, but unfortunately, it's not functioning as expected. No alerts are appearing on th ...

javascripthtml

PHP - What is the reason for the output being a multi-dimensional array?

Hey there, I'm currently working with this code and for some reason, the variable records2 is returning a multi-dimensional array. Can anyone help me figure out why this is happening? I actually need it to be a simple, single dimension array. functi ...

phphtmlmultidimensional-array

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

javascripthtmlcssreactjs

Error in viewpoint/transformation transition on Microsoft Edge

Encountering a peculiar issue with MS Edge involving the animation of a door (a div tag) around the Y axis using the css rotateY() function in combination with perspective properties. The problem arises when transitioning an angle from a positive value to ...

csscss-transitionsmicrosoft-edgecss-transformsperspective

Guide to Displaying Items in Order, Concealing Them, and Looping in jQuery

I am trying to create a unique animation where three lines of text appear in succession, then hide, and then reappear in succession. I have successfully split the lines into span tags to make them appear one after the other. However, I am struggling to fin ...

javascriptjquerycssloopsshow-hide

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?

I have a challenge with placing three images in a circular path one after the other using Tailwind CSS for styling. I've identified the circular path and keyframe style for the images. How do I configure this style in my Tailwind config file and imple ...

javascriptcssreactjscss-animationstailwind-css

Creating an image dynamically at runtime from a section of HTML code as it appears in the browser

Is there a way to use Java API or Jquery library to create an image from input HTML code? Alternatively, how can I capture a screenshot of a section of HTML code as it appears in the browser? For example: If I have the following HTML code: <h1>Logo& ...

javahtmljqueryscreenshot

What causes the inconsistency in CSS Hover behavior?

Looking to devise a button in css and html that reveals another button below it by rotating on its lowermost axis when hovered over. Progress has been made here: http://codepen.io/machinarius/pen/BdtCb However, there seems to be an issue with the hover b ...

csscss-animations

Is there a way to determine the location where my website is fetching CSS and media files from?

After implementing Wagtail on my website, I encountered an issue with the CSS and images not being found when the site was put into production. I have already tried running python manage.py collectstatic and ensured that all of my CSS files are located in ...

csspython-3.xwagtail

How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

https://i.sstatic.net/dj4zb.png I have this image that I need to divide into three sections with a legend at the top, similar to the image shown. So far, this is the code I have, but I'm struggling with creating the vertical line, adding space betwe ...

javascripthtmlcssformsbootstrap-4

Using jQuery to encode an ampersand in a URL

I am facing an issue where some URLs with & in them need to be converted to HTML entities using jQuery. The original code looks like this: <div id="box"> <a href="http://domain.com/index.html&location=1">First URL</a> &l ...

jqueryhtmlurlencodeampersand

Display issue with grid-template-column not appearing

My grid column isn't working in my Christmas matching game project. I'm trying to create additional card columns using grid template columns, but the other three columns are not displaying as intended. They should be positioned right next to "Tim ...

htmlcss

The picture tag in HTML5 is failing to be responsive when used with Bootstrap

I'm experimenting with the html5 <picture> tag to set different images. I placed the 2 pictures within a bootstrap grid, allowing them to be responsive until the breakpoint 768px, where the image changes. However, when I decrease the browser si ...

htmlcsstwitter-bootstrap