Programming forum

Monday, 19 January 2015

Dropdown Menue in css and html

Dropdown Menu in HTML and CSS.

Aslam u alikum friends today i am going to explain you how to create a professional drop-down menu using html and css.
See fig.1 below

(Fig. 1)

1. Now open your text editor which ever you have.
2. past all of the below code in your text editor document.

<html>
	<head><title>DropdownMeue</title>
	<style type="text/css">
	*{margin: 0px;
	padding: 0px;}
	body{font-family: verdana;
	background-color: #ABC;
	padding: 50px;}

	/rules for navogation menue/
	/* ==========================*/

	ul#navmenue{

	list-style: none;
	}
	ul#navmenue,ul.sub1,ul.sub2{
	list-style-type:none;

	}
	ul#navmenue li{

	width: 125px;
	text-align: center;
	position: relative;
	float: left;
	margin-right: 5px;
	}
	ul#navmenue li a{
	text-decoration: none;
	display: block;
	width: 125px;
	height: 25px;
	line-height: 25px;
	background-color: #FFF;

	border-radius: 5px;
	}
	ul#navmenue .sub1 a{
	margin-top: 5px;
	}
	ul#navmenue .sub1 li{

	}
	ul#navmenue .sub2 a{
	margin-left: 10px;
	}
	ul#navmenue li:hover>a{
	background-color: #CFC;
	}
	ul#navmenue li:hover a:hover{
	background-color:#FF0;
	}
	ul#navmenue ul.sub1{
	display: none;
	position: absolute;
	top: 26px;
	left: 0px;
	}
	ul#navmenue ul.sub2{
	display: none;
	position: absolute;
	top: 0px;
	left: 125px;
	}
	ul#navmenue li:hover .sub1{
	display: block;
	}
	ul#navmenue .sub1 li:hover .sub2{
	display: block;
	}
	.downarrow{font-size: 12pt;
	position: absolute;
	top: 3px;
	right: 4px;}
	.rightarrow{font-size: 12pt;
	position: absolute;
	top: 5px;
	right: 4px;}
	</style>
	</head>
	<body>
	<div >
	<ul id="navmenue">
	<li><a href="#" id="onlink">Home</a></li>
	<li><a href="#">AboutUs</a></li>
	<li><a href="#">Products</a><span class="downarrow">▼</span>
	<ul class="sub1">
	<li><a href="#">product1</a></li>
	<li><a href="#">Product2</a></li>
	<li><a href="#">Product3</a></li>
	</ul>
	</li>
	<li><a href="#">Services</a><span class="downarrow">▼</span>
	<ul class="sub1">
	<li><a href="#">product1</a></li>
	<li><a href="#">Product2</a></li>
	<li><a href="#">Product3</a><span class="rightarrow">▶</span>
	<ul class="sub2">
	<li><a href="#">Catogry1</a></li>
	<li><a href="#">Catogry2</a></li>
	<li><a href="#">Catogry3</a></li>
	</ul>


	</li>
	</ul>
	</li>
	<li><a href="#">Contact</a></li>
	</ul>

	</div>




	</body>



	</html> 3. save it as a html document and see the result in your browser. ==========.Thanks for reading the tutorial and share with friends.=============

Wednesday, 24 December 2014

Slider in CSS and HTML without javascript and jquery.

This is improved version of the slider which was presented in the previous article.

The new version of the slider has only a couple of changes, so there is no need to describe the old slider code, only the changes. Here is the description of the old slider code:creating an image slider using only CSS3.

The current slider has three advantages in comparison with the old one:

There is no page scrolling while clicking the navigation buttons.
Now the default image also has full animation when you first time switch between images using navigation buttons.
In HTML, one element was removed to make it simpler ("slide-frame" element).

To prevent page scrolling, the targeted elements were changed from img to div tags, where div elements are placed in the same parent element as img elements (here parent element is tag div with id "slides"). Every divelement has its own neighbor - img element.

All div elements have two CSS properties:

display with value none to hide all div elements. They don't need to be displayed, because they are only used for targeting by :targed selector.
position with value fixed to turn off page scrolling. All elements with such position are positioned relative to the browser window, that is the reason why page scrolling stops working and that's what we wanted in the first place.

When div element is targeted by :target selector, the special CSS styles are applied to its neighboring imgelement which goes right after the current div element. That's the whole trick!

Here is a part of CSS code which is used to get the result:

The following CSS code displays the default image with class "default" which has to be shown when none of the images hasn't yet been selected by the navigation buttons. Meanwhile, this CSS code hides the default image when one of images is selected by the navigation buttons.

Here is the full HTML and CSS code for the new slider.

HTML code:

<!doctype html>

<html>

<head>

<title>Slider in css </title>

#image-slider {

margin: 100px auto;

width: 700px;

}

#navigation {

margin: 5px 0 0 0;

text-align: center;

