Block levels

•mai 15, 2009 • Skriv en kommentar

Block-levels bokses: som en paragraf
Line boxes: linje med tekst
Inline-boxes:  ord inne i en linje

Publisert i CSS Box Modell

Same hight on all columns

•mai 15, 2009 • Skriv en kommentar

Bruk bakgrunnsgrafikk!

Følgende legges i <body>
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;.
50% fra venstre side av browservinduet (som resulterer i sentrert bilde) og 0 pixler fra toppen.

http://www.alistapart.com/articles/fauxcolumns/

Publisert i Uncategorized

Syntax

•mai 15, 2009 • Skriv en kommentar 
<style>
background: #f1f2ea url(background.gif) repeat-y 50% 0;

</style>

Publisert i Diverse

The CSS Box Model

•mai 15, 2009 • Skriv en kommentar

Total width = left margin + left border + left padding + width +
right padding + right border + right margin

Total height = top margin + top border + top padding + height +
bottom padding + bottom border + bottom margin

W3C
CSS “tegner” dokumentet som et hierarki av bokser når en side lastes på skjerm eller for print.
Disse boksene inneholder ord, linjer, paragrafer, tabeller med properties som size, color eller font.

Hver boks har et “content area”.
“Content edge” omslutter “content area”.
“Padding area” omslutter “content area”.
“Padding edge” omslutter “padding area”.
“Border area” omslutter “padding edge”.
“Border area” omslutter “padding edge”.
“Border edge” omslutter “border area”.
“Margin area” omslutter “border edge”.
“Margin edge” omslutter “margin area”.

NB: MARGIN (til forskjell fra padding & border) kan ha negativ verdi!

DISPLAY:
inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | <template>| none
(None propertie genererer ingen boks i det hele tatt. Lager altså ingen “usynlig boks”, rett og slett ingen boks i det hele tatt.)
Block-level box: block | list-item | table | template
Inline-level box: inline | inline-block | inline-table | ruby
Et element må være et block element for å sette float, eller overflow

VISIBILETY
visible | hidden |collapse
Visible: den genererte boksen er synlig
Hidden: den genererte boksen er usynlig, men påvirker fortsatt layout (fullverdig transperent).
Collapse: se tabell modul. Dersom benyttet på andre moduler enn rows,  columns, har collapse samme betydning som hidden.

BREDDE/HØYDE
“lengde” | “prosent” | auto

MIN-WIDTH/MAX-WIDTH/MIN-HEIGHT/MAX-HEIGHT
Loremipsum

FLOAT
left | right | none
Denne properties spesifiserer om et element skal flyte til høyre, venstre eller ikke i det hele tatt. Det kan settes for alle elementer, men påvirker kun elementer som ikke er angitt med position:absolute.

http://www.w3.org/TR/css3-box/

Publisert i CSS Box Modell

Floating and clearing

•mai 15, 2009 • Skriv en kommentar

The floated box flyter til høyre eller venstre frem til boxens margin treffer “the padding edge” til “containging block”, eller margen til et annet flytende element.
The “margin edge” til et box element, omslutter boksens marger. Dersom boxen ikke har marger, er “margin edge” det samme som “border edge”.

En “flytende boks” tas ut av flyten til dokumentet, slik at den ikke påvirker block-level boksene rundt.
“Line boxes” plassert rett i nærheten av en flytende boks, vil kuttes for ågjøre plass til den flytende boksen.
En “containing block” vil ikke “expand” i tråd med en arvende boks som flyter, dersom ikke boksen i seg selv også flyter, eller har overflow property satt til noe annet enn “visible”.

  • If the source order is important, and it’s different from the presentational order, and you don’t need a footer on the document, use absolute positioning.
  • If you need a footer, use floats. Source order can be maintained with the help of negative margins and relative positioning, if necessary, albeit with a lot of extra work for IE—especially if the page width is variable.

Publisert i Positioning

z-index

•mai 15, 2009 • Skriv en kommentar

Posisjonerte elementer kan overlappe hverandre, da de kan bli rendred på siden på samme plassering.
Et boks elementet med høyrere z-index plasserers foran et element med lavere z-index. Med andre ord plasseres elementet næremere brukeren som benytter viewport.

Angis med z-index property.
z-index = auto -> Elementet vil ha samme z-index som det foregående elementet.

Publisert i Positioning

The Viewport, the Page Box, and the Canvas

•mai 15, 2009 • Skriv en kommentar

I et medium som pc skjerm, mobil etc vil innholdet i et web dokument vises i en viewport.
Viewport = rektangulært vindu hvor vi kan se deler av dokumentet.

I en “side output” (som utskrift), vil hver side vises som en viewport med samme dimensjoner som “page box” (printdelen av siden, ekskluding sidemarger).

Nettleseren rendrer dokumentet på en “lerret”, som konsekvent, er minst like stort som dokumentet. Dersom viewport er større enn dokumentet, fyller viewport resten av “lerretet”.

Bakgrunnsbilde/farge som er spesifisert som bakgrunn på root elementet, vil gjelde for hele “lerretet”.

Publisert i Diverse

Containing block

•mai 15, 2009 • Skriv en kommentar

Når vi spesifiserer posisjonering og dimensjoner på et “boks-element”, går vi dette opp mot “containing block”.
“Containing block” for root elementet, kalles “initial containing block”, og har samme dimensjoner som viewbort (skjermen eller ark ved utskrift).
“Containing block” for et hvilket som helst annet boks element, bestemmes av verdien gitt i position property til elementet.

Position property static (default) eller relative:
Containing block” elementet formes av rammene til det nærmeste elementet (“the content box”) (=”stamfar”)  “display” property er satt til en av følgende:

  • block
  • inline-block
  • list-item
  • run-in (only in a block formatting context; see Formatting Concepts)
  • table
  • table-cell

Position property absolute
Dersom position er definert som “absolute”, er “containing blcok” sin nærmeste “stamfar”. Den nærmeste “stamfar” med position property definert med en av verdiene absolute, fixed eller relative gir altså føringer for det gjeldende elementet. Det gjeldende elementet “Containing block”, formes av kanter (padding etc) på sin “stamfar”.

Position property fixed
Dersom verdien til “position” er satt til fixed, vil “the containing block” være viewport (continious media) eller page box (for paged media).

Publisert i CSS Box Modell

Positioning

•mai 15, 2009 • Skriv en kommentar

I css2 har hver boks en posisjonering i 3 dimensjoner:
- normal flow (relative positioning)
- floating
- absolute positioning (fixed positioning)

Display = none: er ikke å anbefalle, da de fleste ScreenReaders ikke leser innholdet i et slikt element!

Relative positioning
Et element med relative posisjonering, legges ut som et statisk element. Boksene med denne posisjoneringen skifter da vertikalt (according to top eller bottom property og/eller horisontalt (høyre/venstre)

Properties:
- top
- bottom
- right
- left
- with har verdien auto
(Positiv verdi vil gi en plassering inn mot sentrum, negativ verdi skyver elementet “utover”)

Siden det er kun boksen som flytter på seg når vi relativt posisjonerer et element, er ikke denne posisjoneringen nyttig når vi legger ut kolonner med innhold.
Relativ posisjonering er mest vanlig når vi trenger å bytte en boks et par pixler eller mer, eller i kombinasjon med negative marger eller floating elementer for mer komplekse design.

Absolute positioning
Et absolutt posisjonert element posisjonerer seg relativt til sitt nærmeste “stamfar”.
Element angitt som absolutt posisjonert, er fullstendig fjernet fra dokumentets “flyt”.
Elementet påvirker ikke andre elementer i det hele tatt (slik som en relativ posisjonering vil gjøre).
Elementet påvirker ikke påfølgende elementer i det hele tatt!
Elementet er posisjonert i forhold til sin “containing block”, og etablerer et nytt innholdselement (“containing block”),  for sine neste “barn” og “etterkommere” der properties er satt til absolute.

Properties:
- top
- bottom
- right
- left
- with
- height

Posisjonering og størrelse kan brukes kombinert (nb: støttes ikke i IE6) .
Alternativt kan du spesifisere posisjonering av et hjørne av boksen ved å bruke top eller bottom i kombinasjon med left/right og størrelse på boksen.

Et element posisjonert med “absolute positioning” vil overlappe alle andre elementer, dersom vi ikke gjør rom for elementet på annet vis -> Feks ved å sette margins eller padding på andre elementer.
Dersom flere absolutt posisjonerte elementer opptar samme plassering, vil de bli plassert etter z-index.

Absolute posisjonering gjør det også mulig å plassere elementer utenfor “viewport”. Dette benyttes for å skjule innhold på skjerm/print, mens den fortsatt skal være synlig for screen readers.

Fixed positioning
Fixed positioning er en “subkategori” for absolute positioning.
Et element som er satt til fixed har alltid viewport som sitt “containing block”.
For en pc skjerm feks, vil et element posisjonert som fixed ikke flytte på seg dersom dokumentet scrolles i vinduet.
For “paged media” (utskrift), vil et element repeteres for hver eneste side.

http://reference.sitepoint.com/css/positioning
http://www.alistapart.com/articles/negativemargins/

Publisert i Positioning

Accessibility Heading

•mai 15, 2009 • Skriv en kommentar

Legg “heading” titler på innhold som trenger å fremheves på siten som titler og undertitler.
HEADINGS SKAL BENYTTES FOR Å VISE DOKUMENT STRUKTUR.

- Viktig for bruk av ScreenReaders (tenk gjennom hvordan du øsnker at screen reader skal lese opp innholdet ditt)
- SEO (viktig for søkemotoroptimalisering)
http://www.youtube.com/watch?v=AmUPhEVWu_E

Eks:
Sjekk bruk av h-tagger på følgende sider
- Google
- YouTube (dårlig!)
-http://arstechnica.com/old/content/2004/10/4342.ars

H1: Benyttes for hovedoverskriften: gjerne logo feltet (se google.com).
Etterfulgt av H2 tag, og H3 tag som mindre viktig innhold.

Publisert i Accessibility

« Tidligere Innlegg