birghtyoursite » w3c valid

nice web font with google font api

admin — Fri, 28 May 2010 11:25:01 +0000

Are you still use flash and images for the art font in your web? if so you should know the magic of Google Font Directory and Google Font API , you can use all the font in the Google Font Directory , also it’s very easy to install.

What’s google font api

Google Font API helps you add Google Font Directory web fonts to any web page.It provide high quality open source fonts,works in most browsers,also as other gooles services it’s very easy to use.

Add google font api to your site

First,you need add the google font css,for instance:

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

this import the Tangerine font style,but if you want to use multiple fonts,for example you need add 1 more font Inconsolata,the css link should be

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata">

then you need apply the css style to the element you want

CSS selector {
  font-family: 'Font Name', serif;
}

or use a inline css

 style="font-family: 'Font Name', serif;">Your text>

let’s see a live sample

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/* add this in the header*/
 
  style="font-family: 'Tangerine', serif;font-size:36px">Making the Web font  looks nice!>
/* add this in the body */

result is:

Making the Web font looks nice!

this sentence is ordinary text, so it will not effect the other style (like color,text-shadow….) you add for this sentence .

Complex sample

I think you may love it now,let’s see what’s more the google font api can do?The google font api provide more options for the font style, like italic or bold,here is the rules
"
To request multiple font families, separate the names with a pipe character (|).
the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,)
"
also for weights, you can alternatively specify a numerical weight; for example

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold|Tangerine:700

this means load Cantarell italic font ,Droid+Serif blod font and Tangerine font with font weight 700.
the live sample

 style=" font-size:30px ">Enjoyed it,Happy reading!>
 style="font-family:'Droid Serif';font-size:30px ">Enjoyed it,Happy reading!>

Enjoyed it,Happy reading!

css hacks for chrome firefox ie6 ie7 ie8

admin — Fri, 15 Jan 2010 07:50:40 +0000

When coding cross-browsers css xhtml layout,sometimes we may meet some pain css problem and cost much time . Fortunately, there are some css hacks for us :

/*---google chrome hack---*/
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   /*----css codes for google chrome------
   #sboxes li h2 
    {
      font-size:17px;
     padding-left:7px; 
      }
*/
}

sometimes , only ie6 have layout problems ,so i aways use quick ie6 hack,add a "e;_"e;to the css, for instance:

  #content
  {
      padding:10px;
    _padding:5px;/* --- for ie6 css ----  */
  }

those above 2 hack is most used.There are some other css hacks:

css hack for ie7 :

*+html selector { property: value; }

this hack can pass w3c validation!

css for ie6,ie7,ie8

* html selector { property: value; }

this hack also can pass w3c validation!

css hack for only ie8

property: value\0

The simple ul li css SEO friendly horizontal menu

admin — Sun, 10 Jan 2010 15:27:28 +0000

In this part we will use ul li css code some simple but usefull seo friendly menu.First let’s start with a Horizontal Menu with rollover image . we will use images,but most important is we need make it seo friendly.

ul li css SEO friendly simple horizontal menu

We need prepare 2 images. one for normal menu background while another for hover & current menu background.That’s all , very simple . Let’s look the HTML codes frame:

 id="navs">
>
> alt='Home' src='images/normalbg.jpg' /> href=''>Home>>
> alt='Portfolio' src='images/normalbg.jpg' /> href=''>Portfolio>>
> alt='Services' src='images/normalbg.jpg' /> href=''>Services>>
> alt='Projects' src='images/normalbg.jpg' /> href=''>Projects>>
> alt='Articles' src='images/normalbg.jpg' /> href=''>Articles>>
> alt='Contact' src='images/normalbg.jpg' /> href=''>Contact>>
>
>

Related css codes:

 #navs ul
 {
	 margin:0px;
	 padding:0px;
 }
 #navs ul li
 {
	float:left;
	display:inline-block;
	list-style:none;
	height:46px;
	position:relative;
	background:url(images/menuover.jpg) repeat-x left top;
 }
 #navs ul li a
  {
	 position:absolute;
	 display:block;
	 line-height:46px;
	 height:46px;
	 width:131px;
	 text-align:center;
	 left:0px;
	 top:0px;
	 text-decoration:none;
	 color:#1F1E1E;
  }
 #navs ul li:hover img
  {
	visibility:hidden;
  }

Click here to see the live demo .

IE6 below Issue
If you have IE6 , You may noticed that this menu rollover image function not work in IE6 and below .
What’s the solution:
We need use Third-party approach : The csshover3.htc . Add it to the same folder of css , then add this line “behavior: url(“csshover3.htc”);” to #navs ul li .So it should like this :

 #navs ul li
 {
	float:left;
	display:inline-block;
	list-style:none;
	height:46px;
	position:relative;
	behavior: url("csshover3.htc");
	background:url(images/menuover.jpg) repeat-x left top;
 }

But this cause a inssue : the css can’t pass w3c valid .i tried many ways , but didn’t figure it out. if someone have a more good solution,please let me know. Click here to see the final version .DownLoad HERE .

How to code a w3c valid 2 columns xhtml layout–step 2

