28172 sujets

CSS et mise en forme, CSS3

Test de Transition en Css3 - Chrome

Salutations,

J'essaye de suivre l'actualité Css3 et Html5 actuellement.
Ayant voulu tester les transitions, j'ai écrit ce petit bout de code,
mais l'effet rendu n'est pas celui désiré, en effet les balises <a> sautent durant la transition. ^^

Si j'arrivai à fixer les <a> en bas des <li> cela fonctionnerait mieux je pense,
mais j'avoue ne pas totalement ce type de positionnement vertical.

Pourriez-vous m'aider ?
Merci.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css3.css" />
</head>

<body>
		<div id="conteneur">
			<h1>Titre.</h1>
			<ul id="nav">
				<li><a href="#">Nav</a></li>
				<li><a href="#">Nav</a></li>
				<li><a href="#">Nav</a></li>
				<li><a href="#">Nav</a></li>
				<li><a href="#">Nav</a></li>
				<li><a href="#">Nav</a></li>
				<li><a href="#">Nav</a></li>
			</ul>
			<div id="contenu">
			</div>
		</div>
	</body>
</html>


CSS

html, body{
	height: 100%;
	padding: 0; margin: 0;	
	font-family: Verdana, Arial, Helvetica;
	}
	
/* Squelette */	
div#conteneur{
	height: 100%;
	width: 500px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	background-color: #CCC;
	}
	
h1{
	display: block;
	padding: 0;	margin: 0;
	height: 100px;
	background-color: #F00;		
	text-align: right;
	}

/* fin Squelette */

/* Navigation */
	ul#nav{
		list-style-type: none;
		padding: 0;	margin: 0;
		height: 40px;
		background-color: #FF0;
		}
		ul#nav li{
			float: right;
			height: 40px;
			}
			ul#nav li a{
				display: block;
				height: 20px;
				width: 50px;
				text-align: center;
				text-decoration: none;
				padding-top: 4px;	
				padding-bottom: 0px;
				margin-top: 16px;
				
				font-size: 0.9em;
				font-weight: bold;
				color: #000;
				
				background-color: #CCC;
				border-right: 1px solid #0A0;
				
				-webkit-border-top-left-radius: 10px;
				-webkit-border-top-right-radius: 10px;
				
				-webkit-transition-property: background-color, color, margin-top, padding-bottom;
				-webkit-transition-duration: 2s;
			}
			ul#nav li a:hover{
				background-color: #000;
				color: #FFF;
				padding-bottom: 6px;
				margin-top: 10px;
				
				-webkit-transition-property: background-color, color, margin-top, padding-bottom;
				-webkit-transition-duration: 1s;				
				}
/* Fin Navigation */


Edit 2:
Je viens de trouver une solution qui fonctionne, mais qui ne me plait pas :
entourer les <a> avec des <div class="tank">,
mettre les div.tank en position relative, et les <a> en position absolute avec un bottom=0.

Ainsi l'animation ne joue plus que sur le padding-bottom pour le mouvement vertical (le margin-top étant devenu inutile).

Cependant je ne suis pas fan de rajouter du <div> ainsi.

Si quelqu'un entrevoit une autre piste, je suis tout preneuse.

edit : mise en forme
Modifié par maosalia (08 Nov 2009 - 19:20)
Sujet clos
Aller à