|
Users viewing this topic:
none
|
|
Login  | |
|
CSS question - 7/28/2008 2:16:48 PM
|
|
|
PolarBear
Posts: 735
Joined: 4/11/2005
From: Moving to San Antonio!
Status: offline
|
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!
_____________________________
My current ministry dream:
http://victorymuseum.org
|
|
|
|
|
RE: CSS question - 7/29/2008 8:17:22 AM
|
|
|
iluvatar
Posts: 1393
Joined: 4/12/2005
Status: offline
|
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.
_____________________________
Well, I've been to one world fair, a picnic, and a rodeo, and that's the stupidest thing I ever heard come over a set of earphones.
|
|
|
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
 Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts |
|
|
Forum Tools
Printable Version
