blob: 4b7065b2bca2f3c9f03d2317a33f633df441a469 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<html>
<head>
<style>
html, body{
margin: 0;
padding: 0;
}
#header-wrapper{
height: 100px;
background: #86c543;
}
#header-inner{
width: 800px;
background: blue;
margin: 0 auto;
// i will tel you why :)
// there is no tag like text-align or align to center a div like you center text or h1
// then how do you do it ??
// by using the margin tweak :)
}
#content-wrapper{
height: 500px;
background: #ffffff;
}
#footer-wrapper{
height: 300px;
background: #424242;
}
// ok now do me a favour , give the width: 800 to headinner and background blue
// now check browser... stomethhing wrong, nopes, you did not put any content in that div :) now it right??
// no no content-css is innerright :), put some text inside the header-inner mann :)
//copy paster the curreent in your editor and tell me what you see :)
//text became smaller and moved to the corner
// dont worrly about the text where is the blue div ?
//its insidw the green div
// is it centered ?? nop // then make it :)
</style>
</head>
<body>
<!-- now lets give this a little style -->
<div id="header-wrapper">
<div id="header-inner">
This is the head of the page
</div> <!-- /header-inner -->
</div> <!-- /header-wrapper -->
<div id="content-wrapper">
<div id="content-inner">
<p>Hello World</p>
</div> <!-- /content-inner -->
</div> <!-- /content-wrapper -->
<div id="footer-wrapper">
<div id="footer-inner">
</div> <!-- /footer-inner -->
</div> <!-- /footer-wrapper -->
</body>
</html>
|
