...off by using the W3 CSS Validation Service. Only once you......well, is the Juicy Studio CSS Analyser.  This validation will not...

Subscribe in a reader - Subscribe via Email Search for: Skip Navigation WordPress tips, hacks and tutorials Monthly Email Newsletter Enter your email address: Home About Page Contact Sitemap Archives Page Friends Tutorials Guest Posts You are here: Home » Website Accessibility » Validating your CSS « Free e-book Fixed Font Sizes » Website Accessibility: Validating your CSS 08 May 08 Once you have separated your content from the layout on your site, the validity of your stylesheet(s) becomes very important in your efforts to get your site as accessible as possible, for so many as possible. photo credit: eisenrah What is the easiest and most efficient way of validating your stylesheet(s)? If you have never validated your stylesheet you definitely have to start off by using the W3 css Validation Service. Only once you have corrected any errors and validated your markup here, will your stylesheet(s) be ready for more sophisticated validation. There are many online validation tests out there but the one I really find to be just great, and quick as well, is the Juicy Studio css Analyser.  This validation will not only show any markup errors you might have missed on the previous validation but it will also check for fixed sizes in fonts as well as other elements you might have used. Another handy part of this validator is that it will show up any foreground colors you might have used that do not have sufficient contrast with the relevant background color. While I am at it, allow me to tell you of yet another Juicy Studio service that is available. This one is the Juicy Studio Readability Test. If the readability of your content is too high, you could inadvertently be excluding some people from enjoying your site. This test provides results for many readability tests. The test I use most often is the Flesch Reading Ease. On this test you should aim to get a result of between 60 and 70. Happy validating. Related Posts Listening to the comment forms - Can the users of our blogs who make use of screenreaders easily navigate our comment forms? “New Windows” are still with us - Despite all kinds of innovative methods the standards with regards to opening links in new windows are still not being adhered to. The Basics of Lists - We all use lists to add structure and enhance readability. If done incorrectly these lists could invalidate our markup. Stumble upon something good? Share it on StumbleUponShare this on FriendFeedTweet This!Share this on FacebookShare this on TechnoratiSubscribe to the comments for this post? « Free e-book Fixed Font Sizes » 2 Opinions have been expressed on “Validating your CSS”. What is your opinion?

...Images - Rollover images using CSS alone. CSS Equal Height Columns Revisited......- Another look at a CSS problem that never seems to...

Subscribe in a reader - Subscribe via Email Search for: Skip Navigation WordPress tips, hacks and tutorials Monthly Email Newsletter Enter your email address: Home About Page Contact Sitemap Archives Page Friends Tutorials Guest Posts You are here: Home » WordPress » Clearing floats in CSS « A glimpse at WordPress 2.8 Adding Drop Caps » WordPress: Clearing floats in CSS 15 Apr 09 Many of the support queries I receive are on the same topics. I have decided to post the solutions to these problems here, on this blog. This will of course save me a bit of time as I do not have to provide the same answers over and over again, I can simply refer folks to the relevant post. If you are one of the people that regularly mail me with support queries on the WordPress themes released by Nice2All, please take note that I no longer accept these queries via mail. I have re-instated the support forum on this blog. Please make use of this mini-forum to raise all the problems you might be experiencing. I do get to the forum as often as I can. You do however have to remember that even though I work from home, I can only get to my blog in the evenings after 5pm. Also please keep the time differences in mind. My local time is GMT+2. We all know that in CSS, when we attempt to float a DIV within a containing DIV we run into problems. The outer DIV does not stretch to enclose the inner DIV. The solution to this is to clear the floats in some DIV that comes after the inner DIV. This works but it is not always the best solution. Sometimes using a clear float interferes with other elements in your design. I handle things a little bit differently. I simply add overflow:hidden or overflow:auto to the original containing DIV. The choice here will depend on what you want to be done to the overflow within the outer DIV. Do not ask me why this works, I just know that it does work. Next time you have some designing to do, please give this a try, it might just make your task a little bit easier. Till next time. If you have found this article useful, please consider subscribing to the RSS feed. You could do this via your favourite feed reader or via Email.Many of the WordPress hacks, tips and bits of advice provided on this blog, include code snippets. If you are making use of any code provided here kindly take note that I cannot be held responsible for anything that might go wrong on your blog because of the new code. Before making any changes to your files please ensure that these files have been adequately backed-up.If you are new to WordPress and you want some assistance to start off with, you might be interested in my special offer.If you are passionate about WordPress and you are interested in writing a guest post on Nice2All, please contact me.CMF Ads - Low cost, no-nonsense advertising Related Posts css Rollover Images - Rollover images using css alone. css Equal Height Columns Revisited - Another look at a css problem that never seems to go away. How I created my customizable author page - Yet another way of quickly and easily adding an author’s page to a WordPress log. Stumble upon something good? Share it on StumbleUponShare this on FriendFeedTweet This!Share this on FacebookShare this on TechnoratiSubscribe to the comments for this post? « A glimpse at WordPress 2.8 Adding Drop Caps » 7 Opinions have been expressed on “Clearing floats in CSS”. What is your opinion?

...here: Home » WordPress » CSS Equal Height Columns « Nesting lists......free WordPress theme released » WordPress: CSS Equal Height Columns 18 Feb 09 This is......the height of elements in CSS but we do not always......a basic website page. The CSS will be something like this: #container{width:550px;margin:10px......Images - Rollover images using CSS alone. CSS Equal Height Columns Revisited......- Another look at a CSS problem that never seems to...

