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:
<!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 >
<table cellspacing="0" cellpadding="0">
<tr>
<td >Let It Be</td>
</tr>
<tr>
<td >Beatles</td>
</tr>
<tr>
<td >Yellow Submarine</td>
</tr>
</table>
<div >H1<br>H2</div>
</td>
<td >
<table cellspacing="0" cellpadding="0">
<tr>
<div >J7<br>J8</div>
<td >Bad</td>
</tr>
<tr>
<td >Michael Jackson</td>
</tr>
<tr>
<td >Liberian Girl</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Also tried all sorts of position: absolute and postion: relative, but I can't get it right.
Any ideas on what to change?
CodePudding user response：
A few things to start with:
- The
<table/>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<table/>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;
}<div >
<div >
<div >Let It Be</div>
<div >Beatles</div>
<div >Yellow Submarine</div>
<div >H1<br>H2</div>
</div>
<div >
<div >Bad</div>
<div >Michael Jackson</div>
<div >Liberian Girl</div>
<div >J7<br>J8</div>
</div>
</div>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 <dl>/<dt>/<dd> elements, but you can make that determination. Also, if this is truly just for printing, it is probably less critical.
CodePudding user response：
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;
}<html>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td >
<table cellspacing="0" cellpadding="0">
<tr>
<div >H1<br>H2</div>
<td >Let It Be</td>
</tr>
<tr>
<td >Beatles</td>
</tr>
<tr>
<td >Yellow Submarine</td>
</tr>
</table>
</td>
<td >
<table cellspacing="0" cellpadding="0">
<tr>
<div >J7<br>J8</div>
<td >Bad</td>
</tr>
<tr>
<td >Michael Jackson</td>
</tr>
<tr>
<td >Liberian Girl</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>CodePudding user response：
Hey you can use height: 0.33in for line class and shift cardnumber J7J8 line after in the second card.
Check this for sample...
<!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 >
<table cellspacing="0" cellpadding="0">
<tr>
<td >Let It Be</td>
</tr>
<tr>
<td >Beatles</td>
</tr>
<tr>
<td >Yellow Submarine</td>
</tr>
</table>
<div >H1<br>H2</div>
</td>
<td >
<table cellspacing="0" cellpadding="0">
<tr>
<td >Bad</td>
</tr>
<tr>
<td >Michael Jackson</td>
</tr>
<tr>
<td >Liberian Girl</td>
</tr>
</table>
<div >J7<br>J8</div>
</td>
</tr>
</table>
</body>
</html>