CSS > Photo Gallery

I’ve given up on the sIFR for now, I couldn’t get them to work, so I’ve moved on to basic photo galleries using CSS. When I say basic, I mean basic. Once I get the style sheet typed up, I’ll post a link to an example.

Also, I need to learn Dreamweaver asap, because anything that will save me time is welcomed. Once I finish the book I’m using now, I think I’ll start on a Dreamweaver book.

Here it is:
Basic Online Gallery

Once again, it is very basic, I will work on styling it up a bit later, but baby steps dawg, baby steps.

Also, I think the best thing about book and website support is when companies allow you to download their css code and dissect it so you can see the errors that might be holding you back. One simple little thing can screw the whole page up.

Here’s my work space:

Last but not least, my current favorites:
Song: Telephone by Erykah Badu
Drink: Pepsi
Food: Chimichungas
TV Show: The Office
Movie: Religulous
Website: Tie: Flickr & Hulu

Also, I downloaded Google Chrome and first impressions is Opera and Firefox fucked and out popped Chrome.

Filed under: Books, Cascading Style Sheets, Current List, Fun List, Javascript, Photography, Web Design , britney spears, Cascading Style Sheets, CSS, Dreamweaver, Flickr, google chrome, HTML, hulu, Javascript, Online, photo gallery, the office, Web Design

JPG Stories

My friend Chad Cheverier wrote this very nice piece about a friend of his that has passed.

Read it here:
Phil Park

Thank you friends.

Filed under: California, Random Thoughts, Uncategorized , a-rod, britney spears, celeb gossip, chad cheverier, Friends, jpg, madonna, perez hilton

Photo’s from the day

I meet my wife for lunch at Ikea today, partly for lunch, partly to pick up a toy tea set for my daughter’s friend Nina. It’s been raining like non-stop here in socal for like 3 days, and for Pittsburgh that’s nothing, but for California that seemed like the end of days. So we have this mountain in Orange County called Saddleback Mountain and everyone has been freaking out over the amount of snow on it. What’s ironic is that it actually gets snow like once a year, sometimes for a week, sometimes for a few hours, depending on the amount of sun it gets the following week. So I took my camera to get a few pics.

Clouds Galore.

Oh well, maybe tomorrow I’ll have better luck.

We had fun with Tegan at Ikea. Sofie played in smaland while we shopped.
Here are the pictures:

Clouds over Ikea.

Tegan and Amber.

Tegan and Amber with sunlight peeking over Amber’s shoulder.

Amber & Tegan walking through the warehouse.

Tegan taking a sip.

All of my photos are hosted by Flickr , which is probably my favorite site in all of the world. Flickr is magically babelicious. I’ve had a pro account for the past 2 years and have well over a 1000 photo’s on it. I did however let my pro account recently expire, and asked my wife to renew it for me for Christmas. Easy Christmas gift.

Alright next post will be sIFR related.

TV On The Radio has been the music in my ears all day. The first and third album.

Staring at the sun indeed……

Filed under: California, Lomo, Los Angeles, Music, Nikon D80, Orange County, Photography , Adobe, Costa Mesa, Ikea, Landscape, Lightroom 2.0, Nikon D80, Orange County, Photos, Santa Ana, TV on the Radio

W.I.L.T. Cascading Style Sheets 4

After a minor setback, I finally understand why I wasn’t able to get the sIFR to work. You are unable to test it on your local server (your computer), so I’m in negotiations with my awesome sister in law to see if I can borrow some server space to get them up and running. I found help via a website called Design Intellection that breaks it down for you like you’re a 5 year old. Or a 3 year old if your name is Michael Scott .

More to come after I put my daughters down for a nap and I snag a couple pictures of Saddleback Mountain with snow on it. Happens every year, but people always seem to forget come summer.

Filed under: Books, California, Cascading Style Sheets, Javascript, Orange County, Web Design , Cascading Style Sheets, Dreamweaver, Javascript, Saddleback Mountain, sIFR

W.I.L.T. Cascading Style Sheets 3

Quickpress:

sIFR are not fun at first. I still need to do a lot of work to get them. They involve some Flash and some Javascript which both are things I have very little if any experience with. I understand most of the coding, I’m just not grasping the css code implementation. I understand you need to add the script code in your , and then reference the file…blah blah blah. Rome wasn’t built in a day.
So the next two days are the weekend, and I’m busy busy busy, so I’m going to give them another crack tomorrow, and then of course Monday afternoon. If anyone who reads this feels like helping, go ahead and leave me a comment.

