Embed Size (px)
Citation preview
+
Cascading Style SheetsPositioning for any XHTML container tag (selected by name, class or id)
+The Fundamental Objects
Elements nested within elements = boxes within boxes
Size and position of each element is determined by its enclosing box
+Sizing: width & height
auto • [Number]px • [Number]% p {width:auto;}
Block element box occupies full width of parent box.
p {width:50em;}
Block element box 50 ems wide.
em {width:auto;}
Inline element box takes only what their contents need within the parent.
em {width: 40px;}
Inline element contents will ignore unless positioned, but background and some other box-related attributes won’t.
p {height: 80%;}
Percentages are relative to parent dimensions
+What is Positioning?
Controlling the location of elements (boxes) on the screen
+Default Flow vs. Positioning
Browser-controlled Flow Follow order in which
the elements appear in the code, inserting line breaks before and after blocks
Positioning Make specific
instructions to the contrary
Stone in the stream? Cookie cutter cut-out? Collage?
will be rewarded.<h4>Clean-Up</h4><ol class="level2”><li>Copy (cp, not mv) your project1 directory files (including style sheet) into the <strong>www/imm/project2</strong> directory.</li>
+Float
+Relative
+Absolute
+Simplest: float
Want the element to hug a side with everything else flowing around it?
.pict {float:right;}
float: right; // Aligns element to the right (other elements wrap around it’s left)
left • right
+Simplest: float
Want the element to hug a side with everything else flowing around it?
.pict {float:right; clear:right;}
clear: right; // Don’t display element until right side is “clear” of other floaters
left • right • both
Without clear
declaration
+More Complex: position(with top, right, bottom, left) static: follow default flow within parent
Inline just right of previous element Block just under previous element, width of
parent
relative: position relative to default location (0,0 = normal location) Does not change flow location for later
elements
absolute: position relative to parent location (0,0 = upper-left non-static parent corner)
fixed: position relative to <html> tag location (0,0 = upper-left window corner)
+More Complex: position
.parent { background:#cccc66;position: relative;float:right;width:400px;
}.child {background: #66cccc;
position: absolute;top: 50px;left: 20%;right: 30%;
}
+More Complex: position
.parent { background:#66ccff; /* position: static; relative; */float:right;width:400px;
}
.child {background: #6699cc;/* position: static; relative; absolute; fixed; */top: 50px; //from topleft: 20%; //from leftright: 30%; //from right
}
ss
s or r
rs
a r a rf
No fixed right edge to be relative to
+
Did you see those overlaps?Several elements can stack on top of each other in spaceElements appearing later in the code go on top
+Positioning Effects: Overflow
What happens to a child box within a parent box when the child box is too big?
.parent {overflow:hidden;}
// visible • hidden • scroll hidden
scroll
visible
+Positioning Effects:
Display & Visibility Control if a box displays as a block, inline or not at all
a {display:block;
width:200px;}// block • inline • list-item • none
Make box transparent (same flow).
.ghost {visibility:hidden;}// visible • hidden • collapse
+Positioning - typical layout
<div class=”columnA"> Column A is here.</div>
<div class="columnB"> Column B is here.</div>
Column A is here.
Column B is here.
+Positioning - typical layout
.columnA {width: 45%;}
.columnB {margin-left: 55%;}
Column A is here.
Column B is here.
+Positioning - typical layout
.columnA {width: 45%; float: left; }
.columnB {margin-left: 55%;}
Column A is here.
Column B is here.
+Positioning - getting crazy
<div class="shadow">shadow
<span class="front">front</span>
some stuff <div class="caption">caption</div>
</div>
shadow some stuff
front
caption
+Positioning - getting crazy
.shadow {position: relative;}
.front {position: absolute; top: -10px; left: -10px;}
shadow some stufffront
caption
+Positioning - getting crazy
.shadow {position: relative;}
.front {position: absolute; top: -10px; left: -10px;}
.caption {position: relative; top: -70px;}
shadow some stufffrontcaption
+
Random Useful Stuff
+CSS Pseudo Classes
a.snowman:link {color: blue;
}a.snowman:visited {
color: purple;}a.snowman:active {
color: red;}a.snowman:hover {
text-decoration: none;color: blue;background-color: yellow;
}
Suggested order:
link for an unvisited link.
visited for a link that has already been visited.
active for when a link gains focus (tabbed to or clicked on).
hover for when the cursor is held over a link (not keyboard interactions).
+CSS Properties I’ve known & loved white-space: normal | pre |
nowrap
display: block | compact | inline | list-item | none
max-width: 50em;
min-width: 100px;
text-transform: capitalize;
line-height 1.2;
Also fun… letter-spacing and word-spacing
When I want a truly clean slate for spacing around blocks,
* { padding: 0; margin:0; border: 0;}
If you want set-width content to be centered in container,
margin: 0 auto;
Also, having items belong to more than one class can be handy,
<p class=“disorder minor”>split-personality disorder</p>
+<cite> & <blockquote> elements
<p> Eric Meyer wrote: </p>
<p>
What's so interesting to me is that the guys who decided to focus on the positive went out and did something; those who want to mix in the negative seem to have nothing to offer except complaints.
</p>
<p>An excellent contrast between those who want to build new things and those who want to tear them down.</p>
+<cite> & <blockquote> elements
<p> <cite> Eric Meyer wrote: <cite></p>
<blockquote><p>
What's so interesting to me is that the guys who decided to focus on the positive went out and did something; those who want to mix in the negative seem to have nothing to offer except complaints.
</p></blockquote>
<p>An excellent contrast between those who want to build new things and those who want to tear them down.</p>
+<cite> & <blockquote> elements
<p> <cite> Eric Meyer wrote: <cite></p>
<blockquote cite="http://meyerweb.../social-protocols”><p>
What's so interesting to me is that the guys who decided to focus on the positive went out and did something; those who want to mix in the negative seem to have nothing to offer except complaints.
</p></blockquote>
<p>An excellent contrast between those who want to build new things and those who want to tear them down.</p>
+Conversation in XHTML
<ol><li><cite>Costello</cite><blockquote><p>Well then who's on
first?</p></blockquote></li><li><cite>Abbott</cite><blockquote><p>Yes.</p></blockquote></li><li><cite>Costello</cite><blockquote><p>I mean the fellow's
name.</p></blockquote></li><li><cite>Abbott</cite><blockquote><p>Who.</p></blockquote></li><li><cite>Costello</cite><blockquote><p>The guy on first.</p></blockquote></li><li><cite>Abbott</cite><blockquote><p>Who.</p></blockquote></li></ol>
