CSS AnarchyI am freedom

Added new menu on main site

Today i add new menu on my site.This menu open my portfolio page.I hope you guys like this page.

Comments (2)

CSS Negative margins

Defining CSS layouts with negative margins requires a high level of precision to ensure that all siblings are cleared effectively.
A number of people suffer under the misconception that negative margins are in some way a hack; they are not. In fact negative margins are valid CSS and extremely useful in certain situations. They only become a hack if you are using them to fix an error that you have made elsewhere. In normal usage negative margins work quite well and are supported across modern browsers.

I love to use negative margins in my designs.This allowed me to work with position easy with my css style.You can use this example for your testing:

#menu {
      margin:-20px auto;
      
}

In this case i use margin -20 in my menu.This margin move my menu up for 20px.If you set margin without negative value like this:

#menu {
      margin:20px auto;
      
}

your menu going to be moved down 20px.You can use negative margin in any of margins 0px 0px 0px 0px.However, there are issues if you use negative margins on the opposite side of a float (e.g. floating left and then using a negative margin on the right) although most modern browsers now behave the same way when this happens.

I hope this article help you to understand how negative margins work.

Do not use negative element in PADDING "period".That is illegal element and your site not going to be validate

Comments (0)

How to create awesome menu

In this tutorial you going to create some awesome menu.
This is one of my favorite menu i like to use in my designs.
Menu like this looks great in any designs and is easy to create with no to much hassle.
Lets start:

In your css style you have to insert this code:

#menu {
      margin:0px auto;
      padding:10px 0 0 0px;
}



#menu ul {
      margin:0;
      padding:0; 
}



#menu ul li {
     display:block;
     padding:0; 
     float:left;
     text-align:left;
     margin-right:2em;
}



#menu li a { 
     color:#000;
     font:bold 14px arial;
     text-decoration:none;
     line-height: 1.3em; 
     display:block; 
}



#menu li a:hover { 
     color:#fff; 
}



#menu li span { 
     font:11px arial; 
     color:#fff; 
     margin:0; 
}



#menu li span:hover  {
     color:#000;
}

I guess you have this without problem.
Now go ahead and open your html file.
In your html file you need to insert this code:

<div id="menu"> 

<ul>
<li><a href="#">Menu01<br /><span>Short description</span></a></li>
<li><a href="#">Menu02<br /><span>Short description</span></a></li>
<li><a href="#">Menu03<br /><span>Short description</span></a></li>
<li><a href="#">Menu04<br /><span>Short description</span></a></li>
<li><a href="#">Menu05<br /><span>Short description</span></a></li>
</ul>

             </div>

Congratulations!!! you just create some awesome menu.
I just hope you just learn something from this tutorial.
Enjoy the beauty of this menu.;)

Comments (0)

First letter using diferent color and style

If you want to style first letter different then other on your site you have to apply some css code in your css style.
I use that on my web site as you can see.
I use next code:

#maincontent .right_side h2:first-letter {
font-family : "Times New Roman", times, serif;
font-size : 24px;
font-style: italic;
color : #a7c44e; 
}

Example: i use this combination to make my first letter different color in my case Green color on right side at h2 tag.
You can play with this code any way you want to sweat your needs.
This code work with all modern browsers.
I hope you learn something new today ;).

Comments (2)