Je veux faire une page de connexion mais elle est cachée au centre de la page principale. Puis j'utilise jquery pour rendre visible le div qui l'entoure et ce sera comme la page de connexion sur www.bytes.com.comment positionner un div au centre et le cacher?
mais je ne peux pas comprendre comment le centrer avec css. ça ne marche pas sans affecter les positions principales des pages div.
Je veux juste qu'il flotte sur la page principale. Quelqu'un?
Vous pourriez essayer d'utiliser un formulaire modal pour votre connexion. jquery ui faire un bon http://jqueryui.com/demos/dialog/#modal-form qui va ouvrir un formulaire pour vous d'utiliser dans le centre de la page.
Est-ce ce que vous cherchez? Notez le commentaire CSS. Il est important d'obtenir le div centré. Le "truc" qui fait le flotteur au-dessus des autres parties de votre site, est position: absolute.
<!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="en" lang="en">
<head>
<title>Centering a DIV with CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<style type="text/css">
.center_center {
position: absolute;
background-color: #ccc;
border: 1px solid #000;
width: 300px;
height: 200px;
/* notice: margins are -(value/2) */
margin-left: -150px;
margin-top: -100px;
top: 50%;
left: 50%;
display: none;
}
</style>
</head>
<body>
<div id='login' class="center_center">
Login content
</div>
<p><input type="button" value="Login" onclick="$('#login').show()" /></p>
</body>
</html>
merci beaucoup! travaillé comme un charme! – fayer
Super! Je vois que vous êtes nouveau sur Stack Overflow. Si cette solution fonctionne pour vous, il est courant de marquer cette solution comme acceptée en cliquant sur la coche en regard de ma réponse. Vous pouvez également voter en cliquant sur la flèche en haut à côté de la question. Merci. –
Qu'avez-vous essayé jusqu'à présent? Quel CSS utilisez-vous actuellement pour positionner le div? –