Stupid CSS question

August 17, 2012 - 3:54am — BluedeerLegend18

I have a question, how do you get the little boxes on your bio?

Like, I'm tired of just writing out all the character's info on one big page. I really don't like scrolling up and down the page to see everything.

What I mean is like, the little boxes where there's text and you scroll up and down. Or maybe where you have a little box and there's these links (like updates, personality, etc) and you click on them and you're on the same page but the box has different text and everything.

I've tried to figure out how to do this but I'm stupid. Can any of you CSSologists give me the codes on how to make those boxes? And in a way I can understand?

Thanks in advance.

Miscellaneous

BluedeerLegend18's blog
Login to post comments

August 17, 2012 - 4:00am — Aivilo

The regular old scroll boxes

The regular old scroll boxes you're talking about are simple div boxes.
<div style="width:Xpx;height:Ypx;overflow:auto">text</div>
Where "X" and "Y" are a height and a width in pixels. You can do fancier things with it, too, like put in a background image or color, but this is the basic code.
You need to click the "Input Format" thing at the bottom of your blog's editing page and change it from "Filtered HTML" to "BBCode" in order to make it work.

The ones with the links are tabbed div boxes, which Unplugged has the code for here:
http://endlessforest.org/community/node/41058

—

♥

August 17, 2012 - 4:21am — BluedeerLegend18

It ain't working Do I need

It ain't working

Do I need to remove something in the link other then the X and the Y?

—

I have a Master's degree in Wumbology.

August 17, 2012 - 5:13am — Kittyo8

When you post these, look

When you post these, look just above the save button and you'll see 'input format' click there, and select BBcode if it's on 'filtered html' it won't work

—

August 17, 2012 - 5:16am — BluedeerLegend18

I put it on BBcode.

—

I have a Master's degree in Wumbology.

August 17, 2012 - 5:37am — Kittyo8

now paste in the code with

now paste in the code with your dimensions in, e.g. I added a background so you could see it ^^

<div style="width:50px;height:50px;overflow:auto;background-color:#ffffff">text here</div>

—

August 17, 2012 - 6:02am — BluedeerLegend18

Okay thanks! One more

Okay thanks! One more question: How can I put the box right next to another one? What if I wanted a picture and I wanted a box on both sides of the picture? (am I confusing?)

[e]Can I put fancy borders around the boxes to make it look prettier?

—

I have a Master's degree in Wumbology.

August 17, 2012 - 6:20am — Kittyo8

To put one box beside another

To put one box beside another you have to put them in a table together, e.g
You can also use a table to put a picture and a picture beside one another or a music player or whatever.
-and yes you can do borders but I'm not good with those so here's a link where you'll likely find info on that and other the fancy stuff.

<table style="border: hidden">
<tr>
<td>
box one here
</td>
<td>
box two here
</td>
</tr>
</table>

—

The Endless Forest