Ways to align text within a table cell on a background using CSS

I'm attempting to print jukebox strips with designated corner markings. The code I have written generates the HTML page for displaying the strips, allowing users to then print them. Jukeboxes typically feature selection buttons labeled ABCDEFGHJK and 1234567890. To simplify loading the slots with the printed strips, I aim to include the designator in the corner of each card so that it is no longer visible once inserted. This method facilitates organizing the cut strips correctly within the slots.

However, my attempts at printing this designator have caused the text on the strip to shift, which is not the intended outcome.

The current state of my code appears as follows:

<!doctype html>
<html>

<head>
  <style type="text/css">
    .card {
      width: 3in;
      height: 1in;
      background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
      background-size: 3in 1in;
    }
    
    .line {
      width: 3in;
      height: 7mm;
      text-align: center;
      font-family: Georgia, serif;
    }
    
    .cardnumber {
      font-size: 5px;
      top: auto;
      z-index: 100;
    }
  </style>
</head>

<body>

  <table cellspacing="0" cellpadding="0">
    <tr>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td class="line">Let It Be</td>
          </tr>
          <tr>
            <td class="line">Beatles</td>
          </tr>
          <tr>
            <td class="line">Yellow Submarine</td>
          </tr>
        </table>
        <div class="cardnumber">H1<br>H2</div>
      </td>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <div class="cardnumber">J7<br>J8</div>
            <td class="line">Bad</td>
          </tr>
          <tr>
            <td class="line">Michael Jackson</td>
          </tr>
          <tr>
            <td class="line">Liberian Girl</td>
          </tr>
        </table>
      </td>

    </tr>
  </table>

</body>

</html>

I've experimented with various combinations of position: absolute and postion: relative, but have yet to achieve the desired result.

Any suggestions on what modifications can be made?

htmlcss

Answer №1

First off, it's important to note that the <table/> tag is designed for tabular data, not layout purposes. Utilizing it in this context may not be the most semantic choice. Positioning content in a way that requires precise placement over a background can be quite challenging from a front-end perspective.

When faced with a challenge like this, consider whether the design can be achieved using code generation or by breaking down the asset into smaller components for easier coding. For this specific case, utilizing absolute positioning would be recommended.

.cardwrapper {
  display: flex;
}

.card {
  width: 3in;
  height: 1in;
  background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
  background-size: 3in 1in;
  position: relative;
}

.info {
  position: absolute;
  width: 100%;
  text-align: center;
}

.title {
  top: .09in;
}

.artist {
  top: .39in;
}

.album {
  top: .666in;
}

.cardnumber {
  position: absolute;
  bottom: 0;
  font-size: 5px;
}
<div class="cardwrapper">
  <div class="card">
    <div class="info title">Let It Be</div>
    <div class="info artist">Beatles</div>
    <div class="info album">Yellow Submarine</div>
    <div class="cardnumber">H1<br>H2</div>
  </div>
  <div class="card">
    <div class="info title">Bad</div>
    <div class="info artist">Michael Jackson</div>
    <div class="info album">Liberian Girl</div>
    <div class="cardnumber">J7<br>J8</div>
  </div>
</div>

Adjust the positioning as needed. Consider changing the display mode of .cardwrapper to alter the card layout. The placement of the card number can also be customized based on your requirements.

The choice of the most suitable element for the card content, such as <dl>/<dt>/<dd>, can be determined based on semantic considerations. If this is primarily for printing purposes, the element choice might be less crucial.

Answer №2

To achieve this layout, you can utilize positioning. Simply make the parent element (.card) relative, and then set the child element (.cardnumber) to have a position of absolute. By doing so, the numbers will be removed from the normal flow of the document, allowing you to place them wherever you desire.

.card {
  width: 3in;
  height: 1in;
  position: relative;
  background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
  background-size: 3in 1in;
}

.line {
  width: 3in;
  height: 7mm;
  text-align: center;
  font-family: Georgia, serif;
}

.cardnumber {
  margin: 0;
  position: absolute;
  font-size: 5px;
  top: 4px;
  left: 4px;
  z-index: 100;
}
<html>

<body>

  <table cellspacing="0" cellpadding="0">
    <tr>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <div class="cardnumber">H1<br>H2</div>
            <td class="line">Let It Be</td>
          </tr>
          <tr>
            <td class="line">Beatles</td>
          </tr>
          <tr>
            <td class="line">Yellow Submarine</td>
          </tr>
        </table>
      </td>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <div class="cardnumber">J7<br>J8</div>
            <td class="line">Bad</td>
          </tr>
          <tr>
            <td class="line">Michael Jackson</td>
          </tr>
          <tr>
            <td class="line">Liberian Girl</td>
          </tr>
        </table>
      </td>

    </tr>
  </table>

</body>

</html>

Answer №3

You have the option to set height: 0.33in for elements with the line class and move cardnumber J7J8 line after in the second card.

Take a look at this example...

<!doctype html>
<html>

<head>
  <style type="text/css">
    .card {
      width: 3in;
      height: 1in;
      background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
      background-size: 3in 1in;
    }
    
    .line {
      width: 3in;
      height: 0.33in;
      text-align: center;
      font-family: Georgia, serif;
    }
    
    .cardnumber {
      font-size: 5px;
      top: auto;
      z-index: 100;
    }
  </style>
</head>

<body>

  <table cellspacing="0" cellpadding="0">
    <tr>

      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td class="line">Let It Be</td>
          </tr>
          <tr>
            <td class="line">Beatles</td>
          </tr>
          <tr>
            <td class="line">Yellow Submarine</td>
          </tr>
        </table>
        <div class="cardnumber">H1<br>H2</div>
      </td>
      
      <td class="card">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td class="line">Bad</td>
          </tr>
          <tr>
            <td class="line">Michael Jackson</td>
          </tr>
          <tr>
            <td class="line">Liberian Girl</td>
          </tr>
        </table>
        <div class="cardnumber">J7<br>J8</div>
      </td>

    </tr>
  </table>

</body>

</html>

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

Understanding the Intrinsic Dimensions of Replaced Elements in CSS

I'm currently facing some challenges with the CSS Intrinsic & Extrinsic Sizing Module Level 3, specifically chapter 4.1 on Intrinsic Sizes. This section is proving to be quite difficult for me: When a block-level or inline-level replaced element h ...

htmlcss

CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break. However, the issue arises when the line breaks, causing the box to also break. After trying multiple options, I still can't seem to find a solution. Check out my attempt her ...

htmlcssline-breaks

Leveraging Javascript/jquery to retrieve image data for a specific frame within a video

Query My aim is to optimize the code for image manipulation on a web browser using JavaScript. One possible solution I am considering is utilizing a video file to reduce HTTP requests. Is there a way to extract a single frame from a video in png, jpg, or ...

javascriptjqueryhtmlvideo

What is the best way to position an image in the bottom right corner of a fluid div container?

I am struggling to position this icon image at the bottom right hand corner of this div, so that it appears as if the message is originating from the icon's head. Despite my efforts, I have yet to find a definitive solution. https://i.stack.imgur.com ...

htmlcssangularjsimage

change visibility:hidden to visible in a css class using JavaScript

I've put together a list of Game of Thrones characters who might meet their demise (no spoilers included). However, I'm struggling with removing a CSS class as part of my task. Simply deleting the CSS is not the solution I am looking for. I' ...

javascripthtmlcss

Misalignment of social media buttons is causing display issues

I have arranged my Social Media Div to the right of my Review Div: http://jsfiddle.net/eYQWE/ The issue: the social media buttons in My Social Media div are not staying in a straight line and keep dropping below my Review Div. Do you have any suggestions ...

htmlcssfacebook-social-plugins

Create a grid div that expands vertically to completely fill the available space

I am encountering an issue with my grid layout involving the menu, header, and content. The problem lies in the fact that I want the content (blue box) to expand vertically within the grid element (yellow box). Currently, the grid stretches vertically, bu ...

htmlcsscss-grid

Applying jQuery .animate() to elements without specifying position: absolute

My goal is to create a website where clicking on an image triggers a dropdown menu. The jQuery method I'm using is as follows: function main() { $('#arrow').click(function() { $('.hidden').animate({ top: &a ...

javascriptjqueryhtmlcss

Vuetify's v-badge showcasing an exceptionally large number in style

Encountering an issue with using v-badge and v-tab when dealing with large numbers in a v-badge. Managed to find a CSS workaround by setting width: auto; for adjusting the size of v-badge to accommodate huge numbers, but now facing an overlap with my v-ta ...

javascripthtmlcssvue.jsvuetify.js

Extracting data from websites: How to gather information from dynamic HTML elements

On the website I am exploring, there is a dynamic graph with descriptions below it that keep changing. My goal is to extract all these trajectory descriptions. The HTML code snippet related to the description area looks like this: <div class="trajDesc ...

javascriptjqueryhtmlcssselenium

Grid Refresh Spinner Update

Our Vaadin Grid features a settings icon that when clicked, opens a window allowing users to select/deselect columns. Upon closing this window (triggering our custom window event), the main window's columns are updated accordingly. Now, my requirement ...

cssvaadin

Choosing the content within a div and inserting it into an email

I have an email sender feature on my website where users can fill out input fields and hit send, resulting in me receiving an email. The text from all the input boxes is included in the email body. Additionally, there are some generated texts in divs with ...

javascriptphphtmlformsemail

Tips for adjusting the color using inline CSS

Currently, I have a div styled with blue color using CSS. However, I now require the ability to dynamically change this color. My plan is to retrieve the desired color from a database and use its hexadecimal code in place of the default blue. What is the ...

htmlcss

Is there a way to identify the specific list item that a draggable element has been dropped onto within a jQuery sortable with connected draggable lists?

Take a look at these two sets of items: user's inventory <ul id='list1'> <li>Apple</li> <li>Banana</li> </ul>available products <ul id='list2'> <li>Orange</li> ...

javascriptjqueryhtmljquery-ui

Tips For Making Your Bootstrap 4 Page Fit Perfectly on Mobile Screens

Currently in the process of developing . The frontpage has been created and tested using Chrome's dev console's device toolbar. Ensured that the correct viewport is set and utilized Bootstrap's column system for stacking elements. However, ...

htmlcssmobilebootstrap-4

Importing JSON Data into an HTML File

I need to load a JSON file containing HTML content into my main HTML file upon clicking a button. ABC.json includes: <li><img src="images/picture6.jpg" /></li> <li><img src="images/picture5.jpg" /></li> <li><i ...

javascripthtmljson

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

I recently added a search bar with auto-complete functionality to my website. The search bar queries the database for elements that begin with the text entered by the user as they type. Although it works well, I noticed that every time the user inputs ano ...

javascriptjqueryhtmldjangokeyup

"Enhance your browsing experience with Chrome by automatically changing the background when

I am currently using Chrome with a CSS3 background. <h4 class="title-name clearfix"><a href="****************">Fairy Tail - LUCY</a> </h4> My issue is that when I hover my mouse over the title, the ba ...

htmlcss

jQuery Form: Despite the Ajax response being visible on the page, it does not appear in the source code

Utilizing Jquery Form for an Ajax image upload. This is the relevant HTML code: <div class="input_con imageupload_con"> <form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm"> < ...

javascriptphpjqueryhtmlajax

Achieve perfect alignment of Bootstrap checkboxes

Is there a way to vertically align checkboxes in a column with their labels? My goal is to have these elements centered on the page, but I want the checkboxes themselves to be aligned vertically. <div class="row"> <div class="span12 paginatio ...

htmlcsstwitter-bootstrapcheckboxvertical-alignment