in front of the text if it's too little to wrap and needs pushing down from upper top edge of pic
to make it work in lists.
4) Use my css class .clear to get auto-clearing of floats/text.
Also: I detect followed by div.clear and suppress LF.
5) What do I have to do to suppress the _underscore prefixing text
following the IMG? Seems to have gone with my latest recipe for
auto-clearing: dunno why.
But alt. technique than above (a):
b) -ve margins on the IMG; and a parent element with definite fixed width.
c) Parent has definite ht, width; and position:relative;
img child has position:abs, and fixed top:, left:
d) Actually use 'clip: x';
Inner has position:abs; clip:rect(); top:, left: set.
Outer has position:relative, fixed ht/width.
Can't change rel. scale of img.
e) Outer is div, but set "background: url(file.gif) 50% 50% no-repeat;
width:, height: and it crops it. The 50% is how you delect the
sub-bit you want.
Inner is (not IMG but) , with link if you click;
and fixed ht/width (why?)
and "display:block;"
BUT I think that means no border changing colour? try it.
Scaling? probably by rel. fixed sizes of inner,outer Or can't do it with (e)?
f) use round
and instead of img have div-background
Doesn't do scaling of img.
Click on img works. Border but no color-change with click
FN-crop an IMG (2):
Should redo above after tests.
Should consider sequence in how to tune it manually for each IMG;
and consider what units best in each param: %, px, ...
Should scale underlying pic first, but with % width??
BUT % width in IMG does scale but leaves width undet., so get border
done to full width of window.
TEXT FLOW ROUND PICS, AGAIN
3) Text flow round pics:
To get text flow round an IMG, use either CSS 'float:left' or HTML ALIGN
Can apply CSS to surrounding , or to inside, or to IMG;
but ALIGN only to IMG not .
Need to do it to ALL imgs you want to go left of text.
ALIGN (?not allowed in HTML5)
ADDING TEXT LABELS / LEGENDS to IMGs with surrounding
I want to suppress the application of link/visited colour and underline to the
text, but keep them for the border round the IMG.
HTML
doesn't help.
A wrinkle is that css now won't suppress info on visited that isn't on link.
1) Add a style, via a special class, to the to suppress
underline (text-decoration:) for both links and visited links.
2) Change text color just in a surrounding the legend-text.
style="color:initial;"
==================
ROTATE imgs (or DIVs)
style="-webkit-transform: rotate(90deg);"
FN-bg imgs
'background' is a shortcut CSS property
body,div {
background: url(./Resources/Images/banner.jpeg) no-repeat scroll center top
transparent;
height: 100px;
}
CSS-opacity: (transparency). opacity:0.5; any number 0-1, but must say '1.0'
img:hover{ opacity:1.0; } div { opacity:0.5; }
=============== c) ALIGN (css-float) ============
FN-text flow round an IMG:
0. Still can't get full control i.e. of vertical centering except by putting
in a table (see my flow HTML demo page); though can get table effect by
setting container "display:table;" and inner "display:table-cell"
without
text 2