How to position text in table with background with CSS

Question

I'm trying to print jukebox strips. I have some code written that produces the html page to display the strips, and then you can print them. Jukeboxes have selection buttons like ABCDEFGHJK and 1234567890. To make it easier to load the slots with the strips, I want to print that designator in the corner of the card, where it won't be visible anymore once you insert it. Makes it easier after you have cut all the printed strips and insert them in the right slots.

But whatever I try, printing this designator moves the text on the strip, which is of course not what I want.

My code so far looks like this:





  




  
    

      
        
          
            Let It Be
          
          
            Beatles
          
          
            Yellow Submarine
          
        
        H1
H2
      

      
        J7
J8

          
            
            Bad
          
          
            Michael Jackson
          
          
            Liberian Girl

Also tried all sorts of position: absolute and postion: relative, but I can't get it right.

Any ideas on what to change?

user_8565010 · Answer

You can definitely do it with positioning, you just need to make the parent (.card) relative and then set the child (.cardnumber) to absolute. Then you'll knock the numbers out of the flow and you can put them wherever.

.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;
}





  
    

      
        H1
H2

          
            
            Let It Be
          
          
            Beatles
          
          
            Yellow Submarine
          
        
      

      
        J7
J8

          
            
            Bad
          
          
            Michael Jackson
          
          
            Liberian Girl

user_6831341 · Answer

A few things to start with:

The tag is really intended for tabular data; using it for anything else, including layout, is not really ideal. Given that this content doesn't seem tabular, I'd say this is not a semantic use of the tag. While this may just be for printing something, even in this case you'd still end up fighting with the tag's layout approach.Positioning content in this way, superimposed over some sort of background in which placement is critical, is deceptively difficult front end challenge. When I take on a challenge like this, I usually prefer to see if there's a way the design can be either be generated with code, or if the asset can be chopped into component parts to simplify the coding approach. That said, it is possible to do this in the manner you are seeking, over a background image. My recommendation would be to leverage absolute positioning in this case. .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; } Let It Be Beatles Yellow Submarine H1 H2 Bad Michael Jackson Liberian Girl J7 J8 I eyeballed the positioning-- you can adjust it as needed. You can use a different display mode on the .cardwrapper to change how the cards themselves are laid out (I used flex here). It wasn't evident from your question where you wanted the card number-- I put it in the lower right corner, but you can see how it can be adjusted. I didn't spend much time deciding what the most semantic element would be for the card content-- my hunch is perhaps // elements, but you can make that determination. Also, if this is truly just for printing, it is probably less critical.

user_19496977 · Answer

Hey you can use height: 0.33in for line class and shift cardnumber J7J8 line after in the second card.

Check this for sample...





  




  
    

      
        
          
            Let It Be
          
          
            Beatles
          
          
            Yellow Submarine
          
        
        H1
H2
      
      
      
        
          
            Bad
          
          
            Michael Jackson
          
          
            Liberian Girl
          
        
        J7
J8

How to position text in table with background with CSS

3 Answers