absolute positioning - Post ID 103479

User 2733 Photo


Ambassador
426 posts

I use this little position trick exclusively when I develop:

<div style="position:relative;width:1px;border:0px solid #000;margin:0px;">
<div style="position:absolute;left:10px;top:10px;border:0px solid red;">
<!-- pleace your content here -->
</div>
</div>


Obviously, you'd place this code block relative to any page element you'd like to layer something over or whatever. Works flawlessly each time, in all browsers. Change the bolded values to move your content. You can also set the alignment attribute to right instead of left. And, you can add the z-index attrib to the inner div to raise that content up above all else. If you're so inclined. My pleasure to kill another thread.

Enjoy
Let's not get all hurt.
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Phil wrote:
Anthony - Don't know if it would make any difference or not, but what editor are you using? CC HTML Editor or CC VSD?


Apparently he is using neither. Seems to be something called Webcreations1. I have never heard of them.

The thread is still alive, David! ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1948478 Photo


Senior Advisor
1,850 posts

Anthony,
I noticed a couple of other oddities in your code that may complicate your efforts to fix the problem you mentioned in your post (I noticed that you fixed some of the overlapping problems from yesterday, but others remain, or were created in the process):
The code appears to have originated from a cut-and-paste combination of two html pages. There are two sets of <html>, <head> and <body> blocks of code in the page, some of which are partly nested, - or overlapping. In addition, there is a third <head> tag that is never closed, as well as an extraneous closing </body> tag.
I'd suggest you run a code validation on the page to pick up some of these problems and then clean up the code, or I suspect you are likely to have 'strange phenomena' continue happening to your page.
This is the sequence of some of the tags I am referring to:
Line 2: <html>
3: <head>
33: </head>
34: <head>
118: </head>
119: <body>
129: <html>
130: <head>
176: </body>
177: </html>
485: </body>
486: </html> (last line)
User 472422 Photo


Registered User
111 posts

Thanks everyone for taking the time to help - I really appreciate it.

I have used the div tags and uploaded the files and now all seems to be working fine.

Thank you once again.

Tony
User 1948478 Photo


Senior Advisor
1,850 posts

ANTHONY DIFILIPPO wrote:

....now all seems to be working fine...

Well, not quite. As I alluded to before, new problems popped up on your page since your fix.
Most notably, the main menu at the top no longer works and the submenus do not show. (Using Chrome 3.0, XP SP3)
Just thought I'd point it out. Then it's of course up to you... ;)
User 38401 Photo


Senior Advisor
10,951 posts

Yep same here in FF 3.5.7 the menu is still out to the right same as it was on my screenshot in my previous post. The rest seems to be good now though, background area is corrected, just menu is still skewed to the right. None of the menu links are working at the moment, doesn't look like they have any links in them yet. And as Per mentioned, the submenus (if there are any yet) aren't showing either, even though they have arrows showing there should be some.

I'll assume maybe your menu isn't finished yet so I guess post again if this isn't the case, or post again when it's finished so we can see it :)

Fix the positioning of it though :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.