Download presentation
Presentation is loading. Please wait.
1
Session 4: CSS Positioning
Fall 2006 LIS Web Team
2
Box Model Margin Border Padding Content
3
Normal Flow Left to Right, Top to Bottom
4
Normal Flow Top left of the page = (0,0) Left to Right, Top to Bottom
5
Normal Flow This is a paragraph to which I have set the width.
If the next paragraph fits next to it on the right, it will line up.
6
Normal Flow This is a paragraph to which I have set the width.
However, if the second paragraph is too wide to fit the screen, it will shift down. This is the basic principle of Normal Flow
7
Interrupt the Flow Absolute Relative Float
When you want to do fancier layout, you can position “boxes” or “containers.” By doing this, you interrupt the normal (top to bottom, left to right) flow. You can do this in three ways; Float, Absolute, and Relative. Absolute Relative Float
8
Float HTML CSS This is the normal flow of a document; from top to
bottom, left to right. When you position “boxes,” the you interrupt the normal (top to bottom, left to right) flow. You can do this in three ways; Absolute, Relative, and Float. <p> This is the normal…</p> <p class=“float”>This text is floated right.</p> This text is floated right. CSS .float {float:right;}
9
Absolute HTML This is the normal flow of a document; from top to bottom, left to right. When you position “boxes,” the you interrupt the normal (top to bottom, left to right) flow. You can do this in three ways; Absolute, Relative, and Float. <p> This is the normal…</p> <p class=“abs”>This text is absolutely positioned.</p> This text is absolutely positioned. CSS .abs {position: absolute; top: 40px; left: 80;}
10
Relative HTML This is the normal flow of a document; from top to bottom, left to right. When you position “boxes,” you interrupt the normal (top to bottom, left to right) flow. You can do this in three ways; Absolute, Relative, and Float. <p> This is the normal…</p> <p class=“rel”>This text is relatively positioned.</p> This text is relatively positioned. CSS .rel {position: relative; top: 40px; left: 80;}
11
Links Must be in specific order: LVHA (LoVe, HA!)
a:link { color : blue ;} a:visited { color : purple ;} a:hover { color : purple ;} a:active { color : blue ;}
12
Links CSS HTML a.nav:link { color : pink ;}
a.nav:visited { color : red ;} a.nav:hover { color : yellow ;} a.nav:active { color : yellow ;} HTML <a href=“index.html” class=“nav”>index page</a>
13
CSS images li { list-style-image : url(“pic.jpg”) ; }
body { background-image : url(“pic.jpg”) ; }
14
HTML <html> <head> <title>My Resume</title>
<link href="mlepage.css" rel="stylesheet" type="text/css"> </head> <body> <div id="#container"> Content goes here </div> </body> </html> HTML
15
#container #banner #nav #content #footer
16
HTML <body> <div id="container">
<div id="banner"><img src="pic.jpg" /></div> <div id="nav"> <span><a href="home.htm">home</a></span> <span><a href="contact.htm">contact</a></span> </div> <div id=“content"> <h1>My Resume</h1> <p>Resume text</p> <div id=“footer”>Copyright info here</div> </body> HTML
Similar presentations
