Copy and paste this in your Blog or Web page.
It will look like this.
Don't fight the browser...
We like to go with the flow of the browser and not fight it. We don't trick it or add any hacks. The text lands where the browser tells it to land and we help the browser by telling it explicitly how big we want the text and where we want to place it. Mozilla thanks us, IE thanks us, Opera sometimes ignore us but we all get along well enough to play together.
CSS Box
Copy and paste this in your Blog or Web page.
It will look like this.
Everything in CSS is box. We can add a border to the element to see how each box is rendered.
CSS Background Image
The CSS background image is included in the first div.
W3C CSS3 is
our resource for current syntax.
We set the background image to gal.gif, positioned the image in the center and did not repeat the image.
background:url set to gal.gif
background-image:no-repeat
background-position:center
CSS width:375px;margin:0 auto
The width:375px;margin:0 auto
automatically centers the outside box that
contains the text. The browser needs to know
the width of the box in order to calculate
the center.
The text-align:center centers the
text inside of the box.
CSS margin
margin-top:-10px;
We are telling the browser to place the text up 10 pixels higher than the natural
flow of the top margin.
CSS line-height
line-height:1.2em;
We are using font sizes in pixels with explicit line heights
to control the amount of space
above and below the text.
CSS letter-spacing
letter-spacing:-2px;
To get the letters tighter together we use
letter-spacing with a negative number.
CSS div
Each line of text is a new div.
We could use a paragraph but the CSS style is more consistent
between browsers when we use the div.
We are controlling the natural placement of the text with explicit margin settings.
CSS Color
Browsers allows us to use recognized color keyword names. We made our own Color Name Chart for ease in matching hexadecimal and rgb colors to the similar color name.
For this color exploration we started out with sampled hexadecimal colors and then found a good color name substitute.
Blog Famous
The only homeless blogger in the Mandarin Quilt, our dear friend Morgan W. Brown, is Vermont's most vigilant blogger according to 802online who mentions Morgan's new blog Beyond Vermont State Hospital.
The Times-Argus also ran a story Homeless man starts mental health blog a couple of days ago.
When I told my friend, the genius, about Morgan the homeless blogger he couldn't understand how homeless people blog. He said "you mean he lives on a boat, right?". No Jim. Morgan is resourceful and now he is making news. He is a prolific blogger and a kind soul who kept me entertained with postcards, free newspapers, brochures, a bookmark and more while recovering from spinal surgery. Thank you Morgan.
Have you had your 15 minute of blogfame?
Tell us about it.
Dawn Chalks it Up for New Orleans
A
few months ago
Dawn showed us a few quick graphic tips and tricks for creating our own Background Tiling Image.
What is Dawn up to today?
Dawn put her artistic efforts into generating money for
local Sacramento children's art programs during the annual Chalk It Up to Sacramento using the theme of a rebuilding of New Orleans.
Dawn was interviewed and photographed by the
Sacramento Bee landing on the front page of yesterday's City Section. Dawn had an
American Red Cross can and turned in the proceeds on Tuesday. Due to popular demand Dawn's chalk art is available at Cafe Press. All proceeds are going to the American Red Cross.
Drop Caps Example Using CSS Inline Style
This
is a little smaller than the drop cap we usually use. The line-height is adjusted to fit the style. When we change the font to font-size:56px; the line-height is also adjusted. We are using line-height: 48px;. This drop cap will span a few lines without a lot of extra whitespace.
The font-size and line-height can be
adjusted to make the drop cap fit your page style.
Copy and paste this in your Blog or Web page.
It will look like this.
This is a little smaller than we usually use with the line-height adjusted to fit the style.
Hurricane Katrina Squares
You can use the squares in the Gallery to customize your own link or to make a link to your favorite non-profit organization. Here's one we made today using the image named katrina1.jpg .
Copy and paste this in your Blog or Web page.
It will look like this.
Rob at CrabAppleLane in Bush, Louisiana hasn't posted in a few days. Rob, our thoughts are with you. Keep us posted.
