/*==========
    CS 328 - Week 6 Labs - 3:00 lab - 2016-02-26
==========*/

/*==========
    CSS position property - trying again!

    much of the following adapted from 
    "CSS Positioning 101", Noah Stokes,
    http://alistapart.com/article/css-positioning-101
    *   ...and you can find MUCH more on position
        property there!

    recall its 5 possible values:
    *   static  <-- default
    *   relative
    *   absolute
    *   fixed 
    *   inherit

    as mentioned before, with:
    position: static;

    ...such a block element uses normal flow

    (BUT: an element with position: static;
    CANNOT make use of offset properties:
    top, bottom, left, right)
==========*/

/*-----
    for elements with class="box", specify a width,
    height, and background color,
    and use the default position property of static
-----*/

.box
{
    position: static;    /* the default if not specified */
    width: 10em;
    height: 5em;
    background-color: #44accf;
}

/*==========
    position: relative;

    *   if JUST add this to a block element,
        won't see much difference -- still normal flow

    *   BUT - now such an element CAN make use
        of offset properties

        *   top
        *   right
        *   bottom
        *   left

        *   can specify offset FROM top, bottom,
            left, right [from normal flow?]

    position: relative;
    left: 8em;
  
    *   ...now [CSS Positioning 101] the left edge of the 
        relatively-positioned element is 8em FROM the 
        left of where it otherwise would have been
==========*/

/*-----
    for elements with class="box_offset_from_left", 
    specify a width, height, and background color,
    along with a relative position and a left offset 
    of 8em (their left edge should be 8em FROM the
    left of where would be otherwise)

    AFTER-LAB NOTE: try changing left: below to
    top:, bottom:, right: -- and indeed, its
    offset FROM that direction *relative* to
    normal flow DOES change accordingly!
-----*/

.box_offset_from_left
{
    position: relative;
    left: 8em;
    width: 10em;
    height: 5em;
    background-color: #ee3e64;
}

/*==========
    position: absolute;

    *   another way of removing an element from the
        normal flow --
        BUT now the offset properties are offsets
        relative to the document 

    *   and, unlike removing an element from the
        normal flow using the float property --

        where the next element might move up around/beside
        the floated element --

        an element using position: absolute is
        IGNORED by other elements during layout
==========*/

/*-----
    for elements with class="box_corner", 
    specify a width, height, and background color,
    along with a position of absolute,
    a top offset of 0 (offset of 0 from top of document),
    and a left offset of 0 (offset of 0 from left of
    document);

    NOTE that h1 element does NOT float around the div box
    with class="box_corner"

    (make sure you see the differences between
    float property and position property with
    different values)
-----*/

.box_corner
{
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 5em;
    background-color: #b7d84b;
}

/*==========
    position: fixed;

    an element with this position shares the rules
    of an absolutely positioned element, 
    EXCEPT thst the VIEWPORT (browser/device window)
    positions the fixed element (so, not relative
    to the document itself)

    ...you can have something that DOESN'T scroll,
    always appears!

    ...use this for good (e.g., navbars you can't lose)
    not evil!
==========*/

/*-----
    for the element with id="box_fixed",
    specify a background color, 
    along with a position of fixed;
    then the offsets of
    0 from the bottom,
    0 from the left,
    0 from the right
    result in this element spanning the bottom
    of the *window* at all times, 
    even when you scroll up or down through
    the document
-----*/

#box_fixed
{
    position: fixed;
    background-color: yellow;
    bottom: 0;
    left: 0;
    right: 0;
}

/*==========
    position: inherit;

    the element inherits the position value
    of its parent element
==========*/

/*==========
    example of laying out a form with CSS
    (adapted from course text,
    Chapter 6 example, pp. 225-226)
==========*/

/*==========
    label nuance!

    label elements format DIFFERENTLY when an
    element is nested within them,
    versus when they are logically associated
    using a label's for and a control's id
    attributes;

    ^ keep this in mind!
==========*/

/*-----
    I'd like my body to have a bit of a left and
    right margin
-----*/

body
{
    margin-left: 1em;
    margin-right: 1em;
}

/*----- 
    let's center the form
-----*/

form
{
    width: 24em;
    margin-left: auto;
    margin-right: auto;
}

/*----- 
    let's give the fieldset a background color 
-----*/

fieldset
{
    background-color: #ffffcc;
}

/*-----
    I decide to add a border and background color
    to my legend
    ...and some lovely padding
    ...and a bit more bottom margin
-----*/

legend
{
    background-color: white;
    border: thin solid black;
    padding: 0.25em;
    margin-bottom: 0.25em;
}

/*----- 
    add a bottom margin to each input element 
    (remember: outside of their borders, if any)
-----*/

input
{
    margin-bottom: 0.5em;
}

/*----- 
    I'd like to float all my labels that have 
    class="heading" to the left
    ...and have their text aligned right (so right
       edge of "stacked" labels' text aligns)

    ...and have more right margin (so there's a
       nice gap between those right edges
       and their labeled form controls)
----*/

label.heading
{
    width: 7em;
    float: left;
    text-align: right;
    margin-right: 1em;
}

/*-----
    I decide that I want to center submit buttons,
    and I am happening use a div so I can use a
    block-element approach to this

    (interesting -- centers div element, not
    submit button within, of course; had to
    narrow width, debug with a temporary border
    to get div width closer to actual submit button
    width)
-----*/

div.sub_button
{
    /* border: thin solid black;*/ /* for debugging border */
    width: 5em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
}

/*-----
    I decide I don't want a bottom margin on
    submit buttons;

    give JUST the submit button a margin-bottom
    of 0 (cascading override of bottom margin
    given earlier to all input elements)
-----*/

input[type="submit"]
{
    margin-bottom: 0;
}

/* end of 328lab06-2.css */