CSS 2

CSS 2 – Moving Stuff Around

Previous Tutorial: Getting Started



Ok, so now you know about DIV tags, STYLE information, and about boxes within other boxes.

That’s a really solid foundation… but it’s kinda boring. How do we move stuff around, use graphics, and start making the page LOOK the way we want it to look?


Quick Intro To Images

You may be used to how Obsidian Portal does images. You upload them, click them, and it puts code down in between exclamation points on your wiki page. It looks something like this:

!http://cdn.obsidianportal.com/assets/90681/ClannLir.jpg(Clann lir)!

Did you know you could do this? (paste it to your test page)

[[Conor Webisode 6|!http://cdn.obsidianportal.com/assets/90681/ClannLir.jpg(Clann lir)!]]

You can make your wiki link a graphic instead of just plain text!

However, for almost ALL of our CSS stuff, we can’t use the WIKI image stuff, we need more control. What you need is the URL of the image (which you can get by clicking it in your image library) and then remove the exclamation points and name inside the parenthesis.

The Image URL
http://cdn.obsidianportal.com/assets/90681/ClannLir.jpg

A regular HTML/CSS style Image tag looks like this.
<img src="http://cdn.obsidianportal.com/assets/90681/ClannLir.jpg">

You can also add Style information to images. The most common is to change the size.

<img style="height:50px;width:100px;" src="http://cdn.obsidianportal.com/assets/90681/ClannLir.jpg">

Explanation:

  • height & width = These are pretty obvious I should think. The original image was 256px tall and wide. By making it half as tall as I am wide, I’m morphing it. If you know your image is square or you want to keep its aspect ratio the same, you only need one of these. I prefer height.
  • float = It’s not on my example but “float:right;” and “float;left;” are super super common stylings to add to images to move them all the way to the right or left side of the box and have the text flow around them. VERY HANDY

You can use the IMG tag to link back to your WIKI pages too!

[[Conor Webisode 6|<img style="height:50px;width:100px;" src="http://cdn.obsidianportal.com/assets/90681/ClannLir.jpg">]]


Normal (Relative) Positioning

When it comes to CSS here on Obsidian Portal, the hokey pokey isn’t what it’s all about… it’s being able to move boxes containing text and images around on the page.

Cut and paste this code into your test page and we’ll discuss it.

<div class="overallOPStyleGreyBox" style="position:relative;border-color:#404040;border-style:solid;border-width:6px;padding:6px;background-color:#202020;border-radius:6px;color:white;text-align:center;">
I am text in the grey box, white and centered
<div class="overallAccentBox" style="position:relative;background-color:wheat;padding:10px;border-color:brown;border-style:solid;border-width:2px;background-image:url(https://lh3.googleusercontent.com/-zPlSF0rWv-E/TnBSjCfmJ6I/AAAAAAAAHmo/JzCDhxM2I-g/s800/DresdenTile.jpg);color:black;text-align:left;">
I am text in the new box, black and left justified
<img style="position:relative;width:100px;" src="http://cdn.obsidianportal.com/assets/90681/ClannLir.jpg">
<div class="whiteBox" style="position:relative;padding:6px;border-style:solid;border-color:black;border-width:2px;background-color:white;border-radius:6px;color:black;width:300px;">
I am in the white box
</div>
</div></div>

On your test page is basically everything we’ve played with up to this point.

Now, in the style tag for the image, add “top:75px;” and in the style tag for the white box add “left:300px;”

See how you’ve begun moving things around on the page?

By using “position:relative;” “top:??px;” and “left:??px;” the DIV boxes are now yours to control. You can also enter NEGATIVE values to move boxes outside of the borders that they normally reside within. You can move them all around the page this way.

Quick Warning: I strongly suggest you throw your images inside DIV boxes if you’re going to move them around and style the DIV box, not the image. The only thing you should be styling with images is size. It’s a much better habit to get into. That way if you want to turn your image into a link… you don’t have to worry about something breaking with your CSS.

<div class="imageWrapper" style="position:relative;top:75px;">[[Conor Webisode 6|<img style="width:100px;" src="http://cdn.obsidianportal.com/assets/90681/ClannLir.jpg">]]</div>

Actually “throwing things inside of DIV tags” if you want to move them around is pretty much THE best way to go about it. For example, add this.

<div class="textHeader" style="position:relative;top:-200px;left:300px;color:brown;font-size:xx-large;">HEADER</div>


Absolute Positioning

Relative positioning (what we’ve been doing up to now) means that the boxes move around as you add more div tags in front of it. Absolute positioning means “No really, I’m telling you where you are going to be inside this box. You sit there and stay there.”

Add this header alongside the other “relative” one:

<div class="textHeader" style="position:absolute;top:10px;left:300px;color:brown;font-size:xx-large;">ABS HEADER</div>

As you add text, move images around, add carriage returns, or whatever. The absolute header will stay where you put it inside its containing box no matter what.



Next Tutorial: Putting it all together