Subscribe in a reader - Subscribe via Email Search for: Skip Navigation WordPress tips, hacks and tutorials Monthly Email Newsletter Enter your email address: Home About Page Contact Sitemap Archives Page Friends Tutorials Guest Posts You are here: Home » WordPress » css Equal Height Columns « Nesting lists the proper way Lyndi1: New free WordPress theme released » WordPress: css Equal Height Columns 18 Feb 09 This is a topic that has been discussed on this blog quite a few times in the past. If I look at the search keywords that are bringing visitors to this site, this is one issue that is still very much alive. Let’s have another look at this somewhat difficult problem. We can set the height of elements in css but we do not always know what the relevant height has got to be that we need to set. The one DIV does not know what the other is doing. From what I have managed to find out, CSS3 will also not offer a fool proof solution to the problem. Let’s start with the basic code for a basic website page. The css will be something like this: #container{width:550px;margin:10px auto;background:#cc0000} #header{width:550px;background:#0000cc} #content{width:400px;float:left;background:#009933} #sidebar{width:150px;float:right;background:#003366} #footer{clear:both;width:550px;background:#000} The accompanying XHTML will be something like this: <div id="container"> <div id ="header"> <p>header</p> </div> <div id ="content"> <p>line 1</p> <p>line 2</p> </div> <div id ="sidebar"> <p>line 1</p> </div> <div id ="footer"> <p>footer</p> </div> </div> This code will give us exactly what the code suggests: The red piece that is shown here is of course the container sticking out because the content and sidebar columns are not the same length. Here, in a nutshell, is what is known as the equal height columns problem in CSS. The most important piece of the basic code used here is the clear:both bit in the footer. If you remove this little bit you will end up with this: What has happened here? The container element is not stretching towards the bottom and the footer has moved up till underneath the sidebar. This was just to show the importance of the clear statement used in the footer. There are other ways of sorting out this problem but that is a topic for another article. For now, just make sure that you have included the clear statement in the footer. Let’s now go back and have a look at the first graphic shown. Pure logic tells one that the problem of the unequal columns could easily be solved by simply giving the container the same color as the sidebar. Let’s try this: At first glance we have solved the problem. The two columns are still unequal in height but this fact is no longer visible on the page. This is exactly what we want. isn’t it? Not really. What happens if the sidebar is now made longer than the content column? You should now have a good idea of what the problem is all about. How do we actually solve the problem? I would like to take a quick look at 4 different solutions. Solution using a graphic This solution is known as Faux columns. Here we make use of a graphic to solve the problem. What you need is a graphic that is exactly the width of the page and only 1 px in height. The left hand side of this graphic (the same width as the content element) must have the same color as the content. The right hand side of this graphic (just as wide as the sidebar element) needs to be the same color as the sidebar. The graphic shown here is 5px in height just so that you can see the thing properly. To make this work you now need to add the graphic to the background of the container element. The following code will take care of this: #container{width:550px;margin:10px auto;background:#003366 url(faux.jpg) left top repeat-y} Does this work? Bet your bottom dollar it does. It will work if the content area is taller than the sidebar. It also works if the sidebar is taller than the content area. We have solved the problem. We do however now have the overhead of the graphic that has to be catered for. The graphic is small in that it is only 1px in height but it is repeated all the way down the height of the page. Solution using Javascript There is a very nice example of such a solution available here. I have tested the method shown here and it works well. The problem is that now we have the overhead of a script file and of course the solution will not work in a browser that does not support Javascript. Solution using pure CSS Sailor wrote a rather detailed article on this on this blog. This solution does involve negative margins and some fancy CSS. It does work well but maybe it is not for the beginner. This post includes a demo of the solution and the files used for the demo are available for download. My solution [scraper]I always try to keep things as simple as possible. My solution I call the perceived solution. As with all the other solutions the problem is still there but it is not visible to a user of the page. Let us use this very page as an example. The container, content and sidebar areas all have the same background color. The actual content in both the content and sidebar areas are now placed within ‘white’ blocks. I does not matter now which of the areas are the tallest as the unequal heights are ‘perceived’ not to be a problem. There you have it. What is the most effective solution to the problem? The choice is yours. If you have designed websites before I would like to know how you overcame the equal height problem. Till next time. If you have found this article useful, please consider subscribing to the RSS feed. You could do this via your favourite feed reader or via Email.Many of the WordPress hacks, tips and bits of advice provided on this blog, include code snippets. If you are making use of any code provided here kindly take note that I cannot be held responsible for anything that might go wrong on your blog because of the new code. Before making any changes to your files please ensure that these files have been adequately backed-up.If you are new to WordPress and you want some assistance to start off with, you might be interested in my special offer.If you are passionate about WordPress and you are interested in writing a guest post on Nice2All, please contact me.CMF Ads - Low cost, no-nonsense advertising Related Posts css Rollover Images - Rollover images using css alone. css Equal Height Columns Revisited - Another look at a css problem that never seems to go away. How I created my customizable author page - Yet another way of quickly and easily adding an author’s page to a WordPress log. Stumble upon something good? Share it on StumbleUponShare this on FriendFeedTweet This!Share this on FacebookShare this on TechnoratiSubscribe to the comments for this post? « Nesting lists the proper way Lyndi1: New free WordPress theme released » 16 Opinions have been expressed on “css Equal Height Columns”. What is your opinion?

...» Equal height columns – CSS layout « Optimizing your stylesheets Website accessibility......Accessibility: Equal height columns – CSS layout 18 May 08 When I started using......layout 18 May 08 When I started using CSS I quickly ran into the......XHTML 1.0 Strict and the CSS validates as CSS Level 2.1. I......Images - Rollover images using CSS alone. CSS Equal Height Columns Revisited......- Another look at a CSS problem that never seems to......to go away. Clearing floats in CSS - Clearing floats has for......on “Equal height columns – CSS layout”. What is your opinion?...

