TUTORIAL: How to Make a Container

  • D-Studios
  • Novice
  • Novice
  • User avatar
  • Posts: 15

Post 3+ Months Ago

Introduction


By the time you've come to this tutorial:
1)You should know how to create basic HTML webpages.
2)You should know the DIV tag(<div>).
3)You should know how to add an image as a background.

What this tutorial will teach you:
1)How to make a content box with a white background(or any other color).
2)How to make the content box appear in front of the background image.
3)How to add a CSS border.


Step 1


Get to the <head> section. If you do not have a <head> section, please make one.
Note: The <head> section goes between the <html> and <body> tags.

Step 2


While in the <head> section, paste this code:
HTML Code: [ Select ]
 
<style type="text/css">
 
#container{border-style:your-border-style;border-width:your-border-width;background-color:white}
 
</style>
 
  1.  
  2. <style type="text/css">
  3.  
  4. #container{border-style:your-border-style;border-width:your-border-width;background-color:white}
  5.  
  6. </style>
  7.  

You can change "your-border-style" with any of the style names below:

"Dotted"
"Dashed"
"Double"
"Groove"
"Ridge"
"Inset"
"Outset"
*All of them must be lowercase when you input them onto your source code!

You can change "your-border-width" with any number ending with "px".

Step 3


Now you have all of the inputs into the <style>, right? If not, please check that you do. Now we are going to add the <div> around the content with which we want the box around. Here is an example:
HTML Code: [ Select ]
 
<div id="container">
<h>My first container!</h>
<p>My first container paragraph!</p>
</div>
 
  1.  
  2. <div id="container">
  3. <h>My first container!</h>
  4. <p>My first container paragraph!</p>
  5. </div>
  6.  

OK, now you should know how to add the <div>, right? That's all there is to it!

Notices:


To add more containers, change the coding to this:
HTML Code: [ Select ]
 
<style type="text/css">
 
#container{border-style:your-border-style;border-width:your-border-width;background-color:white}
#container2{border-style:your-border-style;border-width:your-border-width;background-color:white}
 
</style>
 
  1.  
  2. <style type="text/css">
  3.  
  4. #container{border-style:your-border-style;border-width:your-border-width;background-color:white}
  5. #container2{border-style:your-border-style;border-width:your-border-width;background-color:white}
  6.  
  7. </style>
  8.  

...and add more #contianer places.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 3 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.