Setting the canvas
As you’ll notice in the design, everything on our page is 760px wide or less, and nothing floats outside that width. What we are going to do is create a container for our page that is 760px wide, and centered in the middle of the page. Our 5 main elements will be placed inside this container.
Between the <body> </body> tags, create a <div> with an id=“page-container” attribute:
3 | <div id="page-container"> |
And thats all the HTML we need for our container. Onto the CSS.
Create a new blank text file, and save it as master.css in the /css/ directory.
Create a new rule in the stylesheet to select the page-container:
The # in front of the id tells the browser that we are selecting an id. For a class we would use a . instead eg: .page-container {}.
An id is a unique identifier that we use for things that are only going to occur once on the page. So for headers, footers, navigation, etc we use id's, and for any reccuring elements like links we should use classes, which can occur multiple times on the same page.
We won't be able to see the changes we are making to this <div>, because it is transparent by default. So the first thing we will do is make the background of the div red, to give us a visible indicator of what we are doing:
You should see something like this across the full width of your browser:
First we should set a width of 760px on this div.
Refresh the page in your browser to see the rule being applied.
Next we want to center this div. This is done by setting the margins on it to auto. When the left and right margins are set to auto, they will even each other out and the div will sit in the center of its container.
Now you should have a centered red 760px wide block with “Hello World.” written in it. But its sitting about 8px away from the top/sides of the browser.
This is because the html and body tags have default margins and/or padding on nearly all browsers. So we need to write a CSS rule to reset the margins and padding on the html and body tags to zero. Add this rule to the very top of your css file:
A comma in between CSS selectors stands for “or”, so here the rule will be applied to the html tag or the body tag. Because both exist on the page, it will be applied to both.
Brilliant, now our box is where it should be. Note that as more content is added to this div, it will automatically change its height to fit whatever content is placed inside it.
Lets move on.
0 comments :
Post a Comment
Write some thing Good for us...........
Note: only a member of this blog may post a comment.