Subscribe in a reader - Subscribe via Email Search for: Skip Navigation WordPress tips, hacks and tutorials Monthly Email Newsletter Enter your email address: Home About Page Contact Sitemap Archives Page Friends Tutorials Guest Posts You are here: Home » Website Accessibility » Equal height columns – css layout « Optimizing your stylesheets Website accessibility is not only for the disabled » Website Accessibility: Equal height columns – css layout 18 May 08 When I started using css I quickly ran into the problem of having unequal heights in the different columns of the design. This was extremely frustrating at the time. I remember using all sorts of tricks to overcome the problem. The most basic trick was to give the different columns the same background color which would simply hide the problem. I travelled down the road of Faux Columns (a method of using graphics to make it seem as if all columns had the same height), but somehow it just did not seem to be the way to go. I tried different Javascript tricks to solve the problem. These worked but were adding unnecessary overhead to the design. Some time ago I stumbled across a solution that involved no hacks, no graphics and also no Javascript. I have tried searching for the original article I found but could not find it. All I can remember is that the author was named Alec or Alex. If anyone knows who the author was, please contact me as I would love to give credit where it is due. In the introduction to the article the author had written: “Stop thinking out of the box, start adding something around the box.” These words I have never forgotten because this was exactly what the solution to the unequal heights was based upon. I considered giving a detailed explanation on how to solve the problem here but decided against it. Instead I will rather provide the link where you can view a demo for yourself, as well as a further link where you can download the relevant files. Demo | Download Just by the way, the solution, as it is at present is valid XHTML 1.0 Strict and the css validates as css Level 2.1. I have tested the solution in Firefox 2, Internet Explorer 7 and Internet Explorer 8 Beta. The layout works just fine in all these browsers. This simple solution has the added advantage that the text is re-sizable within a browser. This layout could very easily be chopped up into the different pages and the necessary PHP added to turn it into a blogging template. I do hope you can find some use for the layout. If you know of a better solution I would definitely love to hear about it as this is something that I use on a regular basis. Related Posts css Rollover Images - Rollover images using css alone. css Equal Height Columns Revisited - Another look at a css problem that never seems to go away. Clearing floats in css - Clearing floats has for long been a design problem in CSS. Stumble upon something good? Share it on StumbleUponShare this on FriendFeedTweet This!Share this on FacebookShare this on TechnoratiSubscribe to the comments for this post? « Optimizing your stylesheets Website accessibility is not only for the disabled » 4 Opinions have been expressed on “Equal height columns – css layout”. What is your opinion?

...here: Home » General » CSS Equal Height Columns Revisited « Content......Users Only Internet Explorer 6 » General: CSS Equal Height Columns Revisited 06 Aug 09 In......entitled Equal height columns – CSS layout on this site. I......negative margin technique that uses CSS only, no images or Javascript......you are not really into CSS I am afraid today’s post...

Subscribe in a reader - Subscribe via Email Search for: Skip Navigation WordPress tips, hacks and tutorials Monthly Email Newsletter Enter your email address: Home About Page Contact Sitemap Archives Page Friends Tutorials Guest Posts You are here: Home » General » css Equal Height Columns Revisited « Content for Logged-In Users Only Internet Explorer 6 » General: css Equal Height Columns Revisited 06 Aug 09 In May 2008 Sailor published an article entitled Equal height columns – css layout on this site. I touched on this subject again earlier in this year. The so-called equal height column problem has been with us for, well, since the advent of CSS. There are quite a few solutions to the problem. In his article Sailor suggested a negative margin technique that uses css only, no images or Javascript is necessary. Unfortunately the technique is not easy to understand and it can be quite difficult to implement. This article is still receiving quite a bit of traffic. Two out of every ten searches on this site are still for the keywords “equal height” or something similar. I thought it would be appropriate if I have yet another look at the subject and try and explain the technique in a different way. If you are not really into css I am afraid today’s post is going to be rather boring. I am going to make use of a scenario of a site with 3 columns. If you implement the negative margin correctly you can make any of the 3 columns the longest column, all the other columns will end up having the same height as the longest column. To start off let’s add a header, a single container element spanning the entire width of the page with a footer at the bottom. To get this far we will need quite a bit of styling already: body{ width:100%; background:#fff; min-width:720px; /* can alter this to whatever you need. Does not work in IE

...here: Home » General » CSS Rollover Images « Internet Explorer 6 AntiSpam......Internet Explorer 6 AntiSpam Bee » General: CSS Rollover Images 09 Aug 09 This little tutorial......Javascript. All you need is CSS alone. I am not sure if......- Another look at a CSS problem that never seems to......to go away. Clearing floats in CSS - Clearing floats has for...

Subscribe in a reader - Subscribe via Email Search for: Skip Navigation WordPress tips, hacks and tutorials Monthly Email Newsletter Enter your email address: Home About Page Contact Sitemap Archives Page Friends Tutorials Guest Posts You are here: Home » General » css Rollover Images « Internet Explorer 6 AntiSpam Bee » General: css Rollover Images 09 Aug 09 This little tutorial is by special request. One of my friends wanted to know which is the best script to use to create rollover images on your web pages. This one is very easy to answer, no script whatsoever. Using Javascript to do something like this, is in my opinion, an overkill. Please allow me to show you a way of doing this without any image flickering and also without Javascript. All you need is css alone. I am not sure if the way I do these things is the best way, I have never given it much thought. All I know is that this is a quick and easy way and it works very well. You can see a demo of a rollover image on this page. The following is the HTML that makes this demo work: <a href="#" id="rollover"><span>Rollover demo</span></a> Please take note that I have added an ID called rollover to the code. This was done so that the styling can be done. Also note that there is no mention of an image in the HTML. Obviously we also need some CSS. This is what was required for this little demo: a#rollover{background-image:url(nice2all1.jpg);height:300px;width:250px;display:block} a#rollover span{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} a#rollover:hover{background-image:url(nice2all2.jpg)} All I have done is to add the one image I am using to the basic link state and the other image to the hover state. The span is necessary to hide the actual link text. Take note that I do not use display:none to do the hiding as this contravenes the accessibility standards. It is really as simple as this. Hope you can find a use for this. Till next time. If you have found this article useful, please consider subscribing to the RSS feed. You could do this via your favourite feed reader or via Email.Many of the WordPress hacks, tips and bits of advice provided on this blog, include code snippets. If you are making use of any code provided here kindly take note that I cannot be held responsible for anything that might go wrong on your blog because of the new code. Before making any changes to your files please ensure that these files have been adequately backed-up.If you are new to WordPress and you want some assistance to start off with, you might be interested in my special offer.If you are passionate about WordPress and you are interested in writing a guest post on Nice2All, please contact me.CMF Ads - Low cost, no-nonsense advertising Related Posts css Equal Height Columns Revisited - Another look at a css problem that never seems to go away. Clearing floats in css - Clearing floats has for long been a design problem in CSS. Last child in lists - We so often want that ‘last child’ in a list styled differently from the rest. Stumble upon something good? Share it on StumbleUponShare this on FriendFeedTweet This!Share this on FacebookShare this on TechnoratiSubscribe to the comments for this post? « Internet Explorer 6 AntiSpam Bee » 7 Opinions have been expressed on “css Rollover Images”. What is your opinion?

... Free XHTML CSS Templates In this post, I showcase......January 14th, 2009 CSS 1 Comment » ...

Welcome to my Blog. About Me I am a web developer (PHP, XHTML/CSS, Javascript,Jquery) specializing in developing websites. Thank you and I hope you enjoy your visit! Recent Projects Free XHTML css Templates In this post, I showcase Free high-quality & New (X)HTML/css template. You will also find among these elegant templates a very well written step-by-step tutorials showing you how to create your own. Hopefully some of these will meet your expectations and come in handy in your projects. You will have to check the license first for any restrictions or guidelines before using any template. $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements. $("a[rel='fcolorbox']").colorbox({transition:"elastic"}); }); DemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownloadDemoDownload January 14th, 2009 css 1 Comment » « Previous Post Comments There are 1 comments to this post.