z-index: 10;

}

#navigation a {

text-decoration: none;

background: #003C72;

padding: 2px 6px;

color: #FFFFFF;

display: inline-block;

border-radius:25px;

}

#navigation a:hover {

background: #0182C4;

}

#slides {

height: 375px;

overflow: hidden;

position: relative;

}

#slides img {

position:absolute;

top: 0;

left: -500px;

}

#slides img {

z-index: 1;

opacity: 0;

/* animation */

transition: all linear 400ms;

-o-transition: all linear 400ms;

-moz-transition: all linear 400ms;

-webkit-transition: all linear 400ms;

}

#slides div {

display: none;

position: fixed;

}

#slides div:target + img {

left: 0;

z-index: 5;

opacity: 1;

}

#slides img.default {

left: 0;

z-index: 5;

opacity: 1;

}

#slides div:target ~ img.default {

z-index: 1;

opacity: 0;

left: -500px;

}

.image .text {

position:absolute;

top:10px;

left:10px;

width:300px;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

Tuesday, 23 December 2014

Top 10 Software Failures in 2014

Top 10 Software Failures in 2014.

10. Software Glitch Sends Bank Statements to the Wrong People

A Swiss bank found themselves in a pinch in early 2014 when they discovered that their software system had issued end-of-the-year bank statements addressed to the wrong people. Customers of the bank reported receiving, along with their own statement, a handful of statements containing details for other bank patrons. Uh oh. You may have received your correct information, but who else received it as well? Can’t assume everyone is as nice as you.

9. Bar Exam Software Failure

In August of 2014 thousands of law students across the United States pressed “submit” on their completed exam files only to find that their tests were not being accepted by the software. None too surprisingly, the Bar Exam software now finds themselves facing multiple lawsuits filed by disgruntled would-be lawyers.

8. London Airspace Closed Due to Software Malfunction

Typically flights are canceled due to weather concerns – not software. Earlier this December an air traffic control center was forced to close London Airspace when the software managing the arrivals and departures began to malfunction. While the software was repaired and running again within record speed, the repercussions were far reaching. Heathrow reported canceling over 50 flights with multiple flights turned back to their originating destinations.

7. Faulty Casino Software Targets Compulsive Gamblers

Self-identified “compulsive gamblers” registered on a do-not-contact list with an American based entertainment and gaming company in an attempt to avoid ads that would trigger their addiction. Unfortunately their good intentions backfired when a software glitch reversed the data and sent promotional gambling emails to the very people they were trying to avoid.

6. Software Glitch Accidentally Releases Prisoners

Over 20 inmates in Dallas, Texas, were mistakenly released this past June during a software transition. The local police force claims that incorrect information within the new system misled authorities into releasing inmates facing charges from property crime to domestic violence. Dallas police stated at the time that they are working to relocate and arrest the felons.

5. Software Error Assigns Wrong Pictures to Drivers’ Licenses

Several Arizona residents received drivers’ licenses this summer that contained all the correct information…except for the picture. Investigating the issue, the problem was linked back to the camera-computer connection being used to take the license pictures – a delay in transferring the saved image resulted in the photographs being attached to the previous person’s file…and thus Jane received a license looking very much like a Bob. That is a lot worse than a bad hair day.

4. Software Malfunction Prevents Callers from Reaching 911

A third party call center that directs and assigns calls to the 911 emergency line reported a software malfunction that caused thousands of calls for help to drop on April 9th. According to reports the software used to track and assign the calls had a built-in counter that maxed out at 40 million calls. Once the 40 millionth call had been placed, the calls bottlenecked cutting off over 11 million people in over seven states from the emergency hotline.

3. Thieves Leverage Software Override to Clean Out Casinos

A software override code for a specific brand of video ROULETTE

machines was released online, prompting a coordinated group of thieves to pull off an Ocean’s Eleven-worthy heist. According to reports, the override code caused the machines to dispense money when the numbers 1-9-3-6 were pressed before pulling the lever. The robbery targeted hundreds of casinos across Germany, some casinos losing as much as €100,000 in a night.

2. Airline Software Flaw Makes Boarding Passes Accessible to Public

An international airline recently discovered a software security flaw that allows anyone with a computer and valid URL to access (and potentially change) flight boarding passes. While the airline was able to quickly issue a fix and does not believe that flight security has been compromised, the issue does raise the question of data security as air travel becomes increasingly reliant on software programs to manage their complexities.

1. Error in Bitcoin Software Leads to Market Crash

As of February 2014, Mt. Gox, a Bitcoin exchange company based in Japan, closed its doors after declaring bankruptcy, saying it could not account for its $474 million in Bitcoin and customer INVESTMENT

. While questions still remain as to the cause of Mt. Gox’s dramatic collapse, suspicions swirl that the company had been slowly bleeding funds to hackers as a result of a previously discovered “transaction malleability” flaw in the software.