positioning problem ... PLZ HELP!

Discussion in 'CSS' started by hvolvo, Mar 28, 2008.

  1. #1
    i am creating a web site and one of the pages is for uploading images
    i first tried the upload image code separately in a test file & it worked perfectly
    so i included it into my required web page and it gave a strange problem..
    i couldnt click on the 'upload image' button. it just showed up on the page as if it was a part of the background...:(

    after messing up with it for a long time i just found some thing...
    in the main page where i am using it i also had a link to a css file in which i had given 'position=absolute' for a division
    to position a menu list at the top of the page just besides my submit button
    ***************main page**************************

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>X's Home Page</title>
    <link rel="stylesheet" type="text/css" href="templates/css/divisions.css" />
    </head>

    <body>
    <center>
    <form>
    <input name="Submit" type="submit" value="Upload image">
    </form>
    </center>

    <div id="main_menu">
    <ul>
    <li><strong><a href="">Message Book</a></strong></li>
    <li><strong><a href="">Add a Friend</a></strong></li>
    <li><strong><a href="">My Photos</a></strong></li>
    <li><strong><a href="">My Settings</a></strong></li>
    <li><strong><a href="">My Profile</a></strong></li>
    </ul>
    </div>

    </body>
    </html>

    ************************************************

    ********* part of CSS file***************************
    #main_menu {
    top:0;
    left:0;
    width:100%;
    position:absolute;
    padding:0;
    }
    ..
    ..
    ..
    ************************************************

    without 'position=absolute' the menu was appearing bellow the button level,

    now if i remove this 'position=absolute' i can click on the button which opens a window to select an image

    but i want it positioned on the top

    the attachment pics are screenshots of the main page with and without 'position=absolute'

    why is this happening? :confused:
     

    Attached Files:

    hvolvo, Mar 28, 2008 IP
  2. DoOoM

    DoOoM Active Member

    Messages:
    188
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #2
    It is because you have set width: 100% in the main_menu ID. It gets like layer that covers the form. There are 2 options for you: You can either set "position:absolute" to the submit form and "z-index:2"....but I would recommend you to remove the absolute positioning and to position the elements by using floating and margins.

    Cheers
     
    DoOoM, Mar 28, 2008 IP
  3. hvolvo

    hvolvo Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanx dude!
    it works fine. ill have to do a lil bit of reading on floating and margins before going for it.:)
     
    hvolvo, Mar 30, 2008 IP