pictures

Add a “Pseudo” Pseudo Class Hover in Inline CSS.

hr
hr Heading 2 Icon Add a “Pseudo” Pseudo Class Hover in Inline CSS.

I have been busy this week with a few really cool projects - one of them to create a widget for any site that will show the latest news items from a RSS feed - while not limiting the widget to servers with PHP. After putting that together, I had to add inline CSS to style the feed output. Everything looked great but I could not figure out how to add a :hover to an inline style…until I realized I could fake it by adding some basic javascript: onmouseover and onmouseout to change the font color.

[html]
Title

Nano Tip.

hr
hr Heading 2 Icon Nano Tip.

I have been doing a lot of work recently on a remote server and have needed to use a text editor - so I decided to use the ever-so-easy nano. Problem is - the files I am working on are very long and editing them is not fun. I finally decided to look through the man pages (I am an emacs person myself) and found something that ended up saving me tons of time..."go to line number". If you are editing a file and know you need to edit something on line 1245, you would type in:

CODE:
nano +1245 master.css

and it would open the file to line 1245 so you do not need to scroll down. Thank you man pages!

css containers: fancier, fixed width, rounded corners.

hr
hr Heading 2 Icon css containers: fancier, fixed width, rounded corners.

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the second of 4 articles in a series on how to create various CSS rounded corner or "fancier than a simple box" container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I created this code from scratch and use this for any fancier fix width boxes I might need for sites I create. Height is not fixed. (Also see css containers: simple, fixed width, rounded corners.)

The container:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url("/downloads/rounded-corners/top-rounded.gif") no-repeat bottom;}
.roundedBoxMiddle{background: url("/downloads/rounded-corners/middle-rounded.gif") repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url("/downloads/rounded-corners/bottom-rounded.gif") no-repeat top;}

Content
This is a quick and easy way to do something that looks better than a square box.

The code:

HTML:
.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url("/downloads/rounded-corners/top-rounded.gif") no-repeat bottom;}
.roundedBoxMiddle{background: url("/downloads/rounded-corners/middle-rounded.gif") repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url("/downloads/rounded-corners/bottom-rounded.gif") no-repeat top;}

Content
This is a quick and easy way to do something that looks better than a square box.

General Information:
This is based on a simple graphic I created in Photoshop using the rounded corner box tool, a drop shadow, a stroke, and ... [more]

css containers: simple, fixed width, rounded corners.

hr
hr Heading 2 Icon css containers: simple, fixed width, rounded corners.

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the first of 4 articles in a series on how to create various CSS rounded corner or "fancier than a simple box" container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I did not create this code from scratch - but I will use it if I need something really simple and really quick. Height is not fixed.

The container:

b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent{margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}

Content
This is a quick and easy way to do something that looks better than a square box.

The code:

HTML:
b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent {margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}

Content
This is a quick and easy way to do something that looks better than a square box.

General Information:
Although it is very ... [more]

page shift fix for safari and firefox.

hr
hr Heading 2 Icon page shift fix for safari and firefox.

Ever have a site that when clicking through pages would slightly shift to the left or right? This was driving me crazy and finally after doing some research I found a hack that will do until I can find the solution:

CSS:
/*this is to keep page from shifting to left on load in safari and firefox*/
html { min-height: 100%; margin-bottom: 1px; }
html { overflow: -moz-scrollbars-vertical !important; }

find your location.

hr
hr Heading 2 Icon find your location.

If you ever are not sure of the path to one of your scripts of files (.htpasswd), you can easily find out by creating a new PHP file, and then copying the following code into the file:

[php][/php] After you save the file, view it in your browser and you will see the location of your file. No more guessing if it is /home/username/public_html/ or some other naming convention that your host might use.

get serious about backups.

hr
hr Heading 2 Icon get serious about backups.

If there is one thing I cannot stand more than anything when it comes to computer support - it is failure to have a backup strategy. If you have pictures, email, documents, music, videos, etc that you consider valuable - do something about it. There are many ways to easily backup your personal data and I wanted to throw out another option if you are not using a remote backup system: Jungle Disk.

With Jungle Disk, you can easily, cheaply (15¢ per gigabyte), and securely transfer and store your data using Amazon.com's S3 ™ Storage Service. I have all my data backed up to a 500 gigabyte FireWire external drive every night, but if something were to happen to my house, or my computer/drive was stolen - I am left with nothing. Knowing all my pictures, documents, music, and anything else I really need or want is available off site makes me sleep easier - and it will for you too.

Never had a drive failure or any data loss? You will - so you might as well prepare now.


search

subscription information

Blog RSS

Comments RSS



Powered by FeedBlitz

blog categories

blog tags

most popular posts


blog archive

standards

Get Firefox!
XHTML
CSS