CSE 154

Lecture 4: Layout

Generic HTML tags: span and div

These tags are for when no other more specific tag applies (like the English words "thing" and "stuff").

Span

A generic inline tag (like <em> or <strong>).

Div

A generic block tag (like <header>, <article>, <section>, <p>, etc.)

CSS Attributes: width and height

Block and inline elements normally have the height of their content

Inline elements have the width of their content

Block elements have a width that stretches across the whole page

width and height Example


            <div class="block"></div>

HTML


            div.block {
              height: 200px;
              width: 200px;
            }

CSS

output

The Box Model

A box: (Inspect me!)

Top neighbor
what's in the booooox?
Bottom neighbor

Wait, what?

margin
(outside) space between different elements
border
(optionally visible) line that separates elements
padding
(inside) space between element content and border
the box model

CSS Properties for Margins

Specified in px, pt, em, rem, % (or ex, or even in in, cm, mm, pc...but don't :)

Property Description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties

CSS Properties for Borders


            h4 { border: 5px solid red; }

CSS

This is a heading.

output

Property Description
border thickness/style/color of border on all 4 sides

Thickness (specified in px, pt, em, or thin, medium, thick)

Style (none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid)

Color (specified as seen previously for text and background colors)

More Border Properties

Property Description
border-color, border-width, border-style specific properties of border on all 4 sides
border-bottom, border-left, border-right, border-top all properties of border on a particular side
border-bottom-color, border-bottom-style,
border-bottom-width, border-left-color,
border-left-style, border-left-width,
border-right-color, border-right-style,
border-right-width, border-top-color,
border-top-style, border-top-width 		properties of border on a particular side
Complete list of border properties

Rounded corners with border-radius 


          p {
            border: 3px solid lightsalmon;
            border-radius: 12px;
            padding: 0.5em;
          }

CSS

This is a paragraph.

This is another paragraph.
It spans multiple lines.

output

Each side's border radius can be set individually, separated by spaces

CSS Properties for Padding

Again, prefer px, pt, em, rem, or % for units

Property Description
padding padding on all 4 sides
padding-bottom padding on bottom side only
padding-left padding on left side only
padding-right padding on right side only
padding-top padding on top side only
Complete list of padding properties

Alignment

text-align
Align inline elements horizontally inside a parent container
vertical-align
Align inline elements vertically relative to the text

Alignment Example (Output on Next Slide)


             div {
               text-align: right;
             }

             img {
               vertical-align: middle;
             }

CSS


              <div>
                <p>
                  This is some text!
                  <img src="../../images/home.png">
                </p>
              </div>

HTML

Output:

This is some text!

output

How to Center Page Elements (Output on Next Slide)


            body {
              text-align: center; /** Doesn't work! */
            }
        
            .block {
              width: 100px;
              height: 100px;
              background-color: #affa
        
              /* Try this instead: */
              /* margin-right: auto; */
              /* marign-left: auto; */
            }

CSS


          <body>
            <div class="block">
          </body>

HTML

Output: (inspect and edit me!)

output

Use margin-right: auto; and margin-left: auto; on the blue block to center.

Confusing Stuff:

text-align-- apply to a parent container to align the inline content within

vertical-align-- apply to inline items (usually those with a height, like an image) to vertically align them relative to other inline elements nearby

margin-left: auto;, margin-right: auto-- use auto margins and a width to center a block element in it's parent

Floating Elements

A way to remove elements from the normal document element flow, usually to get other elements to "wrap" around them

Floating Example

The red block is a non-floating (regular) block element (a div). It's only 100px wide, but since it's a block element, the browser positions it on its own line (spanning the width of the page) 


            <div> (white background)
            <div> (red block)
            <p> (text)

A buncha really long text yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo

Floating Example

Now the red block has the float CSS property set to left. This tells the browser to give the element as much spaces as it needs, and then start bringing the next content up from below and fill in the cracks 


            <div> (white background)
            <div> (red block, floating left)
            <p> (text)

A buncha really long text yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo yaad yo yodyo aoydoyo dyo adya dyo

Positioning Elements

position: fixed
Puts an element at a position within the browser window
position: absolute
Puts an element at an absolute position with respect to either the whole webpage or a parent container

Effects on Parent Containers

position: relative
Makes children positioned relative to the container
position: absolute
Makes children positioned relative to the container

Positioning Example


            #menubar {
              position: absolute; /** fixed */
              left: 400px;
              top: 50px;
            }

CSS


            <div id="menubar">Menu stuff!</div>

HTML

Puts a menu bar on the screen 400px from the left, and 50px down from the top.

display Property

  • inline
  • block
  • none
  • flex

flexbox

A layout library built into CSS -- more on this in this week's lab

Useful for nestling block elements next to each other in rows or columns, and specifying how much space each of the elements should take up

When you set a parent to display: flex, all items inside it become "flex-items"

Use justify-content on the flex container to indicate how to position the flex-items within the container, and flex-direction to say which shape the elements should make (rows or columns)

Use flex-basison the items to specify how much space of the container each thing should take up

How to Layout a Page:

First try box model, text-align, vertical-align

Next try flex boxes. Powerful way to build many different layouts in a page.

Special Use Cases:

Use position: absolute|fixed|relative only when you want complete control over where things go

Use float only when you want to remove an element from the flow, and wrap text around it