ACF css: Difference between revisions

From Alpine Linux
No edit summary
Line 74: Line 74:


=== Graphic summary of the DIV(s) ===
=== Graphic summary of the DIV(s) ===
   -------------------
   ---------------------
  / page
  / page
  |  -----------------
  |  -------------------
  | / header
  | / header
  | |  ---------------
  | |  -----------------
  | | / leader
  | | / leader (class)
| | \                  [Skip to main content]
| |  -----------------
| |  -----------------
| | / mid (class)
| | \                  AlpineLinux ''(or maybe hostname)''
| |  -----------------
| |  -----------------
| | / trailer (class)
  | | \
  | | \
  | |  ---------------
  | |  -----------------
  | |  ---------------
| \
  | | / mid
|  -------------------
|
|  -------------------
| / main
| |  -----------------
| | / leader (class)
| | \
| |  -----------------
| |  -----------------
| | / nav
| | |  ---------------
| | | / leader (class)
| | | \
| | |  ---------------
| | |  ---------------
| | | / mid (class)
| | | \                Navigation (main) (and its items)
| | |  ---------------
| | |  ---------------
| | | / trailer (class)
| | | \                Where we have been
| | |  ---------------
| | \
| |  -----------------
| |  -----------------
| | / subnav
| | |  ---------------
| | | / leader (class)
| | | \
| | |  ---------------
  | | |  ---------------
  | | | / mid (class)
| | | \                Navigation (subnav) (and its items)
| | |  ---------------
| | |  ---------------
| | | / trailer (class)
| | | \
| | |  ---------------
| | \
| |  -----------------
| |  -----------------
| | / content
| | |  ---------------
| | | / leader (class)
| | | \
| | |  ---------------
| | |  ---------------
| | | / mid (class)
| | | \                Main content of the page.
| | |  ---------------
| | |  ---------------
| | | / trailer (class)
| | | \
| | |  ---------------
| | \
| |  -----------------
| |  -----------------
| | / footer
| | |  ---------------
| | | / leader (class)
| | | \
| | |  ---------------
| | |  ---------------
| | | / mid (class)
| | | \                Made with care by webconf
| | |  ---------------
| | |  ---------------
| | | / trailer (class)
| | | \
| | |  ---------------
  | | \
  | | \
  | |  ---------------
  | |  -----------------
  | |  ---------------
  | |  -----------------
  | | / trailer
  | | / leader (class)
  | | \
  | | \
  | |  ---------------
  | |  -----------------
  | \
  | \  
  | -----------------
  \ -------------------
|
  ---------------------
|
|

Revision as of 14:46, 1 January 2008

Draft

This is just a place where I want to write down some notes on css issues for Alpine.
Don't consider this as a Alpine documentation until/if this heading saids otherwise.

CSS

H1,H2,H3

DL,DT,DD

DIV

  • ID
    • This attribute assigns a name to an element.
    • This name must be unique in a document
  • CLASS
    • This attribute assigns a class name or set of class names to an element.
    • Any number of elements may be assigned the same class name or names.
    • Multiple class names must be separated by white space characters.

header (id)

  • leader (class)
[Skip to main content]
  • mid (class)
AlpineLinux (or maybe hostname)
  • trailer (class)
    • (empty for now)

main (id)

main.id doesn't have a 'mid(class)' because it holds multiple divs.

  • leader (class)
    • (empty for now)

nav (id)

  • leader (class)
    • (empty for now)
    • (could be heading for the navigation)
  • mid (class)
Navigation (main)
  • trailer (class)
Where we have been

subnav (id)

  • leader (class)
    • (empty for now)
  • mid (class)
Navigation (subnav)
  • trailer (class)
    • (empty for now)

content (id)

  • leader (class)
    • (empty for now)
    • (This could be a heading for the content section)
  • mid (class)
Main content of the page.
This is where the interesting information is shown.
  • trailer (class)
    • (empty for now)
  • trailer (class) (trailer for main.id)
    • (empty for now)

footer (id)

Might be that the footer could go inside the 'content.id'

  • leader (class)
    • (empty for now)
    • This could be used for graphics
  • mid (class)
Made with care by webconf
  • trailer (class)
    • (empty for now)
    • This could be used for graphics

Graphic summary of the DIV(s)

 ---------------------
/ page
|  -------------------
| / header
| |  -----------------
| | / leader (class)
| | \                  [Skip to main content] 
| |  -----------------
| |  -----------------
| | / mid (class)
| | \                  AlpineLinux (or maybe hostname)
| |  -----------------
| |  -----------------
| | / trailer (class)
| | \
| |  -----------------
| \
|  -------------------
|
|  -------------------
| / main
| |  -----------------
| | / leader (class)
| | \
| |  -----------------
| |  -----------------
| | / nav
| | |  ---------------
| | | / leader (class)
| | | \
| | |  ---------------
| | |  ---------------
| | | / mid (class)
| | | \                Navigation (main) (and its items)
| | |  --------------- 
| | |  ---------------
| | | / trailer (class)
| | | \                Where we have been
| | |  ---------------
| | \
| |  -----------------
| |  -----------------
| | / subnav
| | |  ---------------
| | | / leader (class)
| | | \
| | |  ---------------
| | |  ---------------
| | | / mid (class)
| | | \                Navigation (subnav) (and its items)
| | |  --------------- 
| | |  ---------------
| | | / trailer (class)
| | | \
| | |  ---------------
| | \
| |  -----------------
| |  -----------------
| | / content
| | |  ---------------
| | | / leader (class)
| | | \
| | |  ---------------
| | |  ---------------
| | | / mid (class)
| | | \                Main content of the page.
| | |  --------------- 
| | |  ---------------
| | | / trailer (class)
| | | \
| | |  ---------------
| | \
| |  -----------------
| |  -----------------
| | / footer
| | |  ---------------
| | | / leader (class)
| | | \
| | |  ---------------
| | |  ---------------
| | | / mid (class)
| | | \                Made with care by webconf
| | |  --------------- 
| | |  ---------------
| | | / trailer (class)
| | | \
| | |  ---------------
| | \
| |  -----------------
| |  -----------------
| | / leader (class)
| | \
| |  -----------------
| \ 
\  -------------------
 ---------------------