473,394 Members | 1,866 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Centering a DIV

6
I am building an interface where I have a DIV that gets made visible when you roll over a certain area. The div contains some nav elements, which are jscript rollovers themselves. I've got the code working to hide and show the DIV and to do the rollovers. Here is what it looks like so far:

http://www.artntech.com/sample/index.html

The problem is, I really want the design to be centered, and since I am using absolute positioning for the DIV, this creates a problem. Here is what it looks like when I center the underlying table:

http://www.artntech.com/sample/index2.html

I'm pretty new to all his, and am stumped as to how to get that DIV element to center and align with the underlying table (since it is centered, I can't really predict exactly where it will be in the window).

I've seen articles saying this kind of thing can be one with CSS and have tried several of the samples I've seen with no luck. Anyone know of a good way to do this? Any help greatly appreciated.

Thanks

Johnmr

*
Sep 9 '06 #1
2 1538
drhowarddrfine
7,435 Expert 4TB
In your css put 'margin: 0 auto;'
Sep 10 '06 #2
Banfa
9,065 Expert Mod 8TB
If you have to use absolute positioning (which I personally think is a mistake) then put you absolutely positioned elements inside a non-absolute positioned element.

Give that element a style of display: relative; no need to set left or top just let them default to zero.

What this does is cause the absolutely position elements to take the location of their relatively positioned parents as the origin (0,0) rather than the top left corner of the page.

Then you can centre the relatively positioned element and all your absolutely positioned elements will follow suit.
Sep 10 '06 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

11
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...
6
by: Fran¨ois de Dardel | last post by:
http://mapage.noos.fr/dardelf3/tintin/page3bits.html Can I center the series of thumbnails horizontally in the pages _and_ keep the "elastic arrangement" where the number of thumbnails adapts to...
3
by: Jonah Bishop | last post by:
I have a puzzling problem with centering text, and I'm hoping that someone here can help me out. First of all, let me state that I am using XHTML 1.0 Strict and CSS for all layout purposes (no...
2
by: Ryan W Sims | last post by:
I'm having trouble with centering in IE... http://www.ryanwsims.com/koh/ The image should center over the text. It does in Firebird, but not in IE for some reason. If you look at ...
9
by: Pierre Jelenc | last post by:
Is there a way to center (horizontally) a UL list of unknown width? I can put it in a DIV that's centered with "margin-left: auto; margin-right: auto;" but I then have to specify a width; otherwise...
15
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...
6
by: Axel Siebenwirth | last post by:
Hi, as described at http://www.quirksmode.org/css/centering.html, I try to do to centering with my site. I did exactly as told on that page but it only seems to center horizontally. My site...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
1
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.