...

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



KevinG
05-29-2007, 12:15 AM
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?

_Aerospace_Eng_
05-29-2007, 12:17 AM
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?

KevinG
05-29-2007, 08:18 AM
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.

_Aerospace_Eng_
05-29-2007, 06:23 PM
I told you needed to use absolute positioning on the middle box. This should get you started

<!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>

KevinG
05-29-2007, 10:34 PM
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;
}

_Aerospace_Eng_
05-29-2007, 10:49 PM
Did you ignore the comments? It seems like you did. The code I posted would have centered the box in all resolutions.

KevinG
05-29-2007, 10:52 PM
i changed the coordinates to posistion the div on the webpage

_Aerospace_Eng_
05-29-2007, 10:56 PM
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.

KevinG
05-29-2007, 11:06 PM
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.

_Aerospace_Eng_
05-29-2007, 11:09 PM
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?

KevinG
05-29-2007, 11:14 PM
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.

_Aerospace_Eng_
05-29-2007, 11:24 PM
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.

KevinG
05-29-2007, 11:26 PM
those lines are div border lines, basically i just wanted to stick a round button over the top of them.

KevinG
05-29-2007, 11:28 PM
just realised, i set the widths for those divs in %, i will change that to pixels.

KevinG
05-29-2007, 11:45 PM
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.

_Aerospace_Eng_
05-29-2007, 11:51 PM
Make that blue div position:relative; and add the red image inside of that blue div. Now the positioning will be relative to the blue div rather than the browser.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum