| Home | Register | FAQ | Members List | Search | Today's Posts | Mark Forums Read |
17-06-2008, 21:16
|
#1 (permalink) |
|
Registered User
Join Date: May 2008
Posts: 13
|
Centering AP DIV tag
I am trying to center this set of tags, but when I center it, the ap divs are all over the place...how can I keep them all together in the center of the screen (on any monitor)? Thanks in advance!! <style type="text/css"> <!-- #apDiv1 { position:absolute; width:950px; height:510px; z-index:1; left: 25px; top: 48px; } #apDiv2 { position:absolute; width:200px; height:115px; z-index:1; } #apDiv3 { position:absolute; width:89px; height:315px; z-index:1; left: 193px; top: 59px; } #apDiv4 { position:absolute; width:459px; height:315px; z-index:2; left: 290px; top: 58px; } --> </style> </head> <body> <br /><br /> <div id="apDiv1"><img src="/images/layout.jpg" width="950" height="500" /> <div id="apDiv4"><img src="/images/inhouse-fam-10-2.jpg" width="475" height="316" /></div> <div id="apDiv3"><img src="/images/gallerynav.png" width="90" height="315" /></div> </div> </body> |
|
|
|
|
17-06-2008, 22:03
|
#2 (permalink) |
|
shiro
Join Date: Aug 2007
Location: Yokohama, Japan
Posts: 2,551
|
Your problem here lies in your use of absolute positioning for all your div tags. As an initial rule, you shouldn't use absolute positioning. It's a quick fix, which makes it tempting for beginners, but it almost invariably causes problems for beginners (like the one you are having) further down the line. Take away the absolute positioning, then give each div a fixed width (edit: you've already done this), and apply left and right margin values of 'auto' to the divs. This will center them. |
|
|
|
17-06-2008, 22:39
|
#3 (permalink) |
|
Registered User
Join Date: May 2008
Posts: 13
|
Thanks haku...I am very new at these tags (just learned them today). I removed the absolute positioning and did this (is this right?) all it does is center everything in a line down the middle...not not stacked like it should be: #apDiv1 { margin-right: auto; margin-left: auto; width:950px; height:510px; z-index:1; left: 25px; top: 48px; } #apDiv2 { margin-right: auto; margin-left: auto; width:200px; height:115px; z-index:1; } #apDiv3 { margin-right: auto; margin-left: auto; width:89px; height:315px; z-index:1; left: 193px; top: 59px; } #apDiv4 { margin-right: auto; margin-left: auto; width:459px; height:315px; z-index:2; left: 290px; top: 58px; } |
|
|
|
17-06-2008, 23:59
|
#4 (permalink) |
|
shiro
Join Date: Aug 2007
Location: Yokohama, Japan
Posts: 2,551
|
It sounds like you need this thread. It will point you at the places where you can learn the basics of CSS, which will help you get to where you need to go. That being said, what do you mean by 'stacked'? |
|
|
|
18-06-2008, 00:02
|
#5 (permalink) |
|
shiro
Join Date: Aug 2007
Location: Yokohama, Japan
Posts: 2,551
|
In retrospect, I think I get what you were going for. Are you trying to layer 3 images? If so, go back to your original code, but give apdiv1 a position of relative instead of absolute. |
|
|
|
18-06-2008, 00:17
|
#6 (permalink) |
|
Registered User
Join Date: May 2008
Posts: 13
|
thank you again haku. I know the basics of css, but I am not familiar with these tags. I have never had any need to use them before. LOL I did what you suggested and it worked like a charm. Bravo and thank you again. Here is the final code I used (for anyone that might need it) <style type="text/css"> <!-- #apDiv1 { position:relative; margin-left: auto; margin-right:auto; width:950px; height:510px; z-index:1; top: 48px; } #apDiv2 { position:absolute; width:200px; height:115px; z-index:1; } #apDiv3 { position:absolute; width:89px; height:315px; z-index:1; left: 193px; top: 59px; } #apDiv4 { position:absolute; width:459px; height:315px; z-index:2; left: 290px; top: 58px; } --> </style> |
|
|
 |
