ACF css: Difference between revisions

From Alpine Linux
Line 28: Line 28:
=== Using hide(class) ===
=== Using hide(class) ===
By adding class='hide' to some object, you could hide it.
By adding class='hide' to some object, you could hide it.
=== Using selected(class) ===
This could mark tabs/menus which is selected/current.


=== DIV(s) inside the BODY ===
=== DIV(s) inside the BODY ===

Revision as of 15:43, 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.

Using leader/tailer(class) in every ID

Would it be a good idea to have a leader/tailer class inside every (DIV ID)?

  • leader(class)
  • Main content
  • tailer(class)

The leader/tailer(class) could be used ether to display information or could be used for graphical changes (with the CSS)?!?!

Using hide(class)

By adding class='hide' to some object, you could hide it.

Using selected(class)

This could mark tabs/menus which is selected/current.

DIV(s) inside the BODY

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


Graphical presentation

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