Note: This was a tutorial I posted on Facebook Wednesday, May 19, 2010
-------------------------------------------------------------------------------
<DANALBERTO> Art, Logo & Web Design
...hey guys I'm just posting things here to kill the time
Background :redface:
Have you ever heard about CSS (Cascading Style Sheets )? It is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language (<>). Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML documents, etc. Something important designing websites is to centralize objects horizontally and vertically respect the window or another object.
Problem
So, we are going to centralize a div (the <div> tag defines a division or a section in an HTML document) within the browser's window. Nowadays, this is important because web designers are not using tables (align="center", this was really easy but presented cross browsing problems [not the same results browser to browser]) to define markup presentation anymore. Actually, the using of tables for the markup presentation is cataloged as mal-practice and since the use of divs for that purpose, tables have other implementations.
Solution8)
1. Open your notepad.
2. Write:
<html>
<head>
<title>DIV Centering Test</title>
</head>
<body>
<div>This is a test</div>
</body>
</html>
A blank page
The html tag says the browser that the code you are writing represents an HTML document. The head tag is a container for all the head elements (LOL). Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The title tag modify the title of the browser's window, the one you see at its the left top corner. The body tag defines the document's body (LOL again) and it contains all the contents of an HTML document, such as text, hyperlinks, images, etc. Note that all the tags start with "<" symbol and end with ">" symbol. This is to differentiate what is part of the code and what is not. Also note that every tag has a second one but with the "/" included. This is to let the browser know that x tag ended.
A title example: "Facebook | Write a Note"
3. Define the CSS for the markup presentation (within the head tag):
<html>
<head>
<title>DIV Centering Test</title>
<style type="text/css">
body{
background-color: #000;
}
.divBox{
position:absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -9.1em;
margin-left: -9.1em;
background: #fff;
color: #999;
font-size: 11px;
text-align: center;
}
</style>
</head>
<body>
<div>This is a test</div>
</body>
</html>
Schema of the CSS parse:
<html>
<head>
<title>DIV Centering Test</title>
<style type="text/css">
body{
background-color: #000;
}
.divBox{
position:absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -9.1em;
margin-left: -9.1em;
background: #fff;
color: #999;
font-size: 11px;
text-align: center;
}
</style>
</head>
<body>
<div class="divBox">This is a test</div>
</body>
</html>
5. Save your work and after the file's title write ".html" to convert it to an HTML document.
Remember to write .html after the name of your file.
6. Open the HTML document in your favorite Internet Browser!
Founder of <DANALBERTO> Art, Logo & Web Design. I am a Puerto Rico based freelancer designer of art, logo and websites. My main goals are designing logos, photo retouching, urban art, and CSS websites.
dandelarosa@danalberto.co.cc
-------------------------------------------------------------------------------
<DANALBERTO> Art, Logo & Web Design
...hey guys I'm just posting things here to kill the time
Background :redface:
Have you ever heard about CSS (Cascading Style Sheets )? It is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language (<>). Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML documents, etc. Something important designing websites is to centralize objects horizontally and vertically respect the window or another object.
Problem
So, we are going to centralize a div (the <div> tag defines a division or a section in an HTML document) within the browser's window. Nowadays, this is important because web designers are not using tables (align="center", this was really easy but presented cross browsing problems [not the same results browser to browser]) to define markup presentation anymore. Actually, the using of tables for the markup presentation is cataloged as mal-practice and since the use of divs for that purpose, tables have other implementations.
Solution8)
1. Open your notepad.
2. Write:
<html>
<head>
<title>DIV Centering Test</title>
</head>
<body>
<div>This is a test</div>
</body>
</html>
A blank page
The html tag says the browser that the code you are writing represents an HTML document. The head tag is a container for all the head elements (LOL). Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The title tag modify the title of the browser's window, the one you see at its the left top corner. The body tag defines the document's body (LOL again) and it contains all the contents of an HTML document, such as text, hyperlinks, images, etc. Note that all the tags start with "<" symbol and end with ">" symbol. This is to differentiate what is part of the code and what is not. Also note that every tag has a second one but with the "/" included. This is to let the browser know that x tag ended.
A title example: "Facebook | Write a Note"
3. Define the CSS for the markup presentation (within the head tag):
<html>
<head>
<title>DIV Centering Test</title>
<style type="text/css">
body{
background-color: #000;
}
.divBox{
position:absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -9.1em;
margin-left: -9.1em;
background: #fff;
color: #999;
font-size: 11px;
text-align: center;
}
</style>
</head>
<body>
<div>This is a test</div>
</body>
</html>
Schema of the CSS parse:
- Override:
selectorName{
porperty: value;
} - Classes:
.variableName (selector){
porperty: value;
} - IDs:
#variableName (selector){
porperty: value;
}
- position: absolute;
Generates an absolutely positioned element, relative to the first parent element that has a position other than static, in this case the whole window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The possible values are absolute, fixed, relative, static and inherit. - top: 50%; & left: 50%;
Sets the top and left margin edges for the div. Note that the values are in percentage units. This means that the box top left corner is strictly centralized respect the browser's window. The possible values are auto, inherit, length (in pixels, pt, em, etc.) and %.
divBox top left corner centralized
- margin-top: -9.1em; margin-left: -9.1em;
And here we go, these are the guys that make the centering happens. The margin clears an area around the div (outside its border) and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. Also a shorthand margin property can also be used, to change all margins at once. Note that the values are in em units and negatives to pull the box to the center. This means that these values depend directly of the box's width and height. The possible values are auto, inherit, length (in pixels, pt, em, etc.) and %.
divBox centralized
- background: #fff; color: #999;
These properties control the div background (white) color and its text color (variation of grey). The possible values are in hexadecimal, word (black, yellow, red, etc.). - font-size: 11px; text-align: center;
These properties control the font size and text align of the div. The possible values for the font-size property are xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length (in pixels, pt, em, etc.), % and inherit. The possible values for the text-align property are left, right, center, justify and inherit. - width: 200px; height: 200px;
Obviously these are the properties for the width and height of the div. The possible values are auto, length (in pixels, pt, em, etc.), % and inherit.
<html>
<head>
<title>DIV Centering Test</title>
<style type="text/css">
body{
background-color: #000;
}
.divBox{
position:absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -9.1em;
margin-left: -9.1em;
background: #fff;
color: #999;
font-size: 11px;
text-align: center;
}
</style>
</head>
<body>
<div class="divBox">This is a test</div>
</body>
</html>
5. Save your work and after the file's title write ".html" to convert it to an HTML document.
Remember to write .html after the name of your file.
6. Open the HTML document in your favorite Internet Browser!
Founder of <DANALBERTO> Art, Logo & Web Design. I am a Puerto Rico based freelancer designer of art, logo and websites. My main goals are designing logos, photo retouching, urban art, and CSS websites.
dandelarosa@danalberto.co.cc