Navigation Bar Animation

Navigation Bar Animation - html

I am having a problem to order my navigation bar. I want to make navigation bar in horizontal style, but it's like a table now!
I found this kind of navigation bar in: http://cssdeck.com/labs/navigation-dropdown-with-flip-effect,
but it didn't show how can i make a complete horizontal navigation bar with that effect.
At the same time i need to add that i want to make my Home and About section free of drop down list!
How can i fix it? (I don't want to make my options horizontal just my About and Home bottom)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<title>Navigation Bar</title>
</head>
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼ </a>
<li class="n1">
item #1
</li>
<li class="n2">
item #2
</li>
<li class="n3">
item #3
</li>
<li class="n4">
item #4
</li>
<li class="n5">
item #5
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼</a>
<li class="n1">
item #1
</li>
<li class="n2">
item #2
</li>
<li class="n3">
item #3
</li>
<li class="n4">
item #4
</li>
<li class="n5">
item #5
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My CSS:
body {
background: #E9E9E9;
}
h2 {
text-align: center;
color: #CCC;
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}

You just need two steps:
To avoid the table effect: place all the lists under the same div instead of in two different divs as it is right now.
To place all the menu items on the same height, add the vertical-align:top; to the navigation class.
You can see it working here: http://jsfiddle.net/0essn7yv/ (I changed the width from 250px to 150px to make the menu fit better in the small screen).

Related

How do I remove whitespace from dropdown menus?

I am the senior webpage editor at my High School, and per request of the admin, we are working on a new website. I need to remove the white border around the dropdown menus I'm putting on the site.
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
table tr:nth-child(odd) {
background-color: #eee
}
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 10px auto;
background: #FF0000;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<html>
<head>
<link rel="shortcut icon" href="images\pantherpaw.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="stiglerstylesheet.css" />
</head>
<body style="background-color:black;color:white;padding:5px;" font="century gothic">
<div align="center">
<img src="images\websitelogoother2.png" alt="Stigler Public Schools" style="width:50%;" align="middle">
<table>
<tr>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #1</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #2</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #3</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
And Here is the result I'm getting
I need to remove the white space around the dropdown menus, thank you.

A smart trick will be to remove this css part
table tr:nth-child(odd) {
background-color: #eee;
}
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
/*table tr:nth-child(odd) {
background-color: #eee
}*/
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 10px auto;
background: #FF0000;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<html>
<head>
<link rel="shortcut icon" href="images\pantherpaw.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="stiglerstylesheet.css" />
</head>
<body style="background-color:black;color:white;padding:5px;" font="century gothic">
<div align="center">
<img src="images\websitelogoother2.png" alt="Stigler Public Schools" style="width:50%;" align="middle">
<table>
<tr>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #1</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #2</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #3</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

I changed your margin in the navigation class to remove the 10px and removed background-color. I applied your desired background color to the td because some of the whitespace is cellpadding generated by the table cells. I also removed the padding because it made your dropdown menu look smaller.
.navigation
{
list-style: none;
padding: 0;
width: 250px;
height: 40px;
/*margin: 10px auto;*/
/*background: #FF0000;*/
margin: 0px auto;
}
td
{
font-family: century gothic;
border: 1px solid black;
/*padding: 5px 5px 5px 5px;*/
text-align: center;
font-size: 1em;
background-color: #FF0000;
}
Note - Portions of your html was red highlighted in my editor, some misspelled styles and naughty html and css in there. I recommend using an editor which will warn you of naughty code.

Dropdown list In Navigation Bar

I want to make my "Poem From Me" and "Poem From Internet" drop down list going to under "Poems" section which is under About option. But now there is problem in there. This drop down list is behind "About" drop down list and i want to move it to the left next "Poems" option (I tried to use margin-left:250px) but it didn't work). I also want that whenever the person over his mouse on the "Poems" section the "Poem From Internet" and "Poem From Me" appears not the time that i hover over the "About" section! http://jsfiddle.net/2r1hbr3k/2/embedded/result/, http://jsfiddle.net/2r1hbr3k/2/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="Photo.ico">
<link href="StyleSheet.css" rel="stylesheet" />
<link href="animate.css" rel="stylesheet" />
<link href="animations.css" rel="stylesheet" />
<link href="hover.css" rel="stylesheet" />
<link href="gooeymenu.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="gooeymenu.js"></script>
<title>Social Activism</title>
</head>
<body>
<div style="background:#F5F5F0;">
<div>
<div style="float:left; margin-top:0; left:20px;"><img class="buzz" src="community-activism.png" width="80" height="80" /></div>
<h1 style="color:black; opacity:40;" class="shrink"><strong> Social Activism</strong></h1>
</div>
<br />
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
</div>
<div>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">About ▼</a>
<li class="n1" id="selection">
Poems ►
<ul>
<li class="n6">
Poem From Internet
</li>
<li class="n7">
Poem By Me
</li>
</ul>
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
<li class="n5" id="selection">
Me
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">From Internet ▼ </a>
<li class="n1" id="selection">
Poem
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">By Me ▼</a>
<li class="n1" id="selection">
Poem
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My CSS File:
body {
background: #DCDCD8;
}
h2 {
text-align: center;
color: #CCC;
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #F5F5F0;
position: relative;
z-index: 100;
display: inline-block;
vertical-align:top;
left:5px;
top:0px;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 14px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#option:hover ,#blue:hover {
color: white;
background-color:#19A3FF;
}
#option:active {
color: white;
background-color:#1c5f8d;
}
#blue:active {
color: white;
background-color: #1c5f8d;
}
#option {
color: black;
}
#blue {
color: black;
}

