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.
Related
I have no idea how to fix this. I've included a picture of the site.
This only happens on larger screen monitors, for some reason. On my 14" laptop, its' fine. Anyway, is there any way to ensure that content starts underneath a background image? And not overlap it, as shown.
Thanks so much for any help.
https://i.stack.imgur.com/6PbUr.jpg
Well, it's complicated to work with css relativization when your main image of the site (the takes nearly all the screen) is into background or other rules that don't fill the rest of the elements. The best that you can do is to relativize body.home margin-top with percentages, but I highly recommend that you put that image inside a div container with width 100% and background-size cover and start to work towards that. Any other solution will be hacks and lacks of good practices, because if you want (and one day you will) change de background-image, all your elements will need a new proper location, obliging you to change css every time.
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:
Here's the JSFiddle (disregard the differences with picture below):
http://jsfiddle.net/stapiagutierrez/y2PhX/
I'm supposed to have something like this in the white background, but the images in the center and right column seem to expand outside of their domain.
Any suggestions on how to cleanly handle this situation? It needs to be nice and centered, needs to end up like the picture, I feel I'm close but can't quite get there. Thank you, learning quite a lot in this tag area in Stackoverflow.
Use pixel widths, not percentage.
I've just started using CSS spritesheets to significantly reduce the number of requests a user makes on our webserver (previously I had designed a page with 200 thumbnails, each linked separately, so that was 200 requests just for those and didn't know it was an issue until someone told me about it)
After going through w3schools I have figured out how to use it and have downloaded spritesheetpacker to help me make the spritesheet as well as give me the dimensions and offsets.
Now I have a CSS file that's extremely long, and am not looking forward to tagging 200 HTML elements manually. Is there a different way to deal with this situation? Here are some details:
I am familiar with javascript (not much JQuery though)
I have all of the dimensions and offsets for the images from the packer.
The page contains a table with a column for thumbnails, and another column with a link to the file associated with it, so people can quickly scroll through the page and pick what they want. You can also click on the thumbnail to see a full-size picture
I am currently displaying the image using the img tag and wrapping them with anchors, where the img class is just the picture filename (since it is also included with the output from the packer)
You can save a bit of CSS by grouping things together with similar dimensions and then just coding the background images.
<a class="buttonA Image5"></a>
.buttonA {
width:100px;
height:30px;
display:block;
}
.image5 {
background-image:url(...);
background-position:....
}
If you use display:block on your anchors, you can use a CSS background on it and eliminate the image tag completely.
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