4. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
page layout
5. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
page layout
6. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
• <TABLE> WAS PREVIOUSLY USED FOR LAYOUT
• PAINFUL FOR COMPLEX LAYOUT
• TABLES ARE MEANT FOR CONTENT, NOT
LAYOUT
page layout
7. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
• <TABLE> WAS PREVIOUSLY USED FOR LAYOUT
• PAINFUL FOR COMPLEX LAYOUT
• TABLES ARE MEANT FOR CONTENT, NOT
LAYOUT
page layout
8. • LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
• <TABLE> WAS PREVIOUSLY USED FOR LAYOUT
• PAINFUL FOR COMPLEX LAYOUT
• TABLES ARE MEANT FOR CONTENT, NOT
LAYOUT
• THE PREFERRED SOLUTION IS TO DIVIDE A PAGE
INTO A COLLECTION OF <DIV> OR <SECTION>
ELEMENTS
• <DIV ID=“HEADER”> … </DIV>
• <HEADER> … </HEADER>
page layout
10. • CSS USES WHAT IS CALLED A BOX MODEL FOR
SURROUNDING CONTENT.
• MADE UP OF 3 PARTS
• (CONTENT) THIS ISN’T REALLY A PART OF THE MODEL
• PADDING
• BORDER
• MARGIN
the box model
content
padding
border
margin
16. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<link type="text/css" rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>
<header>
<h1>My First Website</h1>
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</nav>
</header>
<main>
<h2>Home Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
</main>
<footer>
<p>webDev@RGU</p>
</footer>
</body>
</html>
Box model
in practice
we are going to style this part
27. • 4 DIFFERENT WAYS THAT WE CAN POSITION AN ELEMENT
• STATIC POSITIONING
• RELATIVE POSITIONING
• FIXED POSITIONING
• ABSOLUTE POSITIONING
Positioning elements
margin
28. 2 paragraphs on the page
<p id=“hasMaxWidth”>Lorem….</p>
<p id=“noMaxWidth”>Lorem….</p>
#noMaxWidth{
width: 1000px;
background-color: burlywood;
}
#hasMaxWidth {
max-width: 1000px;
background-color: burlywood;
}
Max Width
29. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
}
Positioning
30. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
position: static;
}
static positioning
POSITIONED STATIC BY DEFAULT
NOT SHOWN IN ANY SPECIAL WAY
31. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
position: relative;
left: 50px;
}
relative positioning
POSITIONED RELATIVE TO ITS NORMAL POSITIONING
SETTING LEFT RIGHT TOP AND BOTTOM CHANGES ITS POSITION
32. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
position: fixed;
top: 100px;
left: 50px;
}
fixed positioning
FIXED POSITION IN THE WINDOW
CAN BE GOOD FOR HAVING A MENU AT THE TOP ALL THE TIME
33. 2 paragraphs on the page
<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{
background-color: aqua;
}
#positionedText {
background-color: yellowgreen;
position: absolute;
top: 100px;
left: 50px;
}
absolute positioning
FIXED IN THE CONTAINER THAT IT IS CURRENTLY IN
38. • SOMETIMES YOU WILL WANT YOUR CONTENT TO FLOAT
AROUND THE PAGE
• GETTING TEXT TO APPEAR BESIDE AN IMAGE PROPERLY.
• HORIZONTAL MENUS!!!
HERE IS WHERE FLOAT COMES INT
floating elements
margin
39. 2 paragraphs on the page
1 image contained div in-between them
<div id=imageContainer></div>
#imageContainer {
width: 100px;
height: 100px;
background-color: gold;
}
40. 2 paragraphs on the page
1 image contained div in-between them
<div id=imageContainer></div>
#imageContainer {
width: 200px;
height: 200px;
background-color: gold;
float: right;
}
41. What about the
navigation bar!?
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</nav>
43. What about the
navigation bar!?
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
44. What about the
navigation bar!?
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: inline-block;
text-align: center;
padding: 0 10px 10px 10px;
text-decoration: none;
}