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
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 :)