...Comments Kemarin pas nyari menu -menu css buat bikin web, akhirnya menemukan......MAU ? a2a_linkname="Keren, Menu Pakai CSS";a2a_linkurl="http://www.ismartshare.com/keren-menu-pakai-css.html"; Tags: CSS Menu, Drop Down Menu Baca ini...

Home
Contact Links Privacy Policy Buku Tamu Pasang Iklan
Blog Search
2mk Network
Internet And Wordpress Addict
Ngeblog untuk sekedar sharing ilmu, dokumentasi hidup, dan mencari teman. Boleh hanya numpang lewat tapi kalau mau komentar akan saya beri ucapkan terima kasih plus backlink gratis -:). Boleh ngasih saran, kritik, caci maki tapi kalau ngepam tak masukin penjara Aksimet.
Keren, Menu Pakai CSS
Saturday, April 25, 2009 12:51 | 1,082 views
Posted in category Web Development
9 Comments
Kemarin pas nyari menu -menu css buat bikin web, akhirnya menemukan yang lumayan keren, gratis lagi. coba tengok cssmenumaker.com. Disitu ada bermacam menu navigasi yang menggunakan css, baik yang horisontal, vertikal, maupun yang Drop Down menu. Daripada pusing-pusing buat sendiri lebih enak pakai yang sudah jadi dari web ini. Semua source code dan gambarnya bisa di download gratis. Buat my prend Dini, maaf ya gak bisa bisa nerusin Awardnya.
$3 Per invite MAU MAU MAU ?
a2a_linkname="Keren, Menu Pakai CSS";a2a_linkurl="http://www.ismartshare.com/keren-menu-pakai-css.html";
Tags: css Menu, Drop Down Menu
Baca ini juga :
Inet Cepet Itu Yang Seperti Apa Sih ? 1263 views Theme Baru Di Bulan Baru 991 views Indict – Kamus Bahasa Indonesia Gratis Paling Lengkap 68446 views SEO Dan Google Bikin Sakit Kepala 1120 views Downloadmp3gratis.web.id – Tempatnya Buat Download MP3 Gratis 4724 views
Example : Underworld: Rise of the Lycans DVDRip+rapidshare/files
9 Responses to “Keren, Menu Pakai CSS”

Montag, 16.08.2009 RSS Newsfeed RSS Comments Arbeiten Über das Königreich Home Arbeiten Top news Designtrends Freebies How To's Wordpress Webdesign Lexikon(Beta) Free Textures Du bist hier: Home » Freebies » Kostenloses CSS-Template als Webdesign Vorlage Kostenloses CSS-Template als Webdesign Vorlage Montag, 20. Juli 2009 von Dietmar Freebies 333 clicks 4 Kommentare Heute veröffentlicht Pixel-Kingdom ein neues kostenloses Webseiten Template. Reines CSS, valides HTML und CSS. Von der Struktur auch für Wordpress geeignet. Das Template kann kostenlos für kommerzielle und nicht kommerzielle Zwecke verwendet werden. Allerdings muss der Hinweis im Copyright Hinweis im Footer zusammen mit dem Link zu Pixel Kingdom erhalten bleiben. Diesen kann man aber entfernen, wenn man eine Kopie des Templates kauft. Dazu einfach eine Mail an info@pixel-kingdom.com schreiben. Hier gehts zum Download Hier gehts zum Demo Feed abonnieren Artikel ausdrucken Verbreite das Wort! Delicious Digg Design Float StumbleUpon Technorati Mister Wong 4 Kommentare for “Kostenloses CSS-Template als Webdesign Vorlage”

