birghtyoursite » xhtml

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 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 .