8.#posi(oning#with#css# - university of birmingham · reminders#&#no(ces# •...
Post on 03-Aug-2020
2 Views
Preview:
TRANSCRIPT
8. Posi(oning with CSS
Dr. Dave Parker
Informa(on and the Web, 2013/14
1
Reminders & No(ces • Individual assignment 1 (XML & DTDs)
– results, feedback soon
• Individual assignment 2 (XHTML & CSS) – out now, due: 11.59am Fri 21 Feb
• Remember to look at: – exercise 3 (XHTML/CSS) + exercise 4 (CSS posi(oning)
• Ques(ons?
2
A few quick notes on CSS • Embedding a CSS style sheet in (X)HTML
– <style type="text/css"> … </style>
• Comments in CSS – /* bla bla */ -‐ like in Java (but not // bla bla) – and not <!-‐-‐ bla bla -‐-‐> like in (X)HTML
• Valida(on of CSS – hgp://jigsaw.w3.org/css-‐validator/ – for the assessment, any level of CSS is fine
3
Today • So far:
– CSS basics, selectors, styling, colours, fonts, …
• Today: layout & posi(oning with CSS – document flow – the box model – floats & posi(oning – debugging CSS
4
Block vs inline • Block-‐level vs inline elements
– <div> -‐ custom block-‐level element – <span> -‐ custom inline element
• The display property – display:block – forces an element to display as a block – display:inline – forces an element to display as inline – display:none – hides an element
5
Document flow • Default web document layout:
• Block-‐level elements – width: use all available space (width:auto) – height: expand to contain contents (height:auto) – laid out ver(cally, top to bogom (regardless of width)
• Inline elements – size: expand to contain contents – laid out horizontally, len to right, line breaks where needed
– len-‐aligned, bogom aligned by default
6
The CSS box model
7
From: http://www.w3.org/TR/CSS2/box.html
height computed height
width
computed width
The CSS box model • Size/appearance of (block-‐level) elements
– proper(es: width, height, margin, padding, border – computed width = margin + border + padding + width – computed height = margin + border + padding + height
• Size (width/height): – can be absolute (e.g. px) – … or rela(ve (with respect to parent element) – e.g. img.portrait { width:100px; height:100px; } – e.g. div#mainpage { width:90%; }
8
Box model: margins • Margin
– e.g. p { margin:5px; } – e.g. p { margin-‐top:5px; margin-‐right:10px;
margin-‐bogom:5px; margin-‐len:10px; } – e.g. p { margin:5px 10px 5px 10px; } (shorthand: T, R, B, L)
– e.g. p { margin:5px 10px; } (shorthand: T/B, L/R)
• Note: – margins can be nega(ve – top-‐bogom margins are collapsed (except lists/headings) – can set len/right margins for inline elements too
9
Equivalent
Box model: padding + borders • Padding
– same nota(on as margins – e.g. p { padding:0 5px 0 5px; }
• Borders – e.g. p { border:1px solid black; } – e.g. p { border-‐width:1px;
border-‐style:solid; border-‐color:black; }
– also individual proper(es: • border-‐top, border-‐right, … • border-‐len-‐width, …
10
Floats • Use property float to, e.g., wrap text round an image
– float: len | right | none;
• Example – <img class="portrait" src="pic.png" alt="Portrait"/> <p>A paragraph of text…</p>
– img.portrait { float:len; }
• Also useful: – clear: len | right | both;
11
Posi(oning • Four main types of posi(oning
– posi(on: sta(c | rela(ve | absolute | fixed;
• Sta(c – default: elements follow normal document flow – (blocks ver(cally, inline horizontally, …)
• Rela(ve – elements laid out, then moved some offset from posi(on – proper(es: top/bogom, len/right – (specifies edge to shin from)
12
Posi(oning… • Absolute
– element removed from document flow and reposi(oned – rela(ve to first parent element with non-‐sta(c posi(on – (set a parent element to posi(on:rela(ve to use that one) – proper(es: top, bogom, len, right, width, height
• Fixed – absolute posi(oning, rela(ve to whole browser window – (even if page is scrolled)
13
Summary • Layout & posi(oning with CSS
– document flow – the box model – floats & posi(oning – debugging CSS
• Next (me – JavaScript
14
top related