Is this what you meant?
.navigation ul {
display: none;
position: relative;
top: -40px;
left: 250px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navigation li:hover ul {
display: block;
}
Here's a fiddle: http://jsfiddle.net/Niffler/bxuv14Ld/

Navigation dropdown with unfold effect inline

I am having a problem to order my navigation bar. I want to make navigation bar in horizontal style, but it's like a table now! I found this kind of navigation bar in: http://cssdeck.com/labs/navigation-dropdown-with-flip-effect, but it didn't show how can i make a complete horizontal navigation bar with that effect. How can i fix it?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<title>Navigation Bar</title>
</head>
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼ </a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My Css:
body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}

<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home ▼ </a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">About ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</div>
</div>
</div>

Do you means this, here is your code
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home ▼ </a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">About ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Contact ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</div>
</div>
</div>
css:
body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}

Navigation Drop down With Unfold Effect Inline Without No Drop Down list For First Two Sections

I am having a problem to order my navigation bar. I want to make navigation bar in horizontal style, but it's like a table now! I found this kind of navigation bar in: http://cssdeck.com/labs/navigation-dropdown-with-flip-effect, but it didn't show how can i make a complete horizontal navigation bar with that effect. At the same time i need to add that i want to make my Home and About section free of drop down list! How can i fix it?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<title>Navigation Bar</title>
</head>
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼ </a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My Css:
body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}

