/*========== CS 328 - Week 6 Labs - 1:00 lab - 2016-02-26 ==========*/ /*========== 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 values: * static <-- default * relative * absolute * fixed * inherit * position: static; ...you get the normal flow for block elements * and, NOTE: cannot use offset properties WITH an element whose position is static; ==========*/ /*----- 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; } /*========== let's play with position: relative; a little * if JUST add this to a block element, won't see much difference -- still normal flow * BUT: NOW we have offset properties available to us (for an element with position: relative; ) * top * right * bottom * left * can specify offset FROM top, bottom, left, right [from normal flow?] position: relative; left: 8em; * means: [CSS Positioning 101] the left edge of the relatively-positioned element is 8em FROM the left of where it would have been otherwise ==========*/ /*----- 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: #ee3e64; } /*----- note that using left to shift a relatively-positioned element does NOT affect the elements that follow -----*/ /*========== 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; /* 0 offset from top of document/parent */ left: 0; /* 0 offset from left of document/parent */ width: 10em; height: 5em; background: #b7d84b; } /*========== position: fixed; [positioning 101] "an element with this property shares all of the rules of abolutely positioned element, EXCEPT that the VIEWPORT (browser/device window) positions the fixed element (so, not relative to the document itself) (how you get something that DOESN'T scroll, that always appears -- please use 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; } /*========== and position: inherit; JUST means the element inherits the position value of its parent element ==========*/ /*========== example laying out a form using CSS! (adapted from course text, Chapter 6 example, pp. 225-226) ==========*/ /*========== NOTE - label nuance!! a label element formats DIFFERENTLY based on whether an element is physically nestd within it or not!!! ^ keep this in mind! ==========*/ /*----- let's add a left, right margin to the body -----*/ body { margin-left: 1em; margin-right: 1em; } /*----- let's center this 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 fieldset 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; } /*----- I'd like labels with class="heading" to float to 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 { float: left; width: 7em; text-align: right; margin-right: 1em; } /*----- I want a little spacing at the bottom of each input element (outside their borders, if any) -----*/ input { margin-bottom: 0.5em; } /*----- I want submit buttons to have bold weight and centered -- I am putting them IN a div with this class SO I CAN center this non-block element... (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; */ /* used for debugging! */ width: 5em; margin-left: auto; margin-right: auto; font-weight: bold; } /*----- give JUST the submit button a margin-bottom of 0 (cascading override of bottom margin given earlier to all input elements); also make their background light green at class member request... -----*/ input[type="submit"] { margin-bottom: 0; background-color: lightgreen; } /* end of 328lab06-1.css */