... Home Work Contact About 3 Aug 2008 PayPal donation form with CSS and jQuery for WordPress ......step is to add some CSS styling: 1 2 3 4 5 .red {color:#ff0000;} .icon_warning {background:transparent url(../images/exclamation.png) left......to “PayPal donation form with CSS and jQuery for WordPress” ...

Flowdrops Coffee Addicted Web Designer, WordPress & Joomla! Developer Home Work Contact About 3 Aug 2008 PayPal donation form with css and jQuery for WordPress Pete, Sunday, August 3rd, 2008 @ 12:00 pm • Tags: CSS, Donation, jQuery, PayPal, Tutorial Yesterday I got an email from Jamie asking me how I made my PayPal donation form. Here’s how I did it. First, we need a PayPal form with the donation stuff inside: 1 2 3 4 5 6 7 8 9 10 11 12 <form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="paypal@email.com"> <input type="hidden" name="item_name" value="My Donations Subject"> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="tax" value="0"> <input type="hidden" name="bn" value="PP-DonationsBF"> <label for="">Amount (US$) : </label><input type="text" name="amount" id="input_amount" width="10" class="text" /> <input type="submit" name="submit" value="Donate" class="submit" /> </form> More information about the PayPal donation buttons and the form code behind can be found here: https://www.paypal.com/cgi-bin/webscr?cmd=_pdn_donate_techview_outside Next, we need to add some more code to the form where we want to show the various messages displayed by jQuery. These messages are set to be hidden (display:none;): 1 2 3 4 <input type="submit" name="submit" value="Donate" class="submit" />&nbsp;&nbsp; <span id="msg_moreamount" class="icon_warning red" style="display:none;">PayPal takes $0.35 commission for a $1 donation. Please enter at least $1.35 , thank you!</span> <span id="msg_noamount" class="icon_warning red" style="display:none;">Please enter the amount you wish to donate and try again.</span> <span id="msg_activity" style="display:none;"> <img src="images/loader.gif" align="absmiddle" />&nbsp;Transferring to PayPal, please wait...</span> The jQuery script which actually checks and validates the form looks like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 jQuery(document).ready(function() { // the minimum required value to be entered. // in this case PayPal takes $0.35 from a $1 // donation, hence we ask for at least $1.35 var minimum_value = 1.35;   // attach this script to the form's submit action jQuery('#form_paypal').submit(function() { // check if there is an amount entered if (jQuery('#input_amount').val() > null) { // is the amount equal to or higher than the minimum_value? if (jQuery('#input_amount').val() < minimum_value) { // need more amount // hide messages, show more amount error jQuery('#msg_noamount').hide(); jQuery('#msg_moreamount').fadeIn(); return false; // prevent the form from submitting } else { // amount is more than minimum_value // hide messages, show activity jQuery('#msg_moreamount').hide(); jQuery('#msg_noamount').hide(); jQuery('#msg_activity').fadeIn(); return true; // submit the form } } else { // no amount entered at all // hide messages, show no amount error jQuery('#msg_moreamount').hide(); jQuery('#msg_noamount').fadeIn(); return false; // prevent the form from submitting } }); }); The code is documented so it should be clear what each block does. The final step is to add some css styling: 1 2 3 4 5 .red {color:#ff0000;} .icon_warning {background:transparent url(../images/exclamation.png) left no-repeat;padding:4px;padding-left:20px;} form#form_paypal input {padding:3px;border:1px solid #ddd;background:#fefefe;} form#form_paypal input#input_amount {width:50px;} form#form_paypal .submit {cursor:pointer;border-style:outset;} If you want to integrate this form into your WordPress Blog then this is the way to go: In your WordPress Theme folder (wp-content/themes/yourtheme/) create a new file named ‘donate.php’. To make the file available as a WordPress page template you’ll need to add the following code at the top of the file: 1 2 3 4 5 <?php /* Template Name: Donate */ ?> A donation form template for the default theme would look like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <?php /* Template Name: Donate */ ?> <?php get_header(); ?> <div id="content" class="narrowcolumn"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2>Make A Donation</h2> <p>If you think you have benefited or I have helped you in some way, by using any of my WordPress plugins or themes, please consider making a donation. Donations support the continued development of my websites and help cover the hosting costs. Donations of any size are gratefully accepted. Thank you!</p> <form id="ppDonate" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="paypal@email.com"> <input type="hidden" name="item_name" value="My Donations Subject"> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="tax" value="0"> <input type="hidden" name="bn" value="PP-DonationsBF"> <label for="">Amount (US$) : </label> <input type="text" name="amount" id="ppAmount" width="10" class="text" /> <input type="submit" name="submit" value="Donate" class="submit" /> <span id="moreAmount" class="warningIcon red" style="display:none;">PayPal takes $0.35 commission for $1 donation. Please enter at least $1.35 , thank you!</span> <span id="noAmount" class="warningIcon red" style="display:none;">Please enter an amount to donate and try again.</span> <span id="ppGo" style="display:none;"> <img src="&lt;?php bloginfo('template_url'); ?&gt;/images/loader.gif" align="absmiddle" />Transferring to PayPal, please wait...</span> </form> <p><small>Info : once you click on 'Donate', you will be transferred to PayPal where you can enter your payment information.</small></p> </div> <?php endwhile; endif; ?> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> Next you need to create a page in WordPress, call it ‘Donate’, ‘Make A Donation’ or whatever you want the page title to be. You can leave the page content empty as we will use our template file. Scroll down to the ‘Page Template’ section and select your page template (’Donate’ in our case). Save & publish the page. Available Files Donation Form Example Donation Form – WordPress Page Template (default theme)   Hopefully this short tutorial will be of some use for you (if so, don’t forget to donate ;) ) and if you still have some questions feel free to leave a comment below. Received Donations Sun 8/17/2008, $5.00 • Saarthak, http://lughole.net/ Mon 10/13/2008, $50.00 • Armando, http://www.criteriondg.info/ Tue 2/17/2009, $2.00 • McDowell Crook Thank You!   Share this post 31 Responses to “PayPal donation form with css and jQuery for WordPress”

... Cascading Style Sheet - CSS optimieren ...... CSS optimieren Ein Website lässt sich grob......Kriterien, die für ein “gutes” CSS entscheidend sind: die Dateigröße und......Programme, mit denen sich ein CSS daraufhin optimieren lässt. Ganz gut......es eine spezielles Wordpress-CSS-Optimierungstool: Wp CSS (Habe es nicht ausprobiert, bitte......sich einen Überblick zum Thema CSS zu verschaffen, sondern auch für......Das kann man zwar mittels CSS codieren - aber gestalten muss......zum Thema: http://wiki.aki-stuttgart.de/mediawiki/index.php/CSS http://www.css4you.de http://www.psychic-seo.de/993-zen-und-die-kunst-des-css-designs/ Cascading Style Sheets - CSS optimieren Weiterführende Artikel Website optimieren - Relaunch......TrackBack 'Cascading Style Sheet - CSS optimieren'. ...

SEO-Blog | Website-Optimierung: Usability, Webdesign, Bilder Home Website optimieren Video optimieren Bilder optimieren Galerie Impressum 31. Juli 2009 Cascading Style Sheet - css optimieren css optimieren Ein Website lässt sich grob vereinfacht als eine Sammlung von Text und Medien beschreiben, die auf eine adäquate Weise vom Browser dargestellt werden. Den Text und die Medien kann man auch Inhalt nennen, und die Art der Darstellung Form. Für eine effektive Weiterentwicklung einer Website macht es Sinn, Form und Inhalt zu trennen. Auf diese Weise lassen sich ohne Probleme neue Inhalte hinzufügen. Auf der anderen Seite kann man auch Änderungen am Design vornehmen, ohne alle Seiten überarbeiten zu müssen. Aus diesem Grund wird heutzutage die Gestaltung einer Website über Cascading Style Sheets (kurz CSS) definiert. Aber wie kann man diese CSS-Datei(en) optimieren? Es gibt zwei Kriterien, die für ein “gutes” css entscheidend sind: die Dateigröße und die Übersichtlichkeit. Meine CSS-Tipps stehen vermutlich in keinem Handbuch, und werden vermutlich (zum Teil) von den Fachlauten zerrissen werden. Ich schreib sie trotzdem auf, weil sie einfach nach meiner Erfahrung sinnvoll sind… Die CSS-Washing-machine Mein erster CSS-Optimierungstipp ist gar keiner, sondern eine Bitte an alle pfiffigen Programmierer. Was wirklich fehlt ist eine CSS-washing-machine. Also ein Programm, mit dem man überflüssigen Code aufspüren kann. Eine Software, die alle CSS-Definitionen abscannt - und zwar nicht auf einer Seite (wie es eine Firefox-Extension kann), sondern bezogen auf die gesamte Site. Denn viele styles kommen ja nur auf bestimmten Seiten vor. So was fehlt mir, ich habe noch keine gute und sichere Lösung gefunden. Vielleicht schreibt ja jemand beim Webmasterfriday darüber und gibt mir den entscheidenden Tipp. Eindeutige Bezeichner zum besseren Aufräumen Viel Arbeit mit Aufräumen Ein wesentliches Problem bei CSS-Dateien ist sicherlich die Dateigröße. Nichts ist schlimmer als ein über die Jahre vollgerumpeltes CSS. Aber oft ist es so. Auch ich ergänze laufend hier und da Kleinigkeiten. Aber zum richtigen Aufräumen komme ich selten. Eine effektive “CSS-wasching-machine” (wie oben beschrieben) kenne ich leider nicht. Ich räume immer von Hand auf, mit der Suchfunktion. Und das nervt. Aber muss aben ab und zu mal sein. Das funktioniert jedoch nur, wenn man CSS-Bezeichner hat, die wirklich eindeutig sind. Denn dann kann man nach diesen Namen sidewide suchen (btw: ich benutze seit Urzeiten Dreamweaver, mit dem ich auch ganz zufrieden bin). Wenn der Name nur noch in der CSS-Datei gefunden wird, kann man ihn getrost löschen. Aber wie gesagt: es geht nur, wenn der Bezeichner eindeutig ist. Es macht daher Sinn, ein Kürzel voranzustellen, also zum Beispiel: “.tsb_search” - (tsb für tagseoblog). Leerzeichen löschen? Leerzeichen (space) löschen? Wenn man eine CSS-Datei durch den CSS-Valitator des W3C jagt, wird am Ende des Checks die CSS-Datei noch mal aufgelistet. Wie man sieht, sind dort irre viele Leerzeichen eingefügt, die überflüssig sind. Ein Leerzeichen ist ein Zeichen wie jedes andere, es braucht auch Speicherplatz. Bei längeren Dateien läppert sich darüber ganz schön was zusammen. Hierfür gibt es viele Programme, mit denen sich ein css daraufhin optimieren lässt. Ganz gut und sauber finde ich CSS-Tidy. Damit wird der CSS-Code gesäubert. Neben den überflüssige Leerzeichen werden auch andere Details wie z.B. überflüssige Padding- und Margin- Nullen gesäubert. Das bringt meistens immerhin ein paar Prozent weniger Dateigröße. Für Leute, die ein Wordpress-Theme benutzen und ihre CSS-Datei nie angefasst haben, gibt es eine spezielles Wordpress-CSS-Optimierungstool: Wp css (Habe es nicht ausprobiert, bitte bei negativen Erfahrungen kurz kommentieren). In dem Zusammenhang geht mir der CSS-Compressor dann doch etwas zu weit. Er löscht nämlich nicht nur überflüssige Leerzeichen, sondern auch die Zeilenumbrüche. Das geht zuweit! Womit ich beim zweiten Punkt wäre: css Formatierung Eine übliche, anerkannte und saubere CSS-Formatierung sieht so aus - für jede Definition eine neue Zeile. body  { margin:0; padding:0; background:#fff; color:#433; font-family:Verdana, Arial, Helvetica, sans-serif; } h1 { padding:0; margin:0; text-indent:-9999px; font-size:1em; } ... Auch wenn es so richtig ist - ich arbeite anders. Ich hasse es einfach, während der Arbeit ständig hoch und runter zu rollen. Ich habe gerne möglichst viel Code zur gleichen Zeit im Blick. Ich formatiere meine CSS-Dateien daher so: body  { margin:0; padding:0; color:#433; background:#fff; } h1 { margin:0; padding:0; color:#093; font-size:1em; } ... Das erklärt sich vielleicht auch aus meinem Arbeitsplatz: ich habe zwei Screens mit 1600 x 1200 Pixeln Auflösung. Auf einem ist immer nur der Quelltext, auf dem anderen die Vorschauseite. Mit “meiner” Formatierung passen meist 50% oder mehr auf den sichtbaren Screen. Ich bin dadurch wesentlich schneller beim Arbeiten. Wenn ich in einem laufenden Projekt eine CSS-Datei jemandem anderen übergeben muss, schicke ich die Datei schnell durch CSS-Tidy und ab damit. Wenn ich eine normal fromatierte CSS-Datei bekomme, dann ebenfalls schnell durch CSS-Tidy und anschließend die Umbrüche durch ein Leerzeichen ersetzen. Redundanzen vermeiden Redundanz ist die Wiederholung einer bereits gesetzten Information. Bei mir tritt der Fall am häufigsten bei Farben auf. Beispiel: die Fareb blau soll in drei verschiedenen Layer als Hintergrundfarbe erscheinen. Dann kann man das so schreiben: .tsb_layer_1 { ..., margin:0; padding:0; background:#ff0; } .tsb_layer_2 { ..., margin:0; padding:0; background:#ff0; } .tsb_layer_3 { ..., margin:0; padding:0; background:#ff0; } oder man schreibt die Layer-definitionen ohne Farbwert. Stattdessen legt man für die Farbe eine eigene Klasse an. .tsb_color_blue { background:#ff0; } In den entsprechenden Tags setzt man dann einfach zwei Klassen ein (”multiple CSS-Klassen“): <div class="tsb_layer_1 tsb_color_blue">... Durch dieses Prinzip kann man, je nach dem, auch eine ganze Menge Code sparen. Wie wichtig ist die Backgroundcolor? An diesem Punkt bin ich mir unsicher. Einerseit gibt der Validator bei jeder Klasse oder ID, bei der eine Textfarbe gesetzt ist, eine Warung aus, wenn die Hintergrundfarbe nicht gesetzt ist. Es wäre also sauberer, immer auch den Hintergrund zu definieren. Aus besagten Dateigrößen-Überlegungen mache ich das aber nicht. Ich bemühe mich stets, nur die relevanten Formatierungen zu setzen. Was meint ihr? CSS-Design - von der Pike auf lernen css Design Buch Cover Dieser Artikel war mal ungefähr zehn mal so lang. Ich habe dusseligerweise eine Art “Einführung in die CSS-Technologie” begonnen und bin dann von Hölzchen aufs Stöckchen gefallen (oder wie man so sagt). Ich hab das alles wieder gelöscht. Denn es war zuviel und fehl am Platz. Ich möchte stattdessen auf eine sehr gute Einführung in das Thema hinweisen.  Nein, ich möchte sie sogar empfehlen: CSS-Design - Das Buch - von Heiko Stiegert (Webstandard-Blog) - Galileo-Design Verlag Es ist nicht nur für Einsteiger gut geeignet, sich einen Überblick zum Thema css zu verschaffen, sondern auch für Fortgeschrittene eine gute Möglichkeit, das Bekannte zu überprüfen und eingeschliffene Unsauberkeiten zu optimieren. Daneben werden viele konkrete Beispiele erläutert, wie man seine Seiten schnell und effektive attraktiver und damit erfolgreichen machen kann. Naja, ihr könnt das alles direkt bei ihm nachlesen: http://webstandard.kulando.de/static/css-design Fazit: CSS-Optimieren Die von mir genannten Punkte beziehen sich alle nur auf den Code. CSS-washing-machine (fehlt!) Eindeutige Bezeichner Leerzeichen löschen Redundanzen vermeiden (multiple CSS-Klassen) Backgroundcolor weglassen (?) Unter dem Stichwort CSS-optimieren kann man natürlich auch “Design optimieren” verstehen. Das ist mir jedoch etwas zu weit gefasst. Das adäquate Design einer Website hängt natürlich immer auch vom jeweiligen Inhalt ab. Das kann man zwar mittels css codieren - aber gestalten muss letzlich immer ein Auge (bzw. zwei) … Externe Links zum Thema: http://wiki.aki-stuttgart.de/mediawiki/index.php/CSS http://www.css4you.de http://www.psychic-seo.de/993-zen-und-die-kunst-des-css-designs/ Cascading Style Sheets - css optimieren Weiterführende Artikel Website optimieren - Relaunch oder permanent? Google ist behindert - Barrierefreiheit für Mensch und Maschine Neues Wordpress theme: Mondrian Style Tags: Cascading Style Sheets, CSS, CSS-Design, CSS-Formatierung Kategorie: Webdesign | 9 Kommentare bisher RSS Feed abonnieren oder TrackBack 'Cascading Style Sheet - css optimieren'.

... Membuat Objek Transparan Memakai CSS ......Tadinya thom tidak tahu kalau CSS bisa digunakan untuk manipulasi objek...... Membuat Objek Transparan Memakai CSS ” Thanks...! ...

Pasang iklan di Hakimtea.com? Murah-meriah-mantabs euy!!! Klik disini!
| Next Ads »
Home
About Kontak Free Webtools Privacy Policy Blogpage Pasang Iklan Cek Pagerank
Tools
Sitemap
Tell a Friend
Hakimtea Dot Com
Personal Blog About Blogging, Business, Make Money Online, Travel and Technology
← Trik Ringan Masuk 5 Besar di Search Engine Google
Memperbaiki Kesalahan Submit Sitemap Blogger →
Membuat Objek Transparan Memakai css
05.05.2009 by Hakimtea in
Artikel Kontes, Tips
if(typeof(hyperweb_adcount)=="undefined") hyperweb_adcount =1;
if(typeof(hyperweb_adcount)=="undefined") hyperweb_adcount =1; Siapa bilang transparan hanya dimiliki oleh software pengolah gambar, semacam Adobe Photoshop. Kita ternyata bisa menyerahkan urusan itu pada CSS, dengan kemampuannya dalam membuat transparan objek atau elemen halaman web. Tadinya thom tidak tahu kalau css bisa digunakan untuk manipulasi objek sampai pada taraf itu. Tidak sampai berpikir ke tahap itu. Sampai pada suatu saat, thom berkesempatan blogwalking dan mampir ke sebuah blog yang navbar buatan blogger tersebut transparan. Nah, sekarang langsung saja praktek bagaimana menampilkan objek ditampilkan transparan. Misal kita akan membuat transparentcy 50%, cukup tambahkan properti seperti berikut : /*contoh seting transparentcy di stylesheet*/ .namakelas [ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } atau bisa juga menambahkan secara manual di setiap objek atau tag yang diingini dengan menambahkan : style=”filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;” Misalkan diimplementasikan pada tag img : <img src=”http://blablabla.com/blabla.gif” style=”filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;”/> Keterangan : properti filter:alpha(opacity=50); Ini merupakan setingan pada browser IE properti -moz-opacity:0.5; Kalau ini, digunakan untuk browser ‘jadul’ seperti Netscape. properti -khtml-opacity: 0.5; Untuk yang satu ini, diterjemahkan oleh Safari versi ‘jadul’ 1.x. properti opacity: 0.5; Kalau yang ini, merupakan yang paling penting. Properti ini bisa diterjemahkan oleh Firefox, Safari dan Opera. Note : Yang harus diperhatikan, untuk berjaga-jaga, keempat properti tersebut sebaiknya ditulis. Tidak hanya dicomot salah satu hanya karena kita hanya butuh misalnya yang properti opacity: 0.5; saja. Kita tidak bisa memastikan orang yang membuka web/ blog hanya berasal dari satu browser saja bukan? Artikel Kontes Blog 1 Tahun Hakimtea.com Judul : Membuat Objek Transparan Memakai CSS Penulis : thom Blog : http://thom-sharing.blogspot.com var addthis_pub = 'mkoswell'; var addthis_language = 'en';var addthis_options = 'email, favorites, digg, delicious, myspace, google, facebook, reddit, live, more'; Popularity: 1% [?] if(typeof(hyperweb_adcount)=="undefined") hyperweb_adcount =1;
if(typeof(hyperweb_adcount)=="undefined") hyperweb_adcount =1;
Related posts :
Menara Masjid Raya Bandung Dini HariJam menunjukkan pukul 01:30 dini hari, setelah update blog rasaMaaf, Saya Sudah Tidak Percaya (lagi) Kapanlagi.comPostingan kali ini bukan seperti postingan yang lalu, dan postinganFasterfox 3.0.4 Membuat Firefox Lebih Cepat (lagi)Dulu saat pertama firefox 3.0.0 muncul banyak add-on yang tidakBagaimana Agar Blog Tampil Menarik…?Beberapa pertanyaan masuk baik melalui komentar maupun lewat shoutbox yangMundurnya Blogger TerpanasSiapa yang tidak kenal nama ZALUKHU, blogger Nias satu ini
Dapat bocoran artikel Hakimtea.com terbaru via email.. Mau..?
Email:
Subscribe to get the latest update via RSS Feed or email!
Trackback URI |
Comments RSS
9 comments for “
Membuat Objek Transparan Memakai css ” Thanks...!

...Fresh! Um, er, ahh, WHAT??? » Its CSS Naked Day Tagged and Bagged: CSS,......must have forgotten that it’s CSS Naked Day.  This blog will......blog will be stripped of CSS styling for April 9th all...

Another Opinion Among Many
…but I’m right!…and coming to you live, at times
Home
Privacy/Terms Archived Blogs/Links Pics
Sitemap
« Its Cold but its So Fresh! Um, er, ahh, WHAT??? » Its css Naked Day Tagged and Bagged: CSS, nakedness, web standards Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.Powered by WP Greet BoxIn case you wonder why there is no “style” to this website today (actually for 48 hours), you must have forgotten that it’s css Naked Day.  This blog will be stripped of css styling for April 9th all over the world (hence the 48 hour ‘nakedness’). “The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.” Why not participate yourself? Could Be RelatedWhere’s All the Pretty Style?Ask the DustBasic Instinct 2 This entry was posted on 8 April 2009 at 12:14 pm and is filed under Geeky---run-now. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. 7 Comments

Please login and upgrade account to follower level 3 to gain access to this link and others with PR 3 and bellow that.

Home. Social. Contact. Hire Me. Archives. Terms of Use. Web Design Wordpress CSS Downloads Links Follow me on Twitter 21Jan2008 css Gradient Text Effect Author: daniWeb designer/front-end web developer who hugs trees, loves animals, and is totally addicted to social media. :) Find me @ danimcdaniel.com or tweet me @dani! Hi there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic. Check out this cool new trick by Web Designer’s Wall that creates fancy gradient headings using CSS. css Gradient Text Effect Related posts: css Text Wrapper One pixel notched corners as used by Google Analytics Font Viewer Change the style of selected text 8 fonts you probably don’t use in css, but should Category: CSS, Web DesignBookmark or Sharea2a_linkname="Anidan Design";a2a_linkurl="http://anidandesign.com/web-design/css-gradient-text-effect/";a2a_onclick=1;a2a_num_services=22;a2a_color_main="e02b6b";a2a_color_border="181818";a2a_color_link_text="181818";a2a_color_link_text_hover="181818"; « Chmod Tutorials css Text Wrapper » 1 Comment