Scrolling Dividers and CSS
How many times have you fought with that nasty iframe? Have you ever wondered if there was a better way? Well, there is. divs and CSS will be your salvation from the dirty business of tables and iframes. Now, a
lot of you may be getting a little skittish. Don't worry. CSS is a lot easier than you think. Just calm down, sit back, and I'll walk you through it.
Setting up the HTML document
The first thing you need to do is set up your HTML page just like normal. We are going to make one little change in your <head> section. We are going to link to a stylesheet. It's really quite simple. Just put this code into your head section.
<link rel="stylesheet" type="text/css" href="/mystylesheet.css">
Whats that?! We'll I'll break it down. <link> tells the browser we are linking to something. Makes sense no? rel="stylesheet" tells it what we are linking to. In this case a stylesheet. type="text/css" tells the browser what type of stylesheet. Ours is a text based cascading stylesheet. And lastly href="/mystylesheet.css" gives the browser the address of the stylesheet. We are going to call ours mystylesheet.css. Sound good? I thought so.
Adding the div
Ok! We've got our document all set up right? It should look something like this:<html>
<head>
<link rel="stylesheet" type="text/css" href="/mystylesheet.css">
<title>
My div page
</title>
</head>
<body>
Now we are going to add our div to the body section of the page. That's going to go something like this.
<div id="div1">
That's pretty simple right there, no? We just told the browser that everything following this line is going to be inside a div, and that the div's name/id is div1. We'll need the id attribute when we start setting up our stylesheet. Let's put something into it ok? We'll just add some simple text in this tutorial. But anything can go in here, images, tables, even more divs!
<div id="div1">
Hey look! I'm text inside of a div! I wonder what wondrous things the CSS will do to me?
</div>
Ooo, I snuck another tag in there didn't I? That's just the closing tag for the div. It tells the browser that the div is done now and not to include anything past that line in the div. Notice the other thing I snuck in there? Yes, that's right, we're going to make the text inside the div do some cool things too.
Setting up the stylesheet
Ok, we've stretched out HTML muscles a little bit. We should be ready to dive into CSS. Here's what we're going to try and cover: Positioning our div, making our div look sexy, and playing with our text a little bit. We are by no means going to cover everything we can do to this div, we'll just try and scratch the surface some. So on to setting up your stylesheet. It's really easy.#div1 {<br />
position: absolute;<br />
top: 50px;<br />
left: 50px;<br />
}
# lets the browser know that it needs to look for an id. #div1 tells the browser to find the object with an id of div1.
position: defines the type of positioning we'll be using. We're going to use absolute for this tutorial. absolute positioning positions an object relative to its parent's upper left corner. In out case, relative to our browser window. top: and left: move the object down and to the right. Ours will be moved 50 pixels down and to the left. Pretty simple isn't it? Told you CSS was cake. Now, just save this file as mystylesheet.css and load your HTML page. You should see the text "Hey look! I'm text inside of a div! I wonder what
wondrous things the CSS will do to me?" 50 pixels from the top of the page, and 50 pixels from the bottom of the page. But I promised you more.
Adding to the style sheet
Let's set a width for our div ok? How about a height as well. Guess what code we add to our CSS for that.#div1 {
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 50px;
}
Surprising wasn't it? A lot of CSS's tags are no-brainers like this. It makes it a very easy language to learn. What else should we do to out div? You guys want to make it scroll? Sure you do!
#div1 {
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 50px;
overflow: auto;
}
That one is a little trickier. What this does is tell the browser what to do if the stuff inside the div is larger than the specified height and width, when it overflows. Get it? I used auto here because auto will allow it to scroll if it needs to. You can use scroll, but this displays a scroll bar even if it
doesn't need one. Very unattractive.
Spiffing up the text
You know what? We can also change the way text inside our div looks. Lets underline it, and set the font to a nice sans-serif, ok? While we're at it lets turn it blue. Sound like fun? You know it.#div1 {
position: absolute;
top: 50px;<
left: 50px;
height: 200px;
width: 50px;
overflow: auto;
font-family: sans-serif;
text-decoration: underline;
color: blue;
}
Let's break this down. font-family specifies the font. You can give it a font name, like Lucida Sans, or just a family like we've done here. text-decoration tells the browser what sort of decorations to give any text. In this case it will underline it. color is pretty self
explanatory, it turns anything contained within the div a certain color. Blue here.
Wrapping it up
Well, that's all for this tutorial. There are tons of other things you can do with CSS. This just scratched the surface. I hope I've given you an alternative to using outdated frames and tables to lay out your page. And we hope we've inspired you to play around with CSS. One thing's for sure, CSS is defiantly... Good Eats.
The first thing you need to do is set up your HTML page just like normal. We are going to make one little change in your <head> section. We are going to link to a stylesheet. It's really quite simple. Just put this code into your head section.
Adding the div
Ok! We've got our document all set up right? It should look something like this:
Setting up the stylesheet
Ok, we've stretched out HTML muscles a little bit. We should be ready to dive into CSS. Here's what we're going to try and cover: Positioning our div, making our div look sexy, and playing with our text a little bit. We are by no means going to cover everything we can do to this div, we'll just try and scratch the surface some. So on to setting up your stylesheet. It's really easy.
Adding to the style sheet
Let's set a width for our div ok? How about a height as well. Guess what code we add to our CSS for that.
Spiffing up the text
You know what? We can also change the way text inside our div looks. Lets underline it, and set the font to a nice sans-serif, ok? While we're at it lets turn it blue. Sound like fun? You know it.
Wrapping it up
Well, that's all for this tutorial. There are tons of other things you can do with CSS. This just scratched the surface. I hope I've given you an alternative to using outdated frames and tables to lay out your page. And we hope we've inspired you to play around with CSS. One thing's for sure, CSS is defiantly... Good Eats.
