I only know how to do this in 3 ways - using absolute,left,right,top and bottom values - using tables. - slice the image I can't stand to do any of those, I just can't bring myself to do it. The site is 3 columned, with a header, but it has way too many images/round corners, and they are what I'm having trouble with. With sites, I rarely use a PSD as base, and just make it up as I go along. So could someone give me an example of how to do my header? Or even a sidebar. I am not going to include the effects in the centre part. Cheers, BP
That is not web friendly at all. How the hell is it going to work if you have more content than what you designed for? Re-do the design.
Set it as a background image and just put crap on top. There's no point in dividing everything into sections (as in the header image, sidebar images, etc) because its "pixel perfect" and doesn't expand at all. You will run into problems with this and get frustrated. Good luck.
Well, I went with fluid both directions though the side columns themselves are fixed http://battletech.hopto.org/for_others/blueparukia/borders/template.html The directory is unlocked http://battletech.hopto.org/for_others/blueparukia/borders so you can grab the gooey bits... It uses only three images totalling under 10k in size. I used the sliding doors techniques to reduce many of the images down to work from a single file... the 'separators' are simply a height declared div, padded on the left with the background set to not tile, with a div inside them floated to the right to render the opposite side of the box. Likewise the repeat-y are simply double wrapped, though in the case of the three columns some 'trickery' was involved in getting it working right. A lot of the floats, position:relative and overflow settings there are to make sure the columns are wrapped by the background. I let the padding for the side backgrounds push in the content area, then use the classic 'same float negative margin' techniques to position the column content. The hardest part was that IE is calculating 100% width differently at this point, so you have to feed all IE versions the opposite margins you would 'rest of world'. Wow, this one was a good test of my skills. Validates XHTML 1.0 strict, tested as working in IE 6 & 7, FF, Opera and Safari... and COMPLETELY FAILS MISERABLY in IE 5.x - oh well.
So that means it was hard, and not just me, thank god. I felt like a noob. http://battletech.hopto.org/for_others/blueparukia/borders/images/multiCorners.png ....wtf. I am going to have to take a good, long look at your code to see how you managed this. Who gives a crap? Thank you so much for this. Out of curiosity, for how long have you been studying HTML/CSS? Thanks again, BP
For some reason I can't recreate this with the full size image (which is 1018px wide) Is their any particular scale the images have to be, in terms of width and height? Thanks, BP
Been playing around with this for the last few days, and I kinda got it, but the images aren't perfectly aligned with each other... Thanks, BP
I can't see the images images/multiHeaderSides.png and images/multiMiddleSides.png or whatever they were. The demo still works. wtf? This is awesome. Keep this on your server for a long time. I will need to study it. I've been trying to make a liquid-both-ways site which wants an image strip on each side, and sliding images in the header. First I tried the strip on the right side on the body since I thought it would be harder to add the image to the right side of every box. That caused me to set funny widths like 97.9% and they still didn't scale well... Looks like the right floats carrying the right side is the way to do it. But I only see one image on the server... the other two are listed but clicking brings up nothing. Jezus.
I thought it might be like that, so I had spent like 3 minutes trying to right click around the top until I got my image posiibilities... but they never showed up. Again, Jezus. What a job.
I gotta hand it to Jason - he's a marvel when it comes to complex graphical layouts. I had to do one that was much worse than this a couple months back (and by worse I mean more complicated) - it was a royal pain in the neck, especially since it had to line up "pixel perfect" with a Flash layout as well.