One solution is to use display: table-cell to li elements like:
body {
background: #E9E9E9;
}
h2 {
text-align: center;
color: #CCC;
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation li {
width: 250px;
height: 40px;
display: table-cell;/*add display table-cell*/
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation"> <a class="main" href="#url">Home</a>
</ul>
<ul class="navigation"> <a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation"> <a class="main" href="#url">Navigation ▼ </a>
<li class="n1">item #1
</li>
<li class="n2">item #2
</li>
<li class="n3">item #3
</li>
<li class="n4">item #4
</li>
<li class="n5">item #5
</li>
</ul>
<ul class="navigation"> <a class="main" href="#url">Navigation ▼</a>
<li class="n1">item #1
</li>
<li class="n2">item #2
</li>
<li class="n3">item #3
</li>
<li class="n4">item #4
</li>
<li class="n5">item #5
</li>
</ul>
</div>
</div>
</div>
</body>

Optimizing my site for internet explorer

I am kinda new to the whole html/css thing, but i managed to make a decent page for my portfolio website, so far. The things is, that is looks like crap in Internet Explorer. I have tried to optimize it, so that my css animations work and so forth, but i can't seem to make it work properly.
www.thomasteilmann.dk
If you take a look, you'll know what i mean. It should work properly in anything but IE.
if anyone could give me some advice on how to reach my goal, that would be great! :)
And yes, i know my code is messy :P
classes below:
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
<head>
<title>thomasteilmann.dk</title>
</head>
<body>
<div class="header">
<h1><img src="images/thomas_logo_Web.png" alt="Sick Logo" /></a></h1>
</div>
<div id="content">
<div class="view-first">
<img src="images/cosmic_art_icon.jpg"/>
<div class="mask">
<h2>Cosmic Art</h2>
<p>A galleri of cosmic art made in Photoshop</p>
View
</div>
</div>
<div class="view-second">
<img src="images/thomas_web.jpg"/>
<div class="mask">
<h2>About myself</h2>
<p>Information about my skills and my personality in general</p>
View
</div>
</div>
<div class="view-third">
<img src="images/web_web.jpg"/>
<div class="mask">
<h2>Websites</h2>
<p>A list of websites i've made/worked on.</p>
View
</div>
</div>
<div class="view-fourth">
<img src="images/ice_age_web.jpg"/>
<div class="mask">
<h2>Cartoon Art</h2>
<p>A galleri of Cartoon art made in Photoshop</p>
View
</div>
</div>
</div>
</body>
</html>
Css:
body {
background: #21211f;
width: 100%;
font-family: helvetica, arial, sans-serif;
margin: 0 auto;
padding: 0px 0 0 0;
}
.header{
position: absolute;
width: 700px;
padding-bottom:50px;
margin-left: 23%;
float: left;
}
h1 img{
padding: 0;
margin: 0;
}
#content{
width: 50%;
height: 500px;
line-height: 22px;
font-size: 18px;
font-family: Georgia, times, serif;
float: left;
color: #ffffff;
margin-left: 22%;
margin-top: 20%;
padding: 20px 30px 20px 30px;
}
img {
border: none;
}
/*
* View one
*/
.view-first {
width: 279px;
height: 198px;
margin: 3px;
margin-left: 33px;
float: left;
border: 5px solid white;
overflow: hidden;
position: absolute;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view-first .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-first img {
display: block;
position: relative;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
/**
* View two
*/
.view-second {
width: 279px;
height: 198px;
margin: 3px;
margin-left: 400px;
float: right;
border: 5px solid white;
overflow: hidden;
position: absolute;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view-second .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-second img {
display: block;
position: relative;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-second h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-second p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 0px;
text-align: center;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-second a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-second .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-second a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-second:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
.view-second:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
}
.view-second:hover h2,
.view-second:hover p,
.view-second:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
}
.view-second:hover p {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-second:hover a.info {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
/**
* View three
*/
.view-third {
width: 279px;
height: 198px;
margin: 3px;
margin-left: 33px;
float: left;
margin-top: 240px;
border: 5px solid white;
overflow: hidden;
position: absolute;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view-third .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-third img {
display: block;
position: relative;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-third h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-third a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-third a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-third:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
.view-third:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
}
.view-third:hover h2,
.view-third:hover p,
.view-third:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
}
.view-third:hover p {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-third:hover a.info {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/**
* View four
*/
.view-fourth {
width: 279px;
height: 198px;
margin: 3px;
margin-top: 240px;
margin-left: 400px;
float: right;
border: 5px solid white;
overflow: hidden;
position: absolute;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view-fourth .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-fourth img {
display: block;
position: relative;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-fourth h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-fourth p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 0px;
text-align: center;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-fourth a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-fourth .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-fourth a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-fourth:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
.view-fourth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
}
.view-fourth:hover p {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-fourth:hover a.info {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}

And you have errors in your HTML, like the <link> above the <head> and the </a> without any matching <a>. Run your page through the W3C validator at http://validator.w3.org/ and correct all errors it finds.
Different browsers respond differently to errors, so making it error-free should be the first step in making it multi-browser compatible.

IE, even IE9 does not support CSS transitions AFIAK.

Step one: include a document type declaration at the start of the file, such as:
<!DOCTYPE html>
If you don't, you end up in Quirks Mode, which greatly increases the differences between IE and other browsers.

Your internet explorer uses css 2, but in your code you use the css 3. If you need to use this functionality, the best method is to use a javascript/jquery codding, this will works in internet explorer.

Where did you learn to program in such a way?
You have a very basic website and the CSS that you have is monstrously disproportional.
For your specific website, the CSS should be 10-20 lines of code maximum.
I recommend that you start from scratch and follow this rule.

Your site has issues beyond your messy code. Your background image is entirely too large, taking several seconds for me to load on a new MBP with cable internet.
Your navigation doesn't give your users any idea what your images link to until they mouse over. You'd be better off with a horizontal navigation, using text and smaller thumbnails.
Your Photoshop gallery images are too small. Why do you even have an "About Me" section with nothing about you in it? And black text on a dark gray background?
I don't mean to be super harsh, here. It's better than I was able to produce when I first got into HTML and CSS, but you've got some serious design flaws.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Navigation Bar Animation - html

Related

How do I remove whitespace from dropdown menus?

Dropdown list In Navigation Bar

Navigation dropdown with unfold effect inline

Navigation Drop down With Unfold Effect Inline Without No Drop Down list For First Two Sections

Optimizing my site for internet explorer

Categories

Resources