CS7026 - Trinity College Dublin · CSS - Class and ID Selectors ©Nina Bresnihan, School of...
Transcript of CS7026 - Trinity College Dublin · CSS - Class and ID Selectors ©Nina Bresnihan, School of...
CS7026
The div Element and CSS for layout
CSS for Layout
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
2
Having no layout whatsoever is only ok if all you want is
one big column of content – highly unlikely.
We need a way to divide up our content into different
sections and position these sections on our page.
Before we approach solving this problem, we need to be clear on the very important CSS display property.
The display property
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
3
Every element has a default display value depending on
what type of element it is.
The default for most elements is usually inline or
block.
Note: a block element is often called a block-level element.
Inline elements
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
4
Inline elements are those which only occupy the space
bounded by the tags defining the element, instead of
breaking the flow of the content.
The a element is a common inline element.
span is another useful inline element. It allows you to
wrap some text inside a paragraph <span> like this
</span> without disrupting the flow of that paragraph.
Block Level Elements
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
5
A block-level element starts on a new line and stretches
out to the left and right as far as it can.
Some of the block level elements that we have already encountered include <p>, <h1> and <ul>.
The Mighty <div> Element
6
The most important block-level element for layout is the <div> element.
The <div> element is container that divides your page into sections.
You can use it to group other elements in order to apply CSS to more than one element at a time.
Using CSS and the <div> tag, you can place elementsexactly where you want them, without interrupting the flow of your document’s structure.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
The <div> Tag
7
<div>
<h3>Hi, welcome to the div tag.</h3>
<p><img src="mydiv.gif"></p>
<p>All these elements are contained
within a div</p>
</div>
Now we have a way to divide up our content. But how do we go about specifying a different position on the page for each div element?
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
CSS - Class and ID Selectors
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
8
Previously we looked solely at HTML selectors - those that represent an HTML tag.
You can also define your own selectors in the form of Class and ID selectors.
The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID.
In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).
Class and ID Selectors
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
9
So the CSS might look something like:
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
Class and ID Selectors
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
10
The HTML refers to the CSS by using the attributes idand class. It could look something like this:
<div id="top“>
<h1>Chocolate curry</h1>
<p class="intro“>This is my recipe for
making curry purely with chocolate</p>
<p class="intro“>Mmm mm mmmmm</p>
</div>
Class and ID Selectors
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
11
The difference between an ID and a class is that an ID should be used to identify one element, whereas a class can be used to identify more than one.
You can also apply a class or ID selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever } will only be applied to paragraph elements that have the class 'jam'.
So now we have a way of dividing our page into sections (using the div element) and applying different CSS styles to each section by giving each div element a different class or id.
CSS Positioning
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
12
How do we control where each div element appears on
the page?
The position property has a number of possible values:
static
relative
fixed
absolute
CSS Positioning - static
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
13
static is the default value. An element with
position: static; is not positioned in any special
way.
A static element is said to be not positioned and an
element with its position set to anything else is said to be
positioned.
.static {
position: static;
}
CSS Positioning - relative
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
14
relative behaves the same as static unless you add
some extra properties.
Setting the top, right, bottom, and left properties
of a relatively-positioned element will cause it to be
adjusted away from its normal position.
Other content will not be adjusted to fit into any gap left
by the element.
CSS Positioning - relative
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
15
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: grey;
width: 500px;
}
CSS Positioning - fixed
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
16
A fixed element is positioned relative to the viewport,
which means it always stays in the same place even if the
page is scrolled.
As with relative, the top, right, bottom, and
left properties are used.
A fixed element does not leave a gap in the page where
it would normally have been located.
CSS Positioning - fixed
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
17
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: yellow;
}
CSS Positioning - absolute
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
18
absolute behaves like fixed except relative to the
nearest positioned ancestor instead of relative to the
viewport.
If an absolutely-positioned element has no positioned
ancestors, it uses the document body, and still moves
along with page scrolling.
Remember, a "positioned" element is one whose position is anything except static.
CSS Positioning - absolute
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
19
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
CSS Positioning - z-index
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
20
The z-index determines which elements are drawn over others.
Eg., if you have two elements that inhabit the samespace, you need to specify which gets drawn and which is hidden.
The one with the highest z-index number gets placed on top, while the one with the lowest gets placed on the bottom.
CSS Positioning - z-index
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
21
#reddiv{
position:absolute;
left:235px;
top:110px;
width:150px;
height:150px;
background-color:red;
z-index:2
}
CSS Positioning - z-index
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
22
This order is relative to the parent element.
Even if an element has a z-index of a million, if
its parent is at the bottom of the z-index, it
can't rise above it.
CSS Positioning - z-index
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
23
CSS Positioning - visibility
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
24
visibility controls whether or not the element is drawn on the screen.
values are visible and hidden, which are pretty muchself-explanatory.
Like all CSS values these can be dynamically controlled.
CSS Layout – Position Example
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
25
This position stuff might make a little more sense in a
practical example. Below is a realistic page layout.
.container {
position: relative;
}
.navigation{
position: absolute;
left: 0px;
width: 200px;
}
CSS Layout – Position Example
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
26
.content{
/* position is static by default */
margin-left: 200px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
width: 100%;
}
body {
margin-bottom: 120px;
}
CSS Positioning
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
27
Now you can position things on the page, to the exact pixel.
Please remember that people have monitors and browsers that are different sizes than the one you are currently using.
margin: auto;
28
Setting the width of a block-level element will prevent it
from stretching out to the edges of its container to the
left and right.
Then, you can set the left and right margins to auto to
horizontally centre that element within its container.
The element will take up the width you specify, then the
remaining space will be split evenly between the two
margins.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
margin: auto;
29
#main {
width: 600px;
margin: 0 auto;
}
The only problem occurs when the browser window is narrower than the width of your element. The browser resolves this by creating a horizontal scrollbar on the page.
Let's improve the situation...
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
max-width
30
Using max-width instead of width in this situation will improve the browser's handling of small windows.
This is important when making a site usable on mobile.
#main {
max-width: 600px;
margin: 0 auto;
}
Resize the page to check it out!
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
The Box Model
31
While we're talking about width, we should talk about
width's big caveat: the box model.
When you set the width of an element, the element can
actually appear bigger than what you set: the element's
border and padding will stretch out the element beyond
the specified width.
Two elements with the same width value can end up
different sizes as a result.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
The Box Model
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
32
.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}
box-sizing
33
In order to help developers deal with this a new CSS property called box-sizing was created.
When you set box-sizing: border-box; on an
element, the padding and border of that element no
longer increase its width.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
box-sizing
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
34
.simple {
width: 500px;
margin: 20px auto;
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
box-sizing: border-box;
}
Understanding CSS float
35
The CSS float property can also be very important
property for layout.
The float property defines that an element should be
taken out of the normal flow of the document and placed
along the left or right side of its containing block. Text and
inline elements will then wrap around this element.
A CSS float property looks like this:
.right {float: right;}
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Understanding CSS float
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
36
To understand its purpose and origin, we can look to
print design.
In a print layout, images may be set into the page such
that text wraps around them as needed. This is commonly
and appropriately called "text wrap".
What Floats?
37
You can't float every element on a Web page. To get
technical, you can only float block-level elements.
Reminder:
A block-level element always starts on a new line and takes up
the full width available (stretches out to the left and right as far
as it can). Examples of block-level elements: <div>, <h1> -<h6>, <p>, <form>
An inline element does not start on a new line and only takes
up as much width as necessary. Examples of inline elements: <span>, <a>,
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Where Do They Float?
38
You can float elements to the right or the left.
Any element that follows the floated element will flow around the floated element on the other side.
E.g,
If I float an image to the left, any text or other elements following it will flow around it to the right.
If I float an image to the right, any text or other elements following it will flow around it to the left.
An image that is placed in a block of text without any float style applied to it will display as the browser is set to display images. This is usually with the first line of following text displayed at the bottom of the image.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
How Far Will They Float?
39
An element that has been floated will move as far to the
left or right of the container element as it can.
This results in several different situations depending upon
how your code is written.
Let’s look at floating a small <div> to the left:
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
How Far Will They Float?
40
If the floated element does not have a pre-defined width,
it will take up as much horizontal space as required and
available, regardless of the float.
If the container element is the HTML <body>, the
floated div will sit on the left margin of the page.
If the container element is itself contained by something
else, the floated div will sit on the left margin of the
container.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
How Far Will They Float?
41
Floated elements will sit next to each other if there is
room in the container. For example, this container has 3
100px wide divs floated in a 400px wide container.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Turning Off the Float
42
You turn off the float with the CSS clear property. You
can clear left floats, right floats or both:
clear: left; clear: right; clear: both;
Any element that you set the clear property for will
appear below an element that is floated that direction.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Using Floats for Layout
43
Once you understand how the float property works, you
can start using it to lay out your Web pages.
Design the layout (on paper or in a graphics tool).
Determine where the site divisions are going to be.
Determine the widths of the various containers and the
elements within them.
Float everything.
As long as you know the widths (percentages are fine) of
your layout sections, you can use the float property to
put them where they belong on the page.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
What are Floats used for?
44
Aside from the simple example of wrapping text around
images, floats can be used to create entire web layouts.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Clearing the Float for Layout
45
An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.
Here, the sidebar is floated to the right and is shorter than the main content area. The footer then is required to jump up into that available space as is required by the float.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Clearing the Float for Layout
46
To fix this problem, the footer can be cleared to ensure it
stays beneath both floated columns.
#footer {
clear: both;
}
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Starting to Position with CSS
47
1. Set a width on your page by creating a container
You don't have to do this, but most pages are easier to read if you don't assume that everyone will have their browser set to the same settings as your browser.
However, you can also do fluid widths using percentages.
#container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the
sides, coupled with the width, centres the
layout */
}
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Starting to Position with CSS
48
2. Float everything
Once you have your maximum width, then you can float everything on the page, and have it line up.
E.g. if you want your navigation <div> to be at the top of the page, you would make it have a width of 100% and float left. #nav { width: 100%; float: left; }
But if you wanted it to be on the right side, you'd make it a width of less than 100% and float right.
#nav { width: 280px; float: right; }
Then, anything that comes after it would be floated left, and as long as those elements had a smaller width than 680px (960 - 280), they would slide right in to the left of the navigation.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Starting to Position with CSS
49
3. Use floats to create margins
One of the great things about floats is that you can use them
to create margins without using CSS.
E.g., if my navigation is on the right and 240px wide and my
content area is floated left and 700px wide, there will be a
20px margin between the two elements, without any margin
tags at all.
#nav { width: 240px; float: right; }
#content { width: 700px; float: left; }
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Starting to Position with CSS
50
4. Get multiple columns by nesting <div> elements
If you want three columns, you create two divs that float left
and right, and then in the wider div, you create a second set
of two columns that float left and right inside it.
HTML:
<div id="leftside">
<div id="leftcolumn">left column </div>
<div id="centrecolumn">centre column </div>
</div>
<div id="rightside">right column </div>
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Starting to Position with CSS
51
CSS (note that the inner divs have a width of 50% because they
are half of the outer container, which is the "leftside" div:
#leftside { width: 66%; float: left; }
#rightside { width: 33%; float: right; }
#leftcolumn { width: 50%; float: left; }
#centercolumn { width: 50%; float: right; }
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Starting to Position with CSS
52
5. Test in multiple browsers
While this technique works most of the time, some
browsers react strangely to floats.
You may have to play with the widths to get your elements
to show up correctly.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
Assignment Preparation - What is a
sitemap?
A good way to figure out the structure of your site -
basically just an outline or flow-chart of the content your
site needs
A planning tool:
Organize and clarify the content that needs to be on your site
Eliminate unnecessary pages.
Get the overview you need to figure out how your pages
interrelate.
Streamline your users’ path through the site.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
53
Simple…
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
54
More complex…
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
55
Class Activity
Get into groups of 3 or 4 and discuss what you think a
portfolio site should contain.
Construct your site maps and get feedback from your
peers.
Start thinking about the layout of your homepage and
content pages. Where will you put your navigation? How
will your user view your content? Sketch out some ideas
and get feedback from your peers.
©Nina Bresnihan, School of Computer Science & Statistics, TCD 2019
56