Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Not sure if possible - need to posistion a div on top of 4 other divs

    Not sure if this possible but here goes:

    I want to put a image inside a div and i want to sit that div at the centre of where four other divs corners exactly meet as depicted by "C" in the diagram below (please ignore the dots, they are used to posistion the lines).

    I want the circle to overlap these divs (z index?). And these four divs all have borders, so I cannot cut the circle up as the border lines will show.

    .......|
    .......|
    ____C____
    .......|
    .......|

    I figure this maybe something to do with x and y axis or a layer, and the z index. the circle image will actually be a button. Is there a way i can "clear" everything to posistion this div?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You will need to use absolute positioning on the div with C. Do you have any code you've tried? Maybe draw a better picture?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    here is a slightly better diagram, had to use some free webspace - http://vidinet.com

    how do i override all the others divs on the page so that i can just use the left and top of the browser for coordinates.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I told you needed to use absolute positioning on the middle box. This should get you started
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    border:0;
    }
    
    html, body {
    height:100%;
    }
    
    #container {
    min-height:100%;
    position:relative;
    }
    
    * html #container {
    height:100%;
    }
    
    #box5 {
    position:absolute;
    background:#F00;
    width:200px;
    height:200px;
    top:50%; /*do not change*/
    left:50%; /*do not change*/
    margin-left:-100px; /*this is half the width*/
    margin-top:-100px; /*this is half the height*/
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="box5"></div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thank you aero. only problem is it does not appear in ie6, it appears perfect in ff.

    this is the css for the div:

    #enq {
    position:absolute;
    width:60px;
    height:60px;
    top:382px; /*do not change*/
    left:781px; /*do not change*/
    margin-left:-100px; /*this is half the width*/
    margin-top:-100px; /*this is half the height*/
    background-color: #FF0000;
    }

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Did you ignore the comments? It seems like you did. The code I posted would have centered the box in all resolutions.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    i changed the coordinates to posistion the div on the webpage

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You shouldn't have had to because it would have been centered. I was going by the image you drew. It appears now that the image didn't represent what you really wanted to do. I suggest posting a link to your site.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    aero i have sent you an email posting a link to the site as i do not want it posted here otherwise i will be in trouble.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you not put it on a different server so the real url isn't visible? Anyways from the email your original idea isn't even on that page. I think you need to explain yourself better as to what exactly you are trying to do. It looks like you are just trying to get an image next to content in which the content will wrap around the image. If this is the case then you don't need absolute positioning. All you have to do is float the image to the right making sure it comes before the text. Judging from your question though this site doesn't seem like one you designed yourself. Did someone else do the CSS?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    if your looking at the site with ff you will see a red box with "button img" text inside. i want to posistion that box centrally over the four lines, then make the "button img" box transparent and add an image button.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay I didn't see those lines earlier. They were a little too light. Where are those lines coming from? Is it a background image? What you have now isn't going to work. Have you tried resizing the browser? Those lines move. If you can make those lines not move then it probably will work and it will probably a matter of adding a z-index to the image.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    those lines are div border lines, basically i just wanted to stick a round button over the top of them.

  • #14
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    just realised, i set the widths for those divs in %, i will change that to pixels.

  • #15
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    hi aero, i have a potential solution for the problem and have left a message for you on the website as i am not sure how it could be done. it is 11.45pm here in the uk, so i need to get some sleep. thank you for your help and i look forward to reading your thoughts in the morning.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •