Navigation transition problem
I used CSS transition for navigation, but problem is next:
When I hover the navigation all elements below navigation also going down. Like navigation push elements down while transition is done. Here is code:
Code:
<html>
<title>Source Code</title>
<head>
<meta name="author" content="Aleksandar Arsic" />
<meta name="description" content="Projekti otvorenog koda, tutoriali" />
<meta name="keywords" content="Source Code" />
<link REL="SHORTCUT ICON" HREF="http://png.findicons.com/files/icons/573/must_have/48/copy.png">
<style type="text/css">
body {
background-image: url('http://www.dodaj.rs/f/2o/JL/19S9KRFu/asdasd.png');
background-repeat:repeat;
}
#main {
margin-top:50px;
background-color:#ffffff;
border:1px solid #cac9c8;
width:900px;
height:1000px;
margin-left:auto;
margin-right:auto;
}
#navigation {
width:100%
list-style:none;
text-align:center;
}
#navigation li {
height:25px;
width:100px;
border-top:1px solid #e4e3e3;
border-bottom:1px solid #e4e3e3;
border-left:3px solid #4bd5e9;
border-right:3px solid #4bd5e9;
background-color:#ffffff;
padding:4px;
display:inline-block;
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
transition: height .5s ease;
}
#navigation li:hover {
height:35px;
}
#navigation a {
font-family:Nadia serif;
padding:2px;
display:inline-block;
text-decoration:none;
color:#000;
}
img {
margin-top:50px;
border:1px solid #4bd5e9;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="main">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Tutorials</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contact</a></li>
</ul>
<center><img src="http://www.dodaj.rs/f/2x/Nw/4hVHgVSu/test11111111111111.png"></img></center>
</div>
</body>
</html>
Re: Navigation transition problem
Hi there Mr.Joker,
try it like this...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Aleksandar Arsic">
<meta name="description" content="Projekti otvorenog koda, tutoriali">
<meta name="keywords" content="Source Code">
<title>Source Code</title>
<link rel="shortcut icon" href="http://png.findicons.com/files/icons/573/must_have/48/copy.png">
<style type="text/css">
body {
background-image:url('http://www.dodaj.rs/f/2o/JL/19S9KRFu/asdasd.png');
background-repeat:repeat;
}
#main {
background-color:#fff;
border:1px solid #cac9c8;
width:900px;
height:1000px;
margin:50px auto 0;
}
#navigation {
position:relative;
width:100%;
margin:0;
padding:15px 0 0;
list-style:none;
text-align:center;
}
#navigation li {
height:25px;
width:100px;
border-top:1px solid #e4e3e3;
border-bottom:1px solid #e4e3e3;
border-left:3px solid #4bd5e9;
border-right:3px solid #4bd5e9;
background-color:#fff;
padding:4px;
display:inline-block;
-webkit-transition:height .5s ease;
-moz-transition:height .5s ease;
-o-transition:height .5s ease;
transition:height .5s ease;
}
#navigation li:hover {
height:35px;
}
#navigation a {
font-family:Nadia serif;
padding:2px;
display:inline-block;
text-decoration:none;
color:#000;
}
#navigation #image-holder {
position:absolute;
height:200px;
width:900px;
top:117px;
left:0;
padding:0;
border:0;
}
#navigation img {
border:1px solid #4bd5e9;
}
</style>
</head>
<body>
<div id="main">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Tutorials</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contact</a></li>
<li id="image-holder"><img src="http://www.dodaj.rs/f/2x/Nw/4hVHgVSu/test11111111111111.png" alt=""></li>
</ul>
</div>
</body>
</html>
Re: Navigation transition problem
Thank you, but what was the trick to make that?
Re: Navigation transition problem
Hi there Mr. Joker,
compare your code carefully with mine.
Re: Navigation transition problem
I believe I understand a bit better. :D
