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


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


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


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.


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?


CSS - Class and ID Selectors


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


9

So the CSS might look something like:

#top {

background-color: #ccc;

padding: 1em

}

.intro {

color: red;

font-weight: bold;

}



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>



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


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


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


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


15

.relative1 {

position: relative;

}

.relative2 {

position: relative;

top: -20px;

left: 20px;

background-color: grey;

width: 500px;

}

CSS Positioning - fixed


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


17

.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 200px;

background-color: yellow;

}

CSS Positioning - absolute


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


19

.relative {

position: relative;

width: 600px;

height: 400px;

}

.absolute {

position: absolute;

top: 120px;

right: 0;

width: 300px;

height: 200px;

}

CSS Positioning - z-index


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.



21

#reddiv{

position:absolute;

left:235px;

top:110px;

width:150px;

height:150px;

background-color:red;

z-index:2

}



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.



23

CSS Positioning - visibility


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


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


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


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.


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...


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!


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.


The Box Model


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.


box-sizing


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;}


Understanding CSS float


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>,


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.


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:



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.



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.


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.


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.


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.


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.


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;

}


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 */

}



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.



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; }



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>



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; }



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.


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.


53

Simple…


54

More complex…


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.


56

cs7026 - trinity college dublin · css - class and id selectors ©nina bresnihan, school of...

Documents