Thanks.

Oh wait….here’s a picture:

Freeway off ramp. Fairview and 405 near Ikea and South Coast Plaza.

Peace out you suckers.

Filed under: Uncategorized , Adobe, Books, Cascading Style Sheets, CSS, Dreamweaver, Flash, Flickr, Javascript, Learning, Photo, sIFR, Web Design

What I Learned Today: Cascading Style Sheets 2

Flash Replacement. One major downside to image replacement is that it requires a lot of manual labor. Thankfully there is sIFR.  Scalable Inman Flash Replacement.

Example:
Noodlebox

Sorry I don’t have a before or after picture.

Basically, sIFR is a javascript file that scans your headings, copies the text from inside those headings, and uses it inside a Flash object that replaces the HTML text. Pretty awesome huh?

sIFR can be affected by the extra whitespace in your HTML tags. This would be proper code:

<h1>Yo! MTV Raps!</h1>

No spaces, no problem.

You can get ready made sIFR from many different sources, including one from the author of the book I’m using.
Fontsmack

Once you have the .swf file they’re ready for your web page. You should really call the .swf by the font they include. example: bitwise.swf

Customizing the Javascript. You do need to insert into the head of your page one line of script.

<script typre=”text/javascript” src=”scripts/sifr.js”></script>

You’ll also have to insert some of your own code to indicate which headings you’ll want o replace.

Alright, it’s 4:30 Pacific time, I gotta get ready for work.

Here’s some visual stimulation for that ass:

Presidio Cemetery S.F. with the 300 effect.

Goodnight munchkins.

Filed under: Books, Cascading Style Sheets, Fun List, Javascript, Lomo, Nikon D80, Photography, Web Design , Cascading Style Sheets, CSS, DOM Scripting, Dreamweaver, Javascript, Sitepoint, Web Design

What I learned today: Cascading Style Sheets

Hierarchy. Not all headings are created equal. Looking at two different websites, A List Apart and Subtraction , you’ll notice the different style’s regarding font size and weight on headings to create a sense of hierarchy on the page.

Identity. Your company logo has to be unique. Also, your site design – colors, layout & images must also be unique. To consider headings, you must consider typography, and the current state of HTML typography is very poor, although it is improving, considering that only about 75% of all users have just 8 fonts installed on their computer. We need some style…we need to Diddy the web if you will. Sometimes being subtle is the way to go. Check out Rapha, which has a well harmonized typeface, and it brings out a nice effect.

Image Replacement. This is a nice answer to spruce up your web page with “Diddy” fonts. This means any user with a CSS enabled browser will see the replaced text, but ones without will just see plain text.
HTML like this:

<h1>

Yo! MTV Raps!

</h1>

<p>

…

</p>

Would be replaced by an image. Again, users who have browsers not supported by CSS would just see the plain text.

Text-Indent. With Text-Indent image replacement, a negative text-indent is used on the text inside the heading to make it move off the left of the screen, placing it out of view. Using CSS, you can adopt any design you like.

example:

h1 {

height: 43px;

background-image: url(images/blahblahblah.gif);

background-repeat: no-repeat;

text-indent: -9999px;

overflow: hidden;

}

However, users not supporting CSS will not see the image. Oh well, sucks for them.

Providing Additional Markup. Basically, we’re covering up the text with an image, using span inside h1:

<h1>

<span></span>Yo! MTV Raps!

</h1>

This allows us to apply a background image to cover up the HTML text.

This is all I’m going to update today, not to be rude, but I need to concentrate on the book, and less on the wordpress post. Blogs are cool, but Wu Tang is for the children. I’m getting the lesson’s directly from The Art & Science Of CSS by Sitepoint.

I don’t want to leave you without any visual stimulation so here’s a picture from Mel’s Drive In, the Sunset Blvd. one :

OK, back to work.

Filed under: Books, Cascading Style Sheets, Lomo, Web Design , Adobe, CSS, Daily Log, Dreamweaver, HTML, Learning, Mel Drive In, Photo, Picture, Style Sheets

My first video on YouTube – Time Lapse of course

Here it is:

It’s nothing special I know, but I was just playing around with my new Pclix having fun.

Filed under: California, Fun List, Music, Nikon D80, Orange County, Photography, Time Lapse, Uncategorized , CA, D80, Nikon, Orange County, Scion, Time Lapse, Vampire Weekend