HTML and CSS- Sidebars and Limiting Page Size
4 posters
Page 1 of 1
HTML and CSS- Sidebars and Limiting Page Size
by Gamerz Sun Jan 04, 2009 4:03 am
*** NOTE ***
You must have some prior knowledge of using HTML and CSS together in order for you to fully understand this tutorial.
You must have some prior knowledge of using HTML and CSS together in order for you to fully understand this tutorial.
We've all seen those sidebars that contain links to other areas of the site. Using those sidebars is easy. Creating them... not as much.
We are going to be using the following elements to create the sidebar:
HTML
<div> (Including the id attribute)
CSS
float
margin
width
<div> (Including the id attribute)
CSS
float
margin
width
Now, I'll start by explaining <div>. What this element does, is basically sections off the area of HTML between <div> and </div>. This has no effect on the actual script, except that it puts a linebreak between itself and anything above and below it.
Using <div>, we can give attributes to certain areas of text using CSS. If we want to give a certain area of text a different color, we can use <div> (or <span>. They are both the same, except <span> doesn't create a linebreak) to section off this area of code and give it the text color.
But HOW do we give that <div> it's properties? By using the 'id' attribute (Not to be confused with classes! Classes are the same as id's, but you can give more than one element the same class. An id can only be given to ONE element). You give an element an id like this:
<div id="an_id">
(a class would be like this: <div class="a_class">)
That gives that <div> element an id of the name 'an_id' (remember, ANY element can be given an id or class!). Now, we can use this id in CSS by putting a '#' symbol in front of the id name. For example:
- Code:
#an_id{ // CSS info goes here
}
Here's a full-source example of how this would be used:
- Code:
<html>
<head>
<style type="text/css">
#sidebar{
//No CSS info yet}
</style>
</head>
<body>
<div id="sidebar">
<p>
This is the text for the sidebar
</p>
</div>
</body>
</html>
So, now we know how to create a <div> element, what it does, how to give that element an id, and how to reference that id using CSS. Now, we have to add the CSS elements to make that <div> area a sidebar.
The main CSS element to be used here is 'float'. I could explain how this works, but you would probably just skip over that section anyways. So, I'll just tell you how to use it.
The 3 values for 'float' are: left, right and none (There's NO center!)
Let's start by giving our soon-to-be sidebar the 'float' attribute:
- Code:
<style type="text/css">
#sidebar{
float: right;}
WOAH!.. The text is on the far right now, instead of the left... wow... that's.. really something.. It doesn't look like much, and we could've easily done this with the 'text-align' attribute. But trust me, we'll be evolving this into a sidebar soon enough.
Now, since we have a sidebar, we need some main content. We're going to section that off with a <div> too. There's a reason for that. I'll show you in a minute. Let's just create a <div> for the main content, and give it an id of... well... "main_content".
- Code:
...
<!-- We'll be adding some CSS to the main_content later, but we don't need to right now -->
<body>
<!-- There's a reason that the sidebar is first. When we get the end product, try switching these 2 around. The effects won't be the same. It's probably best to keep the sidebars before the main content -->
<div id="sidebar">
<p>
This is the text for the sidebar.
</p>
</div>
<div id="main_content">
<p>
This is the text for the main content.
</p>
</div>
</body>
...
Before we get on to the creation of the actual sidebar, let's try limiting the page content's size. If you take a look at Yoyogames, no matter how you resize the browser page, the text doesn't adjust to fit the browser size. This is what I mean. We will want to be using this for our sidebar effect (it isn't entirely necessary, but it definitely looks nicer).
To get this effect, we are going to use a combination of the 'width' attribute, the 'margin' attribute, and the <div> element. Firstly, we are going to enclose the entire page within a single <div> element. Let's give this an id of 'all_content'.
- Code:
...
<body>
<div id="all_content">
<div id="sidebar">
...
</div>
<div id="main_content">
...
</div>
</div>
</body>
...
So, we have all of our code encased in a <div> element with an id of 'all_content'. Now, to give this a pre-defined width.
- Code:
...
<style type="text/css">
#sidebar{
float: right;}
#all_content{
width: 800px;}
</style>
...
So, we have our width added. So what's the result?... The sidebar is a bit more near the left, and isn't squished up all the way on the right. So, we have our width set. But we need to center all of this, otherwise it'll look a bit weird. So, this is where the 'margin' attribute comes in. We need to center the element, so that means we need to set the left and right margins of the element according to the width of the browser. We can't do this manually, which is why there is the 'auto' value available for the 'margin' attribute. Let's add it:
- Code:
...
<style type="text/css">
#sidebar{
float: right;}
#all_content{
width: 800px;
margin-left: auto;
margin-right: auto;}
</style>
...
Ah, much better! Everything is centered now. While we're at it, let's add some style to our main_content and sidebar divs, so we can tell them apart.
- Code:
...
<style type="text/css">
#main_content{
background-color: 9e9e9e;}
#sidebar{
float: right;
background-color: 9e9e9e;}
#all_content{
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: bdbdbd;}
</style>
...
Uh oh... apparently those 2 <div>'s are overlapping, we want the background color of 'all_content' to be separating them!
The overlap is being caused by the 'float' attribute given to the sidebar. Normally, the text of one element wraps around the text of the other element, so instead of going over or under the element, it basically goes around the element. 'float' basically makes that element invisible to all other elements, so none of the text (or anything else) wraps around the sidebar.
First off, we want to start by limiting the width of the sidebar. Our problem seems to be that the sidebar is too wide, so lets set the width of the sidebar to... let's say, 200 pixels.
- Code:
...
#sidebar{
float: right;
background-color: 9e9e9e;
width: 200px;}
That helped, but the main_content is still going under the sidebar! Now our main_content is too wide as well. But only on the right, so using 'width' won't work here.
We're going to use the 'margin' attribute again, to stop the main content before it reaches the sidebar. Since the sidebar's width is 200 pixels, let's set the margin to 210 pixels, so we can see a border between the 2, and lets add some breaks in the main_content and the sidebar.
- Code:
...
#main_content{
background-color: 9e9e9e;
margin-right: 210px;}
<!--- Check the tutorial source codes at the end to see the breaks. --->
...
Yes! It's perfect! The sidebar is visibly separated from the main content, and all it took was the use of one element and 3 attributes. Not to mention that the entire page itself looks a bit neater, since all the text isn't continuously scrolling around when the browser is resized.
--------------------------------------------------------------------------------
And there you have it. A complete tutorial on how to make a sidebar. You can do the same thing to make a left sidebar, just change the attribute values a little bit.
Tutorial source-codes: Click me!
Last edited by Gamerz on Tue Jan 06, 2009 7:17 pm; edited 1 time in total
Gamerz- Newbie
- Number of posts : 38
Warning :
Reputation :
Registration date : 2008-11-05
Re: HTML and CSS- Sidebars and Limiting Page Size
by Luke(ADMIN) Sun Jan 04, 2009 11:35 pm
Thanks!
I actually learned something
I actually learned something
Luke(ADMIN)- Admin
-
Number of posts : 838
Age : 30
Location : Right Behind You
Job/hobbies : Hello! I am a programmer/hacker. I play piano and French Horn. I love mountain biking and kayaking.
Warning :
Reputation :
Registration date : 2008-07-17 -
Re: HTML and CSS- Sidebars and Limiting Page Size
by Gamerz Tue Jan 06, 2009 7:11 pm
Glad I could help! Do you think I should do a tutorial for HTML and CSS for beginners? I read the other tutorials here a couple of weeks ago, and didn't understand them. It wasn't until I spent $40 on a book (definately money well spent! I just got the Javascript book from their series) that I finally understood it.
Gamerz- Newbie
- Number of posts : 38
Warning :
Reputation :
Registration date : 2008-11-05
Re: HTML and CSS- Sidebars and Limiting Page Size
by Luke(ADMIN) Tue Jan 06, 2009 10:40 pm
Well, if you understand a lot about either of the languages, I'd say go for it
Luke(ADMIN)- Admin
-
Number of posts : 838
Age : 30
Location : Right Behind You
Job/hobbies : Hello! I am a programmer/hacker. I play piano and French Horn. I love mountain biking and kayaking.
Warning :
Reputation :
Registration date : 2008-07-17 -
Re: HTML and CSS- Sidebars and Limiting Page Size
by Toledo88 Wed Jan 07, 2009 4:23 pm
Actually, I'd really like it if you made a HTML tutorial for beginners. I'd like to know how to could for websites.
Good tutorial by the way,
Good tutorial by the way,
Toledo88- Newbie
-
Number of posts : 60
Age : 29
Location : Somewhere
Job/hobbies : GameMaker, playing games, soccer
Warning :
Reputation :
Registration date : 2008-10-13 -
Re: HTML and CSS- Sidebars and Limiting Page Size
by panneers740 Thu Nov 05, 2009 1:59 am
In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage.
==========================
high speed internet providers
cv template download
==========================
high speed internet providers
cv template download
panneers740- Newbie
- Number of posts : 3
Warning :
Reputation :
Registration date : 2009-11-05
Similar topics» In depth HTML and CSS(Learn it completely)
» Limiting advertising
» Can someone teach me HTML?
» Web Creation Series: Chapter 1- HTML for Dummies
» Convert HTML Files to XML
» Limiting advertising
» Can someone teach me HTML?
» Web Creation Series: Chapter 1- HTML for Dummies
» Convert HTML Files to XML
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|