ACF css: Difference between revisions

From Alpine Linux
Line 38: Line 38:
=== DIV(s) inside the BODY ===
=== DIV(s) inside the BODY ===
==== header (id) ====
==== header (id) ====
* leader (class)<BR>
  [Skip to main content]<BR>
  [Skip to main content]<BR>
* mid (class)<BR>
  AlpineLinux ''(or maybe hostname)''<BR>
  AlpineLinux ''(or maybe hostname)''<BR>
* trailer (class)<BR>
** ''(empty for now)''<BR>


==== main (id) ====
==== main (id) ====
main.id doesn't have a 'mid(class)' because it holds multiple divs.<BR>
* leader (class)<BR>
** ''(empty for now)''<BR>


===== nav (id) =====
===== nav (id) =====
* leader (class)<BR>
  Navigation (main)<BR>
** ''(empty for now)''<BR>
** (could be heading for the navigation)<BR>
* mid (class)<BR>
  Navigation (main)
* trailer (class)<BR>
  Where we have been<BR>
  Where we have been<BR>


===== subnav (id) =====
===== subnav (id) =====
* leader (class)<BR>
** ''(empty for now)''<BR>
* mid (class)<BR>
  Navigation (subnav)<BR>
  Navigation (subnav)<BR>
* trailer (class)<BR>
** ''(empty for now)''<BR>


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


==== footer (id) ====
==== footer (id) ====
Might be that the footer could go inside the 'content.id'<BR>
* leader (class)<BR>
** ''(empty for now)''<BR>
**  This could be used for graphics
* mid (class)<BR>
  Made with care by webconf
  Made with care by webconf
* trailer (class)<BR>
** ''(empty for now)''<BR>
**  This could be used for graphics


=== Graphical presentation ===
=== Graphical presentation ===

Revision as of 16:11, 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.

Using error(class)

This could mark text/background/whatever so your attention is drawn to this.
Could indicate that you are forced to take some action or change something.

DIV(s) inside the BODY

header (id)

[Skip to main content]
AlpineLinux (or maybe hostname)

main (id)

nav (id)
Navigation (main)
Where we have been
subnav (id)
Navigation (subnav)
content (id)
Main content of the page.
This is where the interesting information is shown.

footer (id)

Made with care by webconf

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)
| \
|  -----------------
\ 
 -------------------