A client has asked for a responsive web design down to 1px width (they originally asked for 0px, but I was able to convince them that that could not actually exist).
Obviously, I am unable to render characters or images so my idea is to encode everything in Morse or binary code using pixels down the height of the page. Can this be done using just CSS?
This is the stupidest question I've ever seen!
I'm going to save my insults for you and your client, purely because this is interesting. It's not useful or usable for a human, but it is possible to make a webpage 1px wide.
... except for images, obviously you aren't going to see images well at 1px so you could either scale them to a single pixel or hide them altogether. I'll let you decide.
... also no desktop browser can have a viewport that small. But it is possible to have a 1px wide iframe.
... also you and your client won't be able to read this, it will be in Morse or binary (or something else). Totally not human readable.
Use media queries to only show binary at 1px
Using CCS media queries, which most responsive developers are using today, add something like this:
#media screen and (max-width: 1px) { }
You'll want to add your CSS in those curlies.
Then rotate and position
I've made an example of what you want to do, which is rotate and position the text so it's half off the left side of the screen.
Check the JSfiddle (I've put it in a div with the overflow hidden to simulate a 1px wide widow). You'll probably need to use javascript if the text content is dynamic.
Use a barcode-esque font
If you looked at the JSfiddle above it's probably not obvious that even a well trained machine couldn't read that. The characters are different widths and some characters will look the same, eg l,i and t have the same width and center pixel line.
So you'll probably want to use a barcode font like this.
The final result will come out looking like this:
Related
I am trying to fix an image to a certain point in the background image for a project.
I've created a jsbin as I couldn't find the words to explain what I'm trying to accomplish.
http://jsbin.com/esUNEKIM/2/
In the example, the little map pointer is perfectly placed at the tip of the finger in the background image (at my resolution and full screen), but moves when the image scales down.
Any clues?
PS: I need the two images to be separate. I'm open to hacks as this will be a temporary landing page and we don't really care about old IE compatibility here.
Thanks!
Edit: I see it now when I shrink my browser vertically - you'll need to add in vertical media queries (e.g.: http://cognition.happycog.com/article/go-vertical/) or use JavaScript.
I actually didn't see it move when it scaled-down but when it scaled up. For me, 230px seems to work until a given point (around 1600px). Use a media-query to change the right position. It looks to me like 16% seems to work after that point.
#media screen and (min-width: 1600px){
#capsule {
right: 16%;
}
}
If you're still seeing it on scale-down, you can add multiple media-queries to adjust the position.
I am new to css.
I wanted to know which is the best standard technique to keep the page intact even when the browser size changes, the page is zoomed in or is used for any other screen size. I have tried centering my layout using a container but it gets disturbed when the page zooms in (i know it will, but all what I want is that the elements don't go out of the screen and if possible stay in almost the same position).
So what is the best and easy standard technique in css to achieve the
Thanks for your help.
The newest, cutting-edge method is called responsive web design. It's a bit complicated, but it's looking like the way to develop for multiple screen sizes. It is especially useful for small websites.
Check out some examples here: http://mediaqueri.es/
And some more in-depth information here: http://www.alistapart.com/articles/responsive-web-design/
If you set a set size for your body element anytime the browser is re-sized nothing within the page will change.
So the CSS you want to add is as follows:
body {
width: 960px; //being the size screen you want to accommodate your site to
}
Also this may help you: Commonly used pixel sizes for webpages and their pros/cons .
I'm chopping up a new design into valid HTML/CSS. This particular design has several images that are very detailed and I'm debating on how to approach dividing them up.
Here is a link to a folder containing the different options I see. There are four aptly named images - bg.brickLeft, bg.brickMiddle, bg.brickMiddle, bg.combined.
I'd just like some input in how other web-developers would break up this design. bg.combined is obviously what the final product needs to look like.
I'm leaning towards bg.combined because 1) less css 2) one http request - but the CSS purist in me is screaming and even wants to separate the gradient into a 3px wide repeatable image.
I'm concerned with the bg.combined approach because it won't look so pretty when loading on slower connections.
How would you approach chopping up this design?
What are the technical pro's/con's you see for these two approaches?
Would you approach it entirely different?
EDIT - Also, the height of the site is static
I'm a fanatic for giving people with wide screens something to look at (you mention static height, but there really is no such thing as static width), so for me, I would make the brick left/right into an image that can be repeated nicely and have a repeat-x applied to it so that wide screen visitors saw more wall.
Other than that, I would leave the center one as my content background in a div centered on the page. So the short of it is, I would do 2 images, the brick as the body background and the patterned 'middleBrick' as my page wrapper div background.
I ended up combining these images, in addition to adding a wider background.
Here is the final result
I'm pretty new to CSS, I've pilfered a bit of code and made it work for me in the way I want, I've developed a bit of an understanding after trying so many different ways to do what I want but am a bit lost.
I want to do exactly as the title says, image-map whilst allowing for the automatic resizing I'm trying to implement. Obviously I'm trying to make my site look decent on most resolutions without compromising the design I want. The site with my code so far is below:
http://blunderphonics.0sites.net
I would have done it with the old html way of doing it but I don't want any border, which that doesn't seem to allow (as you can't image map with backgrounds).
Please help, it's driving me mad
Not sure you could do this with an image map, since you have to pass pixel-perfect coordinates to the area tags.
However, what I would suggest is several an a tag for each of those areas. Set each link to display: block and size and position them with percentages (like you do in the "bg" class).
For example, the link for that top title that spans the entire page might be styled something like this:
#home-link {
display:block;
width:90%;
height:10%;
position:absolute;
top:2%;
left:5%;
}
This is merely an example, and those numbers are by no means accurate. I'm just using them for demonstration purposes. What you would want to do is do some measurements on that image and figure out the dimensions and positions of those links as a percentage of the entire document. For example, if a link is 100 pixels from the top, and the image is 1000 pixels tall, then you would set the top property of that link to 10%.
Hope this helps.
What are the right sizes for a webpage to be printed on A4 size paper? What other stuff should be considered?
*inline CSS is preferred in this case
Clarification: This web-page's only propose is to be printed, since it is a receipt.
Clarification # 2: This web-page is for the internal use of the company I'm working for. They would like it to look professionally designed receipt.
Clarification # 3: This web-page must be printed on one page -of A4 size- only.
Answer
I'd recommend using two different style sheets.
For viewing in the browser you could set the table width to the width of an A4 paper: 21cm. (Minus margins 18cm.)
For printing the size of the table should be "100%", which means the printer fills the whole width of the page, using the margins given by the browser's settings. (Those page margins are what makes it impossible for you to make a printout look exactly the same.)
Possibly working
Make the table narrow enough to be safe it's in the page margins. Then center that table vertically.
Solution for perfect layout
There's no way you're going to achieve that with HTML & CSS, it's just not designed to allow exact layouts!
Create PDFs online and let the users download them. Most browsers are able to render PDFs anyway.
the best way is use from #Media command in stylesheet
for example
#media print{}
use for print layout of all control and
#media screen{}
used for screen layout of control, just think you have a
<div class="wrapper">content</div>
and then in your media you should have
#media print{ .wrapper{width: 100%;background-color:Transparent;color:Black;}}
and
#media screen{ .wrapper{width: 100%;background-color:#cdebcd;color:Red;}}
with this #media you can style your layout totaly different for print and screen. you can also use
.SomeDivOrContent{visibility:hidden;display:none;}
to hide ites in print.
let me know was it helpfull or not
Like the other guys said you need to use a print CSS, but remember one thing:
display:none; //is your friend!
You can use this to make sure elements such as your navigation etc are not printed out.
By the way A List Apart has this great article on print stylesheets, check it out.
Make your printable version as simple and free from page furniture as possible.
You should create a print-specific stylesheet that as a minimum removes any width restrictions on the page so the print page can flow the text to fit the output paper.
You should also be aware that most browser don't print CSS background images by default so don't rely on them being present on the printed page.
EDIT: In answer to your comment, I would make the receipt as simple as possible. The main issue is you don't have control over the end-user's printer so you can't know for sure exactly how wide the printable area is.
Design the page using a liquid/flowable layout and try and keep it simple. Amazon's receipt style that you get in the delivery box is probably worth using for inspiration.