Navigation transition problem

**Mr.Joker** · Sep 5th, 2012, 12:51 PM

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>

**coothead** · Sep 5th, 2012, 03:32 PM

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>

**Mr.Joker** · Sep 5th, 2012, 04:58 PM

Thank you, but what was the trick to make that?

**coothead** · Sep 5th, 2012, 06:34 PM

Hi there Mr. Joker,

compare your code carefully with mine.

**Mr.Joker** · Sep 5th, 2012, 06:42 PM

I believe I understand a bit better.

Thread: Navigation transition problem

Thread Tools

Display

Navigation transition problem

Re: Navigation transition problem

Re: Navigation transition problem

Re: Navigation transition problem

Re: Navigation transition problem

Posting Permissions