Home › Blogs › Proud's blog

Wanted: CSS Help?

May 5, 2013 - 7:25pm — Proud
There was a post earlier about someone asking for the code to get a picture "slightly-on-yet-slightly-not" a box. And I think someone answered it, but I cannot seem to find that post, so I'll just be a derp-Proud and ask for it again.

Thanks for it in advance!
May 5, 2013 - 7:39pm — Unplugged
Unplugged's picture

Silly people deleting their

Silly people deleting their blog posts Sticking out tongue

<img src="IMGHERE" style="position:relative;top:-200px;left:150px;margin-bottom:-150px">

"position:relative" is what allows you to change the image position.
"top" and "left" are how far the picture is moved from its original position from that direction. You can also use "bottom" or "right".
You will probably end up having a lot of empty space where the image's original position was if the image is very large. The negative "margin-bottom" helps you get rid of that. Once again, you can also do this with "margin-top", -left or -right if needed.
May 5, 2013 - 7:42pm — Proud

Thank you so much, Unplugged!

Thank you so much, Unplugged!
May 11, 2013 - 2:50am — Proud

To add to that, I'd like to

To add to that, I'd like to ask for a code for those little boxes that can hold links 'n' such on the side and that stay in place, even when you scroll? (I'm sure there's a better name for them). Can I possible get it so that it can be put on the right?
May 11, 2013 - 2:53am — cabbitlope

I'm going to follow this,

I'm going to follow this, this seems very helpful. Smiling
May 11, 2013 - 12:34pm — Unplugged
Unplugged's picture

Sure! Here's a simple div

Sure! Here's a simple div that would do that:
<div style="position:fixed;top:300px;right:100px;width:80px;height:150px;overflow:auto;background:#ffffff;border:5px solid #000000;z-index:5;"></div>

I think Misako et al use these a lot for navigation in their bios.
The thing that does the magic is "position:fixed".
Once again, top, right, bottom, left coordinates determine the position of the box on the page. Everything else I added is mostly just to pretty the box up.


CSS TANGENT:
"position" is a very useful attribute that is used in css a lot! There are three properties which you usually use. you can use these on any element:

"position:absolute" - the element is positioned relative to the browser page. ("left:20px" moves the element 20px to the left of the left edge) ((this is not true. if the element is within another box that has either "position:relative" or "position:absolute", it will adjust itself relative to that. So for example, if you have a div with relative, and put another div with absolute inside of it, the absolute div will be positioned relative to the relative div, not relative to the page. However, that is generally not the case on the TEFc unless you modify the page.))
"position:relative" - the element is positioned relative to its normal position. ("left:20px" moves the element 20px to the left)
"position:fixed" - works like absolute, but stays on its spot, i.e. is "fixed" on the page, scrolls with it.