| |
| |
 |
|
| |
[Offical] [Quick] [Submit]
Offical Tutorials
Css positioning - Part 1
Written by: Infected
Okay so I'm bored at school in Automation Robotic so I'm posting a tut.
CSS positioning can be extremely confusing at first, btu with time it becomes easier and more helpful. It is especially great for website layouts that change alot. They can also be more reliable than tables. <insert evil glare at tables> Tables I shun you from the internet!
Anyways, first let's create a div with an id in our html:
index.htm
<html>
<head>
<title>CSS positioning tutorial by: Infected</title>
<link rel="stylesheet" href="styletest.css" type="text/css">
</head>
<body>
<div id="test1">This is the content we are going to move around the page!</div>
</body>
</html>
Now that we created the div "test1", lets go start the css file!
styletest.css
body {
background-color: #000000;
font: verdana;
font-size: 12px;
font-color: #FFFFFF;
}
#test1 {
left: 180px;
top: 360px;
}
Okay let's explain this!
the body part of the css document is telling the brwser to apply those effects to anything inside the body tag! so taht means the page background is black and the font is white.
Now to get to test1. # denotes that the next word is an ID. So this means the div "test1". It's telling the browser to place test1 180 pixels from the left side of the browser and 360 pixels from the top of the browser. You could also use bottom to set it a certain amount from the bottom of the browser,a nd right to set it a certain amount of pixels from the right of the browser.
This is it for part one. I'll start on part 2 when I get home in about 3 hours! :D
Contact Author |
|
|
|
|
|
|
