Wednesday, May 6, 2009

Alignment

Okay, for all you coding nuts (like me) out there, I re-learned a thing or two about positioning today, since I was having a challenge trying to properly align the positioning of my in-progress website to the left side of the screen in all resolutions and browsers. Like so:

Quick lesson on "position: absolute"

top: 0% = moves to top of page
top: 50% = moves to middle of page
top: 100% = moves to bottem of page

left: 0% = moves to left of page
left: 50% = moves to center of page
left: 100% = moves to right of page

margin-left: -15px = moves left 15px
margin-left: 15px = moves right 15px

margin-top: 45px = moves down 45px
margin-top: -45px = moves up 45px

It took quite some time, but I finally figured to use the underscore hack: _margin-left:XXpx; in addition to margin-left:XXpx, like so: _top:XXpx; top:XXpx; AND at left:0%; instead of left:50%; + margin-left attributes, which is where all the alignment trouble started.

Also, I learned not to set your layout template as a background image, rather, put it in its own DIV. Textareas also weren't working for me, but now I know you may have to add the textarea class to your codes and edit the properties accordingly.

Also, incase anyone's interested (I was lol), to perfectly center a DIV: set the properties to left:50%; and make the margin-left: -[half the width of your DIV]. That is; the negative of half the width of your DIV.

Thanks, createblog :P

No comments :

Post a Comment

If you have any questions, comments, or feedback, feel free to drop me a line and I'll get back to you asap :)