admin — Fri, 11 Dec 2009 15:39:39 +0000

In the first part,we aready done the 2 columns layout frame.
Let’s go on, add elements to each sections also style it and finish the html template.

First the header , usually the header include the blog name and description sometimes maybe have a login box or search box . ok , let’s add it .

    id="header"> 
       id="headtxt">
       id="blogname">  id="A1" href='http://www.brightyoursite.com'> Bright Your Site >> 
       id="blogdesc">Professional Css Xhtml business -- w3c valid css xhtml 2 columns layout >  
      >
       id="searchbox"> class="inputbox"  />   id="gobtn"  type="button" />> 
  >

Check the codes,you can see we add blog name ,blog description and a search box.the blog name is the most important,that’s why i use h1 tag (for SEO optimise) so dose blog description.Usually,the blog name , description should be the left and the search box right.ok,let’s see how it be styled in the css .

/*-- begin header --*/
#header
{
  height:100px;
}
 
#headtxt
{
	float:left;
}
#blogname
{
   padding:0px; 
   margin:20px 0px 0px 15px; 
}
#blogname a
{
	text-decoration:none;
	color:#d4242b;
	font-size:28px;
}
#blogdesc
{
	font-size:14px;
	color:#333;
	margin:15px 0px 0px 15px; 
}
#searchbox
{
	float:right; 
	padding:0px;
	vertical-align:middle;
	margin:30px  5px 0px 0px;
	height:30px;
	line-height:30px;
	border:solid 1px #900;
 
} 
.inputbox
{
	width:150px;
	border:0px;
	height:20px;
	padding:5px 0px;
	float:left;
	margin:0px 0px 0px 2px;
	font-size:13px;
	font-size:16px;
	color:#000;
 
}
#gobtn
{
    background:url(images/go.png)  no-repeat;
    border:0px;
     width:47px;
     height:30px;
     overflow:hidden;
}
/*-- end of header --*/

The most important part is the Main Content, in this section we will list all articles here .
it’s simple and easy to code .Let’s see the html codes:

  class="item_head">
     class="item_header_text">> href=''>title here>>>	
 >
  class="item_description">
   content here
   class="tags" >Tags:> tags here>>
   class="author">Gepost door >admin> in: >tags here> >
 >

the post title is the essence of the post , so we need h1 tag it ( you know why , check the header section ) . for the content we just need need add space , font-size , color … . Of course , we also can add post date , tags , author … in the list . the style codes :

/*-- begin main content -- */ 
#maincontent
{
   width:580px; 
   float:left; 
   margin-left:20px;
}
.item_head
{
	border-bottom:solid 1px #8d0b03;
	height:33px;
    margin-top:20px;
}
.item_header_text
{  
font-size:12px;
font-weight:bold;
line-height:36px; 
display:inline-block;
float:left;
background:url(images/tlbg.png) repeat-x; 
}
.item_header_text a
{
  padding:0px 10px;  
  display:inline-block;
  background:url(images/tacorner.png) no-repeat right top;
  font-size:14px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
}
.item_header_text h1
{ 
  display:inline-block;
  background:url(images/tbefore.png) no-repeat  left top;
  padding:0px;
  margin:0px;
}
.item_description
{
	color:#333333;
	line-height:18px;
}
.item_description p
{
	margin:5px 0px 10px 0px;
	padding:0px;
}
.tags ,.author
{
	color:#696969;	 
	 line-height:16px; 
}
.author
{
   height:25px;
}
.tags span ,.author span
{
	color:#9a1209;	
}
.tags  a,.author span a
{
	 color:#9a1209;	
	 text-decoration:none;
}
/*-- end of main content --*/

The right content aways are Archives , Categories , Blogroll …. .We can do it just use ul li list .

>
    >
     >Links>
     >
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     >
  >
  >
     >Links>
     >
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     >
  >
  >
   >Tags>
   >Ajax> >Cat> >Wordpress> >Template>
  >
  >

The css is also simple

/*-- begin right content --*/
#rightcontent
{
   width:240px;
   float:right; 
   margin-right:10px;
}
#rightcontent ul
{ 
	padding:0px;
	margin:0px;	
	color:#000;	 
	margin-top:10px;
}
 
#rightcontent ul h2
{ 
	 margin:0px;
	 padding:0px;
}
#rightcontent  li 
{
    height:auto;
	line-height:25px;
 
}
 
li
{
  list-style :none;   
}
a
{
    text-decoration:none;
}
#rightcontent  li ul li
{  
	background:url(images/arrow.png) no-repeat left 5px;   
	padding:0px 0px 0px 13px;
	list-style:none;
	line-height:18px;
}
#rightcontent  ul li img
{
	vertical-align:middle;
}
#rightcontent ul  li h2
{
	margin:0px 0px 5px 0px;
	padding:0px;
	font-size:14px;
	line-height:30px;
	background:url(images/dot.jpg)  repeat-x left bottom;
 
}
#rightcontent  ul li a
{
	 color:#9a1209;	
	 font-size:12px;
	 text-decoration:none;
	 line-height:20px;
	 font-weight:600;
	 font-weight:normal;
	 vertical-align:middle;
}
/*-- end of right content --*/

At last , add some links and copyright to the footer to finish it.

 id="footer">
     href='/'>Home> |   href='/'>Portfolio> |  href='/'>Services> |  href='/'>Projects> |  href='/'>Articles> |  href='/'>About> |  href='/'>Contact>
    > © 2009 www.brightyoursite.com All Rights Reserved.>
  >

/*-- begin footer --*/
#footer
{
   height:82px; 
   clear:both;
   text-align:center;
   background:url(images/footer_bg.png) repeat-x;
   line-height:35px;
   vertical-align:middle;
   font-weight:bold;
   color:#E9E9E9;  
   margin-top:20px;
}
#footer a
{ 
   color:#E9E9E9;   
   text-decoration:none; 
   display:inline-block;
    margin:0px 5px;
}
#footer h1
{ 
   font-size:12px;
   font-weight:lighter;
   padding:0px;
   margin:0px;
}
/*-- end of footer --*/

Up to now,we add most of the elements.let’s see the final result click here .

Now, you may notice there is important part missed.The Menu. This is also important to a site .there is tons of menus . So next lession we will introduce the ul li css seo fridenly menu . Click here to go directly:

The simple ul li css SEO friendly horizontal menu

And

ul li css none-js SEO friendly sub-menu

How to code a w3c valid 2 columns xhtml layout–step 1

admin — Fri, 20 Nov 2009 15:23:25 +0000

First,let’s have a overview of the 2 columns xhtml layout.There are five sections : Header (include Logo,Blog Name,Blog Description …),Top Dropdown Menu,Main Content,
Right Content and Footer

Let’s make this template:

fixed-width:875px
Tableless, W3C-compliant xhtml1-transitional(also can be xhtml1-strict)
Cross Browsers and tested in all browers, such as IE6,IE7, IE8,Firefox 2,3 , Google chrome, opera and Safari.

Ok,Lets start right now:


 xmlns="http://www.w3.org/1999/xhtml" >
>
    >2 columns xhtml layout frame>
     href="frame.css" rel="stylesheet" type="text/css" />
>
>
 id="wrapper">
   id="header">>
   id="menus">>
   id="maincontent">>
   id="rightcontent">>
   id="footer">>
> 
>
>

Check the above the html code.the first line we define DTD xhtml1-transitional ，and then in the head add a Extenal css frame.css.In the body we defined the five sections in a container wrapper.now lets see whats in the frame.css

body
{
  margin:0px;
  padding:0px;
}
#wrapper
{
  width:875px;
  margin:auto;
  overflow:hidden;
}
#header
{
  height:100px;
}
#menus
{
  height:37px;
}
#maincontent
{
   width:600px; 
   float:left; 
}
#rightcontent
{
   width:250px;
   float:right;
 }
#footer
{
   height:82px; 
   clear:both;
}
 
/* --- the codes below just help you to see the frame,those code will be delete and the end --*/
 
 
#header
{
  background:#f80;
}
#menus
{
  background:blue;
}
#maincontent
{
  background:green;
  height:500px;
}
#rightcontent
{
  background:#f90;
  height:500px;
}
#footer
{
  background:#666;
}

In order to see the each section i add background color and height. click here to see the result.You may notice there is a blank space between the maincontent and the rightcontent.Yes,Usually there is a space between the main content and the right content,u can change the main content width to change the space.

whats next we need to do? its just a frame and can’t use to as a template,lets go ahead,add some decorations to each element.look the following codes,we will add some background image ,border color etc ..

body
{
  margin:0px;
  padding:0px;
  background:url(images/pagebg.gif) repeat-x;
}
#wrapper
{
  width:861px;
  margin:auto;
  overflow:hidden;
  padding:0px 7px;
  background:url(images/wrapperbg.png) repeat-y;
}
#header
{
  height:100px;
}
#menus
{
  height:37px;
  background:url(images/menu_bg.png) repeat-x;
}
#maincontent
{
   width:600px; 
   float:left; 
}
#rightcontent
{
   width:250px;
   float:right; 
}
#footer
{
   height:82px; 
   clear:both;
   background:url(images/footer_bg.png) repeat-x;
}
 
/* --- the codes below just help you to see the frame,those code will be delete and the end --*/
 
#maincontent
{ 
  height:500px;
}
#rightcontent
{ 
  height:500px;
  border-left:solid 1px #ddd;
}

click here to check the result . good , like magic , it looks better now . if you look at the css carefully,you may find a the wrapper “width:861px;” its not 875 px.thats beacuse add 7px padding left and right to wrapper , it’s 7px + 7px + 861px = 875px .

Finally , we will convert this template to wordpress theme . Frame aready done , what’s next we need to do now . Of course add elements to each sections . Go on How to code a w3c valid 2 columns xhtml layout–step 2 , it’s nearly done !!!

Make a wordpress template step by step

admin — Fri, 20 Nov 2009 15:16:27 +0000

User need have basic css xhtml and php knowledge.just follow the steps , you will be wordpress theme expert .