Dynamicdrive galleri på hover
Stu Nichols css gallery

dynamicdrive
listamatic maxdesign

layout

mycelly
intensivstation
changingman

Navigation

dynamicdrive.com/style/csslibrary

HEAD FIRST (X)HTML / CSS

Kapitel 1

Kap.1 , s.4 -5, – Kode <-> Browservisning
Kap.1 , s.12 -15, – Editorer på mac og i windows
Kap.1 , s.21, – At sætte tags rundt om indhold
Kap.1 , s.29->, – <Style> tag, body-selector

Kapitel 2

Kap.2 , s.45->, – <a href=”fil-reference”>Den tekst (eller billede(se Kap 5)) der lænkes </a>
Kap.2 , s.56->, – fil / mappestruktur, referencer, paths

Kapitel 3

Kap.3 , s.79->, – skitse -> omrids -> tags
Kap.3 , s.95->, – Block <-> Inline
Kap.3 , s.103->, – Lists
Kap.3 , s.109->, – Nesting tags
Kap.3 , s.114->, – Entities

Kapitel 4

Kap.4 , s.128->, – Domain
Kap.4 , s.133->, – FTP
Kap.4 , s.139->, – Absolute path
Kap.4 , s.141->, – Default pages
Kap.4 , s.145->, – Intern links, Extern links
Kap.4 , s.149->, – Links, Title attribute
Kap.4 , s.151->, – Anchor tags
Kap.4 , s.157->, – Target _blank

Kapitel 5

Kap.5 , s.167->, – <img>
Kap.5 , s.169->, – jpg <-> gif
Kap.5 , s.177->, – img attributes
Kap.5 , s.183->, – Resize image photoshop /save for web
Kap.5 , s.195->, – Thumbnails
Kap.5 , s.199->, – Photo pages + thumbnail links
Kap.5 , s.205->, – transparent gif

Kapitel 6

Kap.6 , s.226->, – html-history
Kap.6 , s.229->, – Doctype HTML 4 Transitional
Kap.6 , s.234->, – Validator
Kap.6 , s.240->, – <meta> Content type
Kap.6 , s.245->, – Doctype HTML 4 strict
Kap.6 , s.253->, – HTML 4 Guide

Kapitel 7

Kap.7 , s.267->, – Om XML
Kap.7 , s.272->, – XHTML 1 checklist
Kap.7 , s.272->, – Doctype XHTML 1 Strict, namespace – language

Kapitel 8

Kap.8 , s.291->, – <style type=”text/css”> tag
Kap.8 , s.295->, – Komma-separerede selectors
Kap.8 , s.305->, – external stylesheet
Kap.8 , s.319->, – class selector

Kapitel 9

Kap.9 , s.342->, – font properties
Kap.9 , s.351->, – web-fonts list
Kap.9 , s.352->, – css unities
Kap.9 , s.364->, – RGB
Kap.9 , s.367->, – Color names and codes
Kap.9 , s.377->, – Text decoration properties

Kapitel 10

Kap.10 , s.389->, – Line-height property
Kap.10 , s.391->, – Box model
Kap.10 , s.399->, – Class selector
Kap.10 , s.404->, – Background-image property
Kap.10 , s.414->, – Class <-> id
Kap.10 , s.421->, – Multiple stylesheets

Kapitel 11

Kap.11 , s.434->, – <div> + id
Kap.11 , s.444->, – Box width
Kap.11 , s.447->, – text-align property
Kap.11 , s.453->, – Descendant properties
Kap.11 , s.458->, – css shorthands
Kap.11 , s.464->, – <span>
Kap.11 , s.469->, – Pseudo:selectors
Kap.11 , s.475->, – Cascade specification

Kapitel 12

Kap.12 , s.492->, – flow
Kap.12 , s.495->, – float
Kap.12 , s.508->, – Columns: float – margins combination
Kap.12 , s.511->, – clear
Kap.12 , s.517->, – Frozen layout
Kap.12 , s.518->, – Jello layout
Kap.12 , s.520->, – Absolute positioning
Kap.12 , s.535->, – Fixed positioning
Kap.12 , s.539->, – Relative positioning

Kapitel 13

Kap.13 , s.557->, – Table elements -caption, summary
Kap.13 , s.564->, – border-collapse
Kap.13 , s.566->, – Styling alternate rows
Kap.13 , s.568->, – Rowspan (colspan)
Kap.13 , s.573->, – Nested table
Kap.13 , s.578->, – list-style properties

Kapitel 14

Kap.14 , s.592->, – How forms work
Kap.14 , s.596->, – <form action=””>
Kap.14 , s.598->, – form elements
Kap.14 , s.626->, – form in table
Kap.14 , s.630->, – CSS on table

Pseudo selectors og baggrundsbilleder (preload problematik)

Egen test med listemenu og you-are-here | og et andet eksempel her

Tekniken forklaret:
background-image på tomme links – display:block + padding – varierende background-position på a, a:hover, a:active
preload image – 1

Den aller simpleste preload teknik for background-image på links (hover-versionen ligger klar nedenunder) Maratz.com

En super enkel og snedig alle-i-en løsning til links med forskellig id navigation-matrix-reloaded Se den i aktion her

.

Css-alternativ til image-map

Tutorial fra alistapart.com imagemap med hover og css Læs hele artiklen først og se inspirationen her.

fra shepherdweb.com Absolut-positionerede link-id’er, på et bagrundsbillede med en variation der positioneres på :hover fra shepherdweb og her er deres demo

Den flotte tutorial fra alistapart.com – Flere øvelser i samme forklarende artikel – læs den hele!
De færdige eksempler derfra: link1 | link2 | link3

Enkel forklaring fra alsacreations.com Se en variation over det færdige resultat lige her og også ved at klikke her

lidt metode historik ]]> http://curlingthebrackets.com/background-image-tricks/feed/ 0 http://curlingthebrackets.com/css-guf/ http://curlingthebrackets.com/css-guf/#comments Mon, 17 Sep 2007 09:13:44 +0000 admin http://curlingthebrackets.com/?p=85 Links til godbider postes her..

quirksmode.org/css/box.html