1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Can someone do this? I'll pay you $20...

Discussion in 'CSS' started by cocoMonkey, May 29, 2008.

  1. #1
    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:

    [​IMG]

    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.
     
    cocoMonkey, May 29, 2008 IP
  2. Normac

    Normac Peon

    Messages:
    40
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Normac, May 29, 2008 IP
  3. cocoMonkey

    cocoMonkey Active Member

    Messages:
    305
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
  4. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #4
    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
     
    webdesigner, May 30, 2008 IP
  5. babanner

    babanner Well-Known Member

    Messages:
    104
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #5
    I'll do it if you work with moneybookers.
     
    babanner, May 30, 2008 IP
  6. cocoMonkey

    cocoMonkey Active Member

    Messages:
    305
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #6
    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.
     
    cocoMonkey, May 30, 2008 IP
  7. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Working on it.. I'll edit this post if I find a quick solution.
     
    steelfrog, May 30, 2008 IP
  8. Luci

    Luci Peon

    Messages:
    59
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I could do it if you showed me an image of what you want and gave me all the little images in a .zip.
     
    Luci, May 30, 2008 IP
  9. cocoMonkey

    cocoMonkey Active Member

    Messages:
    305
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #9
    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.
     
    cocoMonkey, May 30, 2008 IP
  10. Luci

    Luci Peon

    Messages:
    59
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    bottomright and greensquare don't work for me :( they do in a proxy but i can't save them in a proxy
     
    Luci, May 30, 2008 IP
  11. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Is the gray box an input? (e.g., does the text go all the way to the top edge?)
     
    steelfrog, May 30, 2008 IP
  12. cocoMonkey

    cocoMonkey Active Member

    Messages:
    305
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #12
    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.
     
    cocoMonkey, May 30, 2008 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    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
     
    deathshadow, May 30, 2008 IP
  14. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Have close version working in Firefox; fixing IE.
     
    steelfrog, May 30, 2008 IP
  15. Everences

    Everences Peon

    Messages:
    114
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #15
    PM inbound soon.
     
    Everences, May 30, 2008 IP
    cocoMonkey likes this.
  16. cocoMonkey

    cocoMonkey Active Member

    Messages:
    305
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #16
    cocoMonkey, May 30, 2008 IP
  17. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Bah, what a waste of time. Heh, oh well, I'll know better next time! ;)
     
    steelfrog, May 30, 2008 IP
    cocoMonkey likes this.
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    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.
     
    deathshadow, May 30, 2008 IP
    cocoMonkey likes this.
  19. Nitro777

    Nitro777 Active Member

    Messages:
    105
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #19
    Congrate : deathshadow

    and good luck .
     
    Nitro777, May 30, 2008 IP
  20. cocoMonkey

    cocoMonkey Active Member

    Messages:
    305
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #20
    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.
     
    cocoMonkey, May 30, 2008 IP