Bonjour à tous,
je souhaite agrandir une div au passage de la souris. Dans mon css, je pense me servir de :hover pour cela.
Malgré des essais avec des z-index, ou passage en float ou autre: je n'arrive pas à agrandir ma div sans qu'elle pousse toutes les autres vers le bas.
Ce systeme est tres utilisé sur internet mais je n'arrive pas à gérer le problème! Quelqu'un aurait des astuces/ idées.
http://trilocation.free.fr/forum/prob.jpg

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>XXXXX</title>
<meta name="author" content="XXXXX" />
<meta name="geo.placename" content="xXXX" />
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="all" href="style/style.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/crossslide.js" type="text/javascript"></script>
	
<!--[if lt IE 9]>
<link rel="stylesheet" href="styles-ie.css" />
<script src="scripts/html5-ie.js"></script>
<![endif]-->

</head>
<body>

<!--[if lte IE 7]>
<link rel="stylesheet" href="http://www.goetter.fr/styles-ie6.css" />
<div class="alert-ie6" style="padding: 1em; background: #900; font-size: 1.1em; color: #fff;">
<p><strong>Attention ! </strong> Votre navigateur (Internet Explorer 6 ou 7) présente de sérieuses lacunes en terme de sécurité et de performances, dues à son obsolescence (il date de 2001).<br />En conséquence, ce site sera consultable mais de manière moins optimale qu'avec un navigateur récent (<a href="http://www.browserforthebetter.com/download.html" style="color: #fff;">Internet Explorer 9+</a>, <a href="http://www.mozilla-europe.org/fr/firefox/" style="color: #fff;">Firefox 4+</a>, <a href="http://www.google.com/chrome?hl=fr" style="color: #fff;">Chrome 11+</a>, <a href="http://www.apple.com/fr/safari/download/" style="color: #fff;">Safari 5+</a>,...)</p>
</div>
<![endif]-->  

<header role="banner">
<div id="top">
<div id="inside">
<div id="connexion"> Texte et test</div>
<h1>XXXXX<span></span></h1>
<h2>XXXXXXXXX</h2>
</div>
<nav role="navigation">

<ul>
<li>Accueil</li>
<li>Formation</li> [...]

Au passage de la souri l'ensemble comprenant H1,h2 et la nav descendent.
Si vous avez une idée, cela me débloquerais bien Smiley ohwell
D'avance Merci

PS: Pour l'instant c'est le départ je ne gère pas explorer.
Modifié par youki (04 Nov 2011 - 14:03)
Hello.

Il faut que tu donnes une marge négative à ton div sur le :hover. Attention toutefois au risque de chevauchement. Un petit exemple : http://jsfiddle.net/eMm99/1/

<hs>Par contre, hotlinker la CSS d'un autre, c'est pas très poli.</hs>
Modifié par Florian_R (04 Nov 2011 - 14:50)