Kaua‘i is beautiful and fragrant. I've learned not to try to capture the spirit of Hawaii in photographs, just a few snapshots to remind us of the sunset and the ever-changing evening view of the mountains.
Kaua‘i Room View
Blogger is slow today and we're off to a family wedding. Aloha...
Copy and paste this in your Blog or Web page.
It will look like this.
Kaua‘i is beautiful and fragrant. I've learned not to try to capture the spirit of Hawaii in photographs, just a few snapshots to remind us of the sunset and the ever-changing evening view of the mountains.
Kaua‘i Room View
Blogger is slow today and we're off to a family wedding. Aloha...
Overheard:A Small Victory has an excellent rendition of the Magazine Style code, while ScriptyGoddess.com found the Polariod -style photos, Inline Style Pullquotes, and the Magazine Style Pullquotes. For this post we used Magazine Style Drop Caps.
when in doubt add borders...the pink and yellow borders are for testing
CSS FLoat Right
Using CSS Inline Style
Float Image and Text Caption Right
Goodrich Wins
Float Image and Text to the Right
Some people float to the left while others float to the right. There is one difference between the Float Image Left copy and paste code and this float to the right. We added padding-left:15px to the paragraph
that floats to the right so that the text and
the image have more space between them.
We are floating the picture to the right by
adding style float:right to the paragraph tag.
Whitespace
We are adding padding to give us some whitespace between the image and caption text that we floated. The text that we are typing in after the first paragraph will automatically align to the left. This technique is simple, just some style added to the paragraph tag. We added extra words here so that the full effect displays.
Copy and paste this in your Blog or Web page.
It will look like this (image included).
Goodrich Wins
YOUR TEXT GOES HERE The text that you type here will automatically align to the left of the image. You can type as much as you want. The more you type the better it looks.
More ways to float your boat. . .
Float Overflow
I'm starting to see the problem Ryan had with floating to the right with the caption. We are overflowing here too. It works in Mozilla, doesn't work well in IE. Still trying to figure it out. The nearly identical code that floats to the left with a caption float left and uses the identical image and text works fine.
meg
Solution:The solution was to
remove the
<div style="clear:both"></div>.
I'm leaving the pink and yellow test borders in for your enjoyment. Misery loves company.
Polaroid Picture Borders
CSS Inline Style
Combining Borders and Text Overlay
Noded is posting photographs with a Polaroid style border.
The border looks something like this.
Image by TypoGenerator
Copy and paste this in your Blog or Web page.
It will look like this.
Image by TypoGenerator
The code above was tested in IE 5.5, IE 6.0, and Mozilla Firefox 6.0 It should work in all browsers, if you don't see a Polaroid looking border in your browser please leave a message in the comments.
Polaroid Picture Borders
CSS Style Sheet
CSS Style for Polaroid Border
For one-time or occasional use CSS Inline Style works fine.
If you want to reuse the Polaroid effect you can add a style
to your external style sheet or in the HEAD section
of your page.
We used an image that is the same size as a Polaroid, but if you look at Noded you will see that the borders work well on varying image sizes. The trick was to use negative spacing to move the text Image by TypoGenerator up inside the border.
Where do you put the style code?
If you are using a template look for the <style type="text/css"> and put the code below it. Noded added a class named polaroid to the style sheet for easy reference. The style looks something like this.
To reference polaroid and polaroidtext type this in your Blog or Web page.
It will look like this.
More Picture Border Styles
Cindy (loowho) is looking forward to going back to work on Monday. Work is a good thing.
Mandarin Rob starts layoffs Monday
The official layoffs start tomorrow and all will be gone by Thursday. The doors close on Friday. We leave Saturday for the island of Kauai for a week before he starts the new job. Do you ever click on a HOME link and think that it really might take you home?
fp is getting the word out about MadWomen.org, a Madison Women for Peace blog.
Brendyn didn't get the job
GoldenNoteBook is where Rita Rich resides. She's a golden-glowing red head you really have to see.
Mittenmusings has two job interviews
Shirl did a GoogleFight on gray and grey. The things we all do to relax.
Claude played with the CollageMachine that Kane found. Take it for a spin and have a great week.
Do you have a job? Underemployed? Unemployed? Retired!
Hurricane Charley
Charley rivals category-4 Hurricane Donna that hit western Florida from out of the Gulf in 1960. Deadly major Hurricane Charley ripped ashore north of Fort Myers, Florida and into the Port Charlotte/Punta Gorda area at 4 pm Friday afternoon.
Rob is talking to Dad in Naples, Florida. Power is out. Phones are working. Hurricane Charley missed them by thirty miles when it sucker-punched Punta Gorda. People are having a difficult time finding relatives and many are "missing". Some people moved quickly to get out of the storm and others have moved to areas that have power. Rob parents are leaving now to stay with his sister who has power.
Haven't been able to contact Sis in Pensacola,Forida but it doesn't look like they were hit. Brother Gary is in Port Saint Joe, Florida. It looks like they got a little weather. We're checking Weather.com Top Stories for information.
Everyone else OK?
Layered Effect
Q: How do you do the layer effect on your front page? It didn't work when I tried it.
A: We used relative positioning with Inline CSS style. Here's the image with text floating over it.
Here's the full inline style code.
First we display our 316 x 330 image using the <IMG> tag.
To overlay the Web Site Design Studio
text on top of the image we used a CSS inline div.
The key when overlaying is the use the position:relative with top and margin-left. We had to tweak the relative positioning a bit to get the text to appear exactly
where we wanted it on top of the image. We used the div
tag and decided to start the text -300 pixels from the top (our image height is 330). We used a left margin of 10 pixels.
Copy and paste this in your Blog or Web page.
It will look like this.
Mandarin Blogger Quilt
The Drop Cap will be close to the size of the title text. We are using a font-size of 36pt and adjusting the height as needed. The result is nearly identical to the magazine but it doesn't look the same on a screen.
The
first letter in this paragraph is big.
Magazines use the drop cap technique and CSS includes the first-letter pseudo class, but we want more control so we are using a span to make it big. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.
In our browser the top of the first letter is parallel with the rest of the text on the first line. That was the goal, to drop the cap for top vertical alignment. Your mileage may vary.
In the magazine they indent each line after drop cap, maybe that's where they get the balance. So we are using text-indent:20px; which may mimic magazine style more closely.
Copy and paste this in your Blog or Web page.
It will look like this.
The first letter in this paragraph is big. We used a font size of 36pt. You can change the font size and adjust the height as needed. It wasn't easy to decide between 22pt and 24pt height. Depending on your font it will probably need some adjustment.
Or this if you use a line height of 22pt.
The first letter in this paragraph is big. We used a font size of 36pt. You can change the font size and adjust the height as needed. It wasn't easy to decide between 22pt and 24pt height. Depending on your font it will probably need some adjustment.
Here's a few good blogs we noticed today, some who come in through the Mandarin Front Door so we don't see them. All are quality blogs that we want to spend more time visiting including Footprint, Mezza-9, TheBlackNewYorker (they used the drop caps!), proboards, Visual Blogs, help.journalspace, Middlebury.edu, Mylissann, Cathcath, diaphaneity, idletype, and more. Thank you for visiting.
The reading list for tomorrow includes JustAnArmyWife, Bryk, Kane, VLCA, grlinabox, cassie, talkleft.com, Brendyn, CelestialOfferings, Farrago (it ain't over) , NorthernVA, dkGoodman, Third Daughter, ivyai, bustinoutloud, cleverhack, fudgeit, aliveandbloggin, medicmom, doc shazam, laprincessa, liliputianlilith, starsailing, dskillz23, and more...
Little Hands
Opacity Applied to Heading
Your Page Title
If your page has a background image you can apply opacity to the title text. You don't need to alter the image.
Method 1
Method 1: Inline Style (transparent background)
We did it with inline style here but you can put it in your style sheet if you want to reuse the code. Here's the code for inline style.
Copy and paste this in your Blog or Web page.
Method 2
Method 2: Inline Style (Image background)
We did it with inline style here but you can put it in your style sheet if you want to reuse the code. Here's the code for inline style.
Copy and paste this in your Blog or Web page.
The heading looks like this over our background image.
Your Page Title
Method 3
Method 3: Style Sheet
You can define the H1 or other heading tag in your style sheet. The code goes in your external style sheet or between the <HEAD> and </HEAD> tags in your template.
h1 {
color:white;
width:100%;
background:transparent;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
font-size:42px;
line-height:2em;
text-align:center;
}
The code to type in your Blog or Web page will look like this.
<h1>YOUR PAGE TITLE</h1>
We used an opacity of 50% and an arbitrary font-size. Notice that the width is defined. The browser wants to know the layout (height and width) when applying opacity. The color white works for nearly all backgrounds.
Is the code working for you? Anyone?
Tips
- Use Inline Style or define the H1 tag in the style sheet (you proably don't want to do both).
- Review the
HEADsection of your template. If the H1 tag is already defined use another heading tag for this example:h2, h3, h4, h5, or h6. Or, remove the H1 that is already defined. - Jagged Text when using Opacity?
We usedbackground:transparent;in the example. That will not work for everyone. Claude has a good example. On her background we have to explicity say that the background is an image. Otherwise the text is jagged.
Solution
Changebackground:transparent;to the name of the background image.
