PDA

Click to See Complete Forum and Search --> : Challenge! Absolute Positioning Problem with CSS and Javascript.

paulherron
06-21-2005, 09:56 AM
Hi everyone,

I was wondering if anybody might be able to help me. I've been fiddling round with a script i found for a navigation bar. One javascript file allows rollover images tobe faded in on the navigation bar, and the other allows a drop-down menu to be viewed when one of the buttons is clicked.

This drop-down menu is causng me problems. In my HTML page, everything is held within a layer called 'content', which keeps everything in the right place relative to each other but allows the whole lot to be centred in the browser. The drop-down menu, however, seems to appear wherever it likes, with its position changing according to how wide the browser window is sized.

I need to have the menu open directly under the 'portfolio' button, but I just don't seem to be able to give the drop-down menu an absolute position within the content box. Can anyone help? I'm not sure if it's the CSS setup within the HTML file or the Javascript code in 'vbulletin_menu' that's the problem.

A RAR file is available for download at www.paulherron.net/paulherron.rar (http://www.paulherron.net/paulherron.rar)
if anyone's interested.

Any help would be greatly appreciated!

Paul
byeee
06-22-2005, 12:39 AM
Drop-down menus are DHTML... or at least I think so. You could try posting in that section.
byeee
06-22-2005, 03:09 AM
I have some problems with absolute positioning too. I learned how to make the padding of the divs, works fine in ff, ie and opera, but how do I center a div (vertically) to the middle of the page? :D
or at least how do I center the entire page vertically? I don't want to use paragraphs for that...
scragar
06-22-2005, 04:25 AM
style="align: center"
byeee
06-22-2005, 04:53 AM
I want to align it VERTICALLY.

I found a script involving two DIVs that centers something vertically but it's a little harder in my case.

My page is something like this:
+---------------------------+
| Text1 |
| Picture Text2 |
| Text3 |
+---------------------------+

I want to align both the text and the picture vertically. The text's height may differ so I can't use any padding.

Any ideas?
scragar
06-22-2005, 04:56 AM
vertical-align:middle;
byeee
06-22-2005, 04:58 AM
I'm not that beginner... it won't work for the div.
scragar
06-22-2005, 05:10 AM
I've just discovered that myself, I even tried positioning it via percentages(50%) and adding a negative top margin, but float left breaks it out of the div!

I'm out of ideas, unless you plann on using a dreaded table...
byeee
06-22-2005, 05:29 AM
That's what I started from...and I don't want to use any more tables or <font> tags. I found a code for centering:
<head>
<style>
body, html {height: 100%;}
* html #tbl {position: absolute; top: 50%;}
#tbl[id] {display: table; height: 100%;}
* html #cell {position: relative; top: -50%;}
#cell[id] {display: table-cell; vertical-align: middle;}
</style>
</head><body>
<div id="tbl">
<div id="cell">
centered text
</div>
</div>
</body>