Posts

Showing posts with the label css

Simple html css tooltip.

Simple html css tooltip. this is html css tooltip which is faster than jquery or javascript tooltip simple code and paste this code in file and hover on link <!-- css code --> <style>   .tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: pointer; text-decoration: none; position: relative; } .tooltip span { position: absolute; display:none; } .tooltip:hover span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; display:block; } .tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; display:block; } .toolt

Why my bootstrap css is not working on mobiles?

Bootstrap css is not working on mobiles when all is fine in your  Bootstrap  html code. and when you open your site on mobile then it shows as  it shows onn your pc. and you still you are frustrate that why  Bootstrap css  is not working. so please check your meta tag did you add this code in of head tag of html <meta name="viewport" content="width=device-width, initial-scale=1.0" />  most of the people when create Bootstrap css the forgot to add this on head tag in html thats why this css not working on mobiles browser so add this code in head tag of html code  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

How to add jquery vertical left panel slider?

Image
Many people says that they want a good left panel and they want that when they select any menu then submenu should be open in slow motion vertically. So here is the code of left panel slider with jquery and css with some screen shot. You can also edit them according to you need. On the first view left panel will look like this If you move your cursor on it than look like this If you click any option then it opens the submenu like this Here is the code simply copy and paste this code in your page and run // Code start from here <style> body {     font-family: Helvetica,Arial,sans-serif;     font-size: 0.9em; } p {     line-height: 1.5em; } ul#menu, ul#menu ul {     list-style-type: none;     margin: 0;     padding: 0;     width: 18em; } ul#menu a {     display: block;     text-decoration: none; } ul#menu li {     margin-top: 1px; } ul#menu li a {     background: none repeat scroll 0 0 #F5ECF5;     border: 1px solid #D7C2D7;

ul li horizontal css menu?

How to create ul li horizontal menu for header in html <style> ul { list-style-type: none; margin: auto; } li { float:left;} </style> <ul> <li>Home |&nbsp; </li> <li>about us |&nbsp; </li> <li>Help </li> </ul>

how to use an image as a reset button in html?

if  you want to use an image as reset button so you have to call a predefined function of javascript on onclick event. simply copy and paste this code in your page and change the image path... <input type="image" src="images/reset-btn.png" onClick="this.form.reset();return false;">

JavaScript tabifier, tabbed change on button click

Image
Automatically create an HTML tab interface using JavaScript. In this code you will change the data dynamically in tabbing. Simply copy this code and paste on your html page. <script language="javascript"> function firstblock() {     var ele = document.getElementById("1stblock");             document.getElementById("firsttab").style.backgroundColor="red";         document.getElementById("secondtab").style.backgroundColor="black";         document.getElementById("thirdtab").style.backgroundColor="black";         document.getElementById("2ndblock").style.display="none";         document.getElementById("3rdblock").style.display="none";         document.getElementById("1stblock").style.display="block";         } function secondblock() {     var ele = document.getElementById("2ndblock");     if(ele.style.display

How to make CSS Rounded Corners?

How to make CSS Rounded Corners? Here is a simple solution to make rounded corner... <div style="width:200px;color:#111111;border:2px solid #CCCCCC;padding:5px;-moz-border-radius: 15px;border-radius: 15px;">sagar</div> Note=> this code will not work in Internet Explorer