Css media

Floating “postcard style” label sheets with @Media – HTML & CSS – SitePoint Forums

Hi guys. Be sure to check out my chart below. The concept here is that I create a sheet of PDF labels that I can print on paper and cut with a paper cutter and/or scissors, ending up with little paper “labels” that fit on a standard US Business No. 10 envelope (the kind you fold a sheet of paper 1/3 and slip in envelope) – these, defined as much by what they are not: shipping labels.

Each of the rows of this float produces a small “postcard” style of 3 “sets” of labels per row: on the left is my return address block, on the right is the recipient block and the vertical line you usually see on a postcard divides the two. which will ideally extend from the top of the sheet of paper to the bottom: the “full bleed” effect of a printer (or as close as possible).

The contents of each of the 6 columns must be aligned vertically on the top of their row. So, regardless of the difference in appearance of the return data (smaller font, lighter font weight, gray scale), the top of the word FROM should line up with the top of the word TO on every line.

The return data is in a smaller, grayscale font size, to direct the eye to the Recipient block which is a larger, bolder font size. There are standard TO: and FROM: headers. And that’s about it. Tried it doing this as Flex but not everything about Flex was to my liking (for this project) and eventually realized what I really wanted was a good old fashioned FLOAT .

It took some experimenting, but I got all the way to the code I’m inserting below. What happens is one of those results that probably equates to a word or two in the stylesheet, but without it the whole design breaks:

First, let’s take a step back and look at the concept. We’re going to have (mostly) repeating blocks of text that “hang” from the top of each line. The three OF text blocks – COLUMN-A – will need a narrower width than the To blocks – COLUMN-B.

I could tell you what those respective widths would be If only I could see this damn page display correctly! Wtf carry on with COLUMN-A? lol That’s why I’m here.

If you look at my graph, you can get a rough idea of ​​their two widths (40/60? something like that). So if someone could kindly help me out with setting up the column widths – taking into account left and right margins + a larger margin (than I have) between the TO: block and its vertical line – I would greatly appreciate it.

I have to warn you that I didn’t have time to code the SCREEN version of that. When you open this code in your browser, it will be look hideous. Sorry! You will have to fly blind until you print it to PDF. Just ignore the browser window. Here we are:






 




FLOAT¶ POSTCARD LABEL SHEET ᰄ VIEWPORT + @MEDIA by semicodin







FROM: ROW 1A
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 1B
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 1C
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 2A
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 2B
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 2C
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 3A
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 3B
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 3C
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 4A
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 4B
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 4C
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 5A
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 5B
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4
FROM: ROW 5C
RETURN1
RETURN2
RETURN3
RETURN4
RETURN5
TO:
ADDRESSEE 1
ADDRESSEE 2
ADDRESSEE 3
ADDRESSEE 4

DASH MARKINGS ARE ONLY AS A VISUAL AID, PLEASE DON’T CODE THEM (or the blue gutters)!