Hi guys, Been trying to do somthing for hours now! Just cannot do it If anyone can do this, i'll give you $20 for the code. Here's what im trying to do: These are the exact images i want to use -- the grey box, and the green square are all the right size, and the right distance apart. I want the gray box to auto resize as high as it needs to be, So the top image shows the grey box size with a bit of text, and the middle image with more text. The green box always needs to move down to the bottom of the grey box (with the white gap below it, as seen) The preview with the red lines is how i'd like it, the bottom line on the grey box has a slight shading, and rounded corners as you can see. This is somthing that would be so easy using tables, but my css skills just cannot do it. The green box needs to be an image -- not a css background. It just needs to align to the bottom of a div (so i can change it easy). Also, if you could use a css boarder for the right and left instead of an image that would be great. And the code also needs to be able to work one above another -- So if i wanted, i could use your code, then below that, your code again like this: ---> ---> ---> and they all stay below each other nicely. Here are the images cut into bits for you to use: http://img99.imageshack.us/img99/1115/bottomleftdo1.gif http://img99.imageshack.us/img99/3009/bottommidgl4.gif http://img365.imageshack.us/img365/9427/bottomrightnq8.gif http://img365.imageshack.us/img365/4623/greensquarelb4.gif http://img99.imageshack.us/img99/8836/topleftrl8.gif http://img99.imageshack.us/img99/982/topmidce5.gif http://img501.imageshack.us/img501/2315/toprightbp8.gif Code (markup): Please help! If you think you could do it, but $20 isnt enough, just PM me your price. First solution gets the paypal money. Cheers.
I get the drift of what you want, but it seems the picture isn't working. Get working picture/link to picture and I'll give it a shot, seems easy enough.
Pictures are working for me mate? http://img99.imageshack.us/img99/1115/bottomleftdo1.gif http://img99.imageshack.us/img99/3009/bottommidgl4.gif http://img365.imageshack.us/img365/9427/bottomrightnq8.gif http://img365.imageshack.us/img365/4623/greensquarelb4.gif http://img99.imageshack.us/img99/8836/topleftrl8.gif http://img99.imageshack.us/img99/982/topmidce5.gif http://img501.imageshack.us/img501/2315/toprightbp8.gif cheers.
Doesn't seem to clear to me exactly what you want done mate... If you could do some quick sketch in photoshop etc and show us exactly what you want done, it could be done no problem
damn! None of my pics are working now! I will upload my example that i made, and the images again when i get home. Sorry guys. Babanner -- i only have a paypal account matey.
I could do it if you showed me an image of what you want and gave me all the little images in a .zip.
Hi mate, i've just checked, and everything seems to be working ok (the images are there, i just couldnt see them here at work, but i've checked with a proxie, and they are there, and the demo too) All the little images can be downloaded here: http://img99.imageshack.us/img99/1115/bottomleftdo1.gif http://img99.imageshack.us/img99/3009/bottommidgl4.gif http://img365.imageshack.us/img365/9427/bottomrightnq8.gif http://img365.imageshack.us/img365/4623/greensquarelb4.gif http://img99.imageshack.us/img99/8836/topleftrl8.gif http://img99.imageshack.us/img99/982/topmidce5.gif http://img501.imageshack.us/img501/2315/toprightbp8.gif I want them to be used to make the grey box. The green box always needs to align to the bottom of the grey box on the left, not matter how tall it gets with text: ---- | | | | | | *** | | *** ---- Code (markup): And i want the grey box to be able to get as tall as needed, and still keep the rounded corners. First one to do that, and post the code gets the $20 paypal. Steelfrog, can you make a new post if you do it, and not edit the post, then i know who's first... Cheers for all the intrest guys.
yeah, the idea is, that text can go into the grey box, and as it gets longer, the green box moves down with it. If you can make the text get as close to the edge as possible, or make it set by padding or somthing that would be great. cheers.
PM inbound soon. Soon? Sent. Working in IE 5.5, 6 & 7, FF 2.0 and 3 beta, Opera 9.25 and 9.5 beta, and Safari 3 Windows. hint - use a negative margin to ride the box up rather than dicking around with floats or absolute positioning
Sorry guys -- deathshadow has PM'd me the code http://ba.***org/for_others/cocoMonkey/template.html Guess he wins. Thanks for the help.
My approach has some advantages over 'conventional' ones. For example it uses just two images to build the content box using a sliding doors technique... No floats involved so the layout headaches are minimal, likewise all the boxes remain 'in flow' thanks to not using absolute positioning either. Just give it a negative top margin equal to how far you want it to ride up, and margin on the bottom to make sure the next box ends up where you want it.
Damn, thats amazing code deathshadow -- im really happy with that mate. Cheers! Paypal sent! Sorry to everyone who tried and didnt come first It's no replacement for $20, but Rep given.