Code image to upper line

Discussion in 'HTML & Website Design' started by obeegoone, Jan 4, 2010.

  1. #1
    Hi,

    This is my idea i just got wich i hope someone could help me with

    I want to put a image on my top border/image, like a hanging sign, something like this image, print from my site

    [​IMG]


    Now my question is, can someone help me out guide me what i should do, because i srly have no idea, not only more then its css and html
     
    obeegoone, Jan 4, 2010 IP
  2. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well you will have to use CSS positioning, something similar to this:

    Lets say you have your main web page layout in a containing block with an ID #container. And you have the hanging image you intend to place on the Top-Right corner of the page inside a block called #hangingimage

    In such a case you do this:

    #container { position:relative; }
    #hangingimage { position:absolute; top:0px; right:0px; width:xxpx; height:xxpx; } - replace xx with actual dimensions.

    Now if you construct a demo html page & show us, we'll be able to give more specific/detailed instructions.
     
    markupdude, Jan 5, 2010 IP
  3. abhijit

    abhijit Notable Member

    Messages:
    4,094
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    215
    #3
    you can put the image in background then make a table with 2 rows and one column........................
     
    abhijit, Jan 5, 2010 IP
  4. obeegoone

    obeegoone Peon

    Messages:
    187
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Seems to work so far thanks :) Exactly were do i put the image code ?
     
    obeegoone, Jan 5, 2010 IP
  5. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    If you mean "where to put the image" i would say keeping it in the background of the #hangingimage block will be good. Like:

    #hangingimage { position:absolute; top:0px; right:0px; width:xxpx; height:xxpx; background:url(hangingimage.png) left top no-repeat; } - here keep the width & height of #hangingimage equal to that of the image.
     
    markupdude, Jan 5, 2010 IP
  6. obeegoone

    obeegoone Peon

    Messages:
    187
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thank you very much will try right away :)

    *edit*

    Working perfect :D How can i set it more down and to left a bit ? Right now its in right upper corner
     
    obeegoone, Jan 5, 2010 IP