Layout with CSS

overview
The Box Model
Positioning Elements
Making A horizontal Menu
Making a 3 column web page

• LAYOUT OF MAJOR ELEMENTS OF A PAGE IS
CONTROLLED USING CSS
• HEADER, NAVIGATION BARS, SIDEBARS,
CONTENT AND FOOTERS
page layout

CONTENT AND FOOTERS
• <TABLE> WAS PREVIOUSLY USED FOR LAYOUT
• PAINFUL FOR COMPLEX LAYOUT
• TABLES ARE MEANT FOR CONTENT, NOT
LAYOUT
page layout

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

• 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

CONTENT
PADDING
BORDER
MARGIN
the box model
THE CONTENT OF THE BOX,
WHERE TEXT AND IMAGES
APPEAR

CONTENT
PADDING
BORDER
MARGIN
the box model
CLEARS AN AREA AROUND
THE CONTENT. THE PADDING
IS TRANSPARENT

CONTENT
PADDING
BORDER
MARGIN
the box model
A BORDER THAT GOES
AROUND THE PADDING AND
CONTENT

CONTENT
PADDING
BORDER
MARGIN
the box model
CLEARS AN AREA OUTSIDE
THE BORDER. THE MARGIN IS
TRANSPARENT

box model properties
width
height

<!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 ofﬁcia 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

header 
{ 
/* Colourings */ 
background-color: cornﬂowerblue; 
}

header { 
/* Colourings */ 
 
/* Content */ 
height: 200px; 
width: 300px; 
}

header { 
/* Colourings */ 
 
/* Content */ 
height: 200px; 
width: 300px; 
 
/* Padding */ 
padding-left: 30px; 
padding-top: 10px; 
}

header { 
/* Colourings */ 
 
/* Content */ 
height: 200px; 
width: 300px; 
 
/* Padding */ 
 
/* Border */ 
border-color: darkorchid; 
border-style: solid; 
border-width: 5px; 
}

header { 
/* Colourings */ 
 
/* Content */ 
height: 200px; 
width: 300px; 
 
/* Padding */ 
 
/* Border */ 
 
/* Padding */ 
margin-top: 30px; 
margin-bottom: 10px; 
}

header { 
/* Colourings */ 
 
/* Content */ 
height: 200px; 
width: 300px; 
 
/* Padding */ 
 
/* Border */ 
 
/* Padding */ 
margin-top: 30px; 
margin-bottom: 10px; 
margin-left: auto; 
margin-right: auto; 
}

width
height
border-bottompadding-bottom
border-left
padding-left
border-right
padding-right
border-toppadding-top

width
height
border-bottompadding-bottom
border-left
padding-left
border-right
padding-right
border-toppadding-top
margin-bottom
margin-top
margin-right
margin-left

• 4 DIFFERENT WAYS THAT WE CAN POSITION AN ELEMENT
• STATIC POSITIONING
• RELATIVE POSITIONING
• FIXED POSITIONING
• ABSOLUTE POSITIONING
Positioning elements
margin

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

<p id=“standardText”>Lorem….</p>
<p id=“positionedText”>Lorem….</p>
#standardText{ 
background-color: aqua; 
} 
 
#positionedText { 
background-color: yellowgreen; 
}
Positioning

#standardText{ 
} 
 
position: static; 
}
static positioning
POSITIONED STATIC BY DEFAULT
NOT SHOWN IN ANY SPECIAL WAY

#standardText{ 
} 
 
position: relative; 
left: 50px; 
}
relative positioning
POSITIONED RELATIVE TO ITS NORMAL POSITIONING
SETTING LEFT RIGHT TOP AND BOTTOM CHANGES ITS POSITION

#standardText{ 
} 
 
position: ﬁxed; 
top: 100px; 
left: 50px; 
}
fixed positioning
FIXED POSITION IN THE WINDOW
CAN BE GOOD FOR HAVING A MENU AT THE TOP ALL THE TIME

#standardText{ 
} 
 
position: absolute; 
top: 100px; 
left: 50px; 
}
absolute positioning
FIXED IN THE CONTAINER THAT IT IS CURRENTLY IN

absolute
positioning
fixed
Positioning

• 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

1 image contained div in-between them
<div id=imageContainer></div>
#imageContainer { 
width: 100px; 
height: 100px; 
background-color: gold; 
}

1 image contained div in-between them
<div id=imageContainer></div>
#imageContainer { 
width: 200px; 
height: 200px; 
background-color: gold; 
ﬂoat: right; 
}

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>

What about the
navigation bar!?
ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
}

What about the
navigation bar!?
ul { 
margin: 0; 
padding: 0; 
} 
 
li { 
ﬂoat: left; 
}

What about the
navigation bar!?
ul { 
margin: 0; 
padding: 0; 
} 
 
li { 
ﬂoat: left; 
} 
 
li a { 
display: inline-block; 
text-align: center; 
padding: 0 10px 10px 10px; 
text-decoration: none; 
}

• THIS TAKES A LOT OF THE THINGS THAT WE HAVE ALREADY
LOOKED AT AND PUTS THEM INTO PRACTICE
3 column webpage
margin

<main> 
<h2>Home Page</h2> 
 
<section id="col1"> 
<p>Lorem .…</p> 
</section> 
<p>Lorem.…</p> 
</section> 
<p>Lorem…</p> 
</section> 
 
</main>
html

#col1{ 
background-color: green; 
} 
 
#col2{ 
background-color: red; 
} 
 
#col3{ 
background-color: blue; 
}
css

#col1{ 
width:33% 
} 
 
#col2{ 
width:33% 
} 
 
#col3{ 
width:33% 
}
css - set the width

#col1{ 
width:33%; 
ﬂoat: left; 
} 
 
#col2{ 
width:33%; 
} 
 
#col3{ 
width:33%; 
}
float col1 to the left

#col1{ 
width:33%; 
ﬂoat: left; 
} 
 
#col2{ 
width:33%; 
} 
 
#col3{ 
width:33%;
ﬂoat: right; 
}
float col3 to the right

#col1{ 
width:33%; 
ﬂoat: left; 
} 
 
#col2{ 
width:33%;
} 
 
#col3{ 
width:33%;
ﬂoat: right; 
}
display col2 as inline-block

#col1{ 
width:31%; 
ﬂoat: left; 
margin: 1%; 
} 
 
#col2{ 
width:31%; 
margin: 1%; 
} 
 
#col3{ 
width:31%; 
ﬂoat: right; 
margin: 1%; 
}
adding a margin for pretty-ness

#col1{ 
width:29%; 
ﬂoat: left; 
margin: 1%; 
padding: 1%; 
} 
 
#col2{ 
width:30%; 
margin: 1%; 
padding: 1%; 
 
} 
 
#col3{ 
width:29%; 
ﬂoat: right; 
margin: 1%; 
padding: 1%; 
 
} 
 
footer{ 
clear: both; 
} and some padding

STOPthis is getting complicated…there
must be an easier way to do layouts!?

next time we are going to look at
using some tools that can help us a
lot in making layouts
(and also making our life a lot easier!)

recap
purpose of css
syntax of css
benefits of css
APPLYING CSS
USING CSS WITH HTML
ID AND CLASS SELECTORS
PAGE LAYOUT
BOX MODEL

Layout with CSS

More Related Content

What's hot

Viewers also liked

Similar to Layout with CSS

More from Mike Crabb

Recently uploaded

Layout with CSS