CSS question (Full Version)

All Forums >> [Fun] >> Computers & Technology



Message

PolarBear -> CSS question (7/28/2008 2:16:48 PM)

Ok, so I'm making a site for someone.

Here is a pathetic mock-up of it:
http://cruiseyourwaytosuccess.com/

You can mouse over the "ports" to get information pop up.

The mousable regions are <div>s with no content, and the pop-up information are originally invisible <div>s that become visible.

My problem is when I center the image. The whole thing is contained in a container <div>, but when I put a "text-align: center" in the body CSS (which does work), the mousable regions and display <div>s are not also centered, but stay in the same position near the left side of the screen.

According to:
http://w3schools.com/css/pr_class_position.asp
a position:absolute is relative to its containing block, which I assumed would be the <div> under the <body> that encloses everything. Instead, the containing block seems to be the <body>.

What's wrong here? Easiest way to get everything centered together?

Thanks!



iluvatar -> RE: CSS question (7/29/2008 8:17:22 AM)

What exactly are you trying to center? The whole image on the page?

If so, in your CSS, give the <div> "main" a fixed width and set its margin-left and margin-right properties to auto. Don't use text-align to center images.

quote:

According to:
http://w3schools.com/css/pr_class_position.asp
a position:absolute is relative to its containing block, which I assumed would be the <div> under the <body> that encloses everything. Instead, the containing block seems to be the <body>.


There's some weird stuff with position - it doesn't always work the way it's supposed to, particularly if you've got things nested inside each other. Try setting the containing block's position to relative and see what that does.

Also, if you don't have the Firebug add-on for Firefox, get it. It's got an HTML browser that will show the html in one window w/ the page in the other. As you mouse-over different objects in the html (<div>'s, etc), it'll highlight them on the page. This comes in REALLY handy when you've got a lot of stuff you're trying to position.

-Dan.



Page: [1]



Forum Software © ASPPlayground.NET Advanced Edition 2.5 ANSI