Home
1
Creating Containers Tutorial Sun Apr 24, 2011 2:33 am
Drogba921
Registered Member
Posts : 93
Points : 39
Age : 28
Location : MN
Browser :
| Creating Containers Learn how to create a simple container |
Note: Tutorial Copied from another website I posted it on. Full tutorial written by myself. **Sadly i must use images since i cant use code on this page -.- Hello Users of WebArtz! Today i'm going to show you how to set up Containers using CSS and tags. This is a simple property that can be done using both CSS and HTML, or intertwining the two. In today's tutorial i'm just going to show you how to make one container, but this will make you able to change some things around in it and add some other properties to make it just perfect for your liking.  --- First off, the CSS.
What are each of these tags? Margin - how far into a page something begins, in this case, auto, makes the container centered on the page. Width - This is the width of the container, mine is 1000px, I used it on my old site. You can make this container any size, however I'd recommend having it 960 px, because that's still wide, and not all computers have a 1000px wide screen! Background - This makes it so you can control the background color, this color can be changed to whatever you like, however i'd be careful how you do it, because this might make your eyes hurt if you choose the wrong color. Don't choose something too obnoxious. It's not required to have this tag. Overflow - This means that if anything goes outside of the containers width, it becomes hidden, meaning you will not see it. It's not required to have this tag. Padding - This is the number of Pixels around the edges, if you were to resize your window, 20 px would always stay on the side so that the whole page does not " collapse on itself". --- Now let's integrate the HTML.
This is what you'd put on the page and then write your content between the closing tag. --- How do i put this on a page? Do the following (laid out like a webpage)
Can I put this together? Sure! Just do the following in your DIV Tag.
You can also use a CSS file, and link it. Of course there is more to making a page than this, however you'll have to wait for more tutorials to see!  Until next time, Peace out, --drogba921 |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
