Positionnement absolue relatif a un block

25 sept. 2007, 18:27

Bonjour,
je ne comprends pas, j'ai un element qui devrait se positionner en bas d'un bloc conteneur, mais cet element (un bouton d'envoi de formulaire) s'obstine a vouloir se placer en bas de ma page...

Voici mon CSS (en integralité):

Code : Tout sélectionner

#page {
  margin: 0;
  text-align: justify;
}

a:link, a:visited {
  text-decoration: none;
  border-bottom: 1px dotted;
  color: black;
}

a:hover {
  border-bottom: 1px solid;
  font-style: italic;
  color: black;
}

h1 {
  font-size: 2em;
  font-family: serif;
  font-weight: bold;
  color: black;
  text-align: center;
  margin: 0px;
  margin-bottom: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px dotted black;
  border-top: 2px dotted black;
}

hr {
  display: none;
  color: black;
  background-color: black;
  height: 1px;
  width: 85%;
  border: 0;
  margin: 0px;
}

#loginbox {
  font-family: helvetica;
  border: 1px dotted gray;
  width: 200px;
  padding-top: 3px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 10px;
  text-align: center;
}

#loginbox input[type=text], [type=password] {
  width: 190px;
  border: 1px solid gray;
  padding: 2px;
  margin-bottom: 3px;
}

#loginbox label {
  float: left;
  margin-left: 5px;
}

#loginbox input[type=submit] {
  position: absolute;
  float: left;
  bottom: 2px;
  margin-top: 5px;
  border: 1px solid gray;
  background-color: white;
  font-weight: normal;
  width: 8em;
}

#loginbox input[type=submit]:hover {
  margin-top: 5px;
  margin-bottom: 0px;
  border: 1px solid gray;
  background-color: white;
  font-weight: bold;
  width: 8em;
}

#status {
  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  border: 1px solid gray;
  background-color: pink;
  text-align: center;
  font-weight: bold;
  height: auto;
  width: 50%;
}

#status .remainingtries {
  font-weight: normal;
}

#error {
  width: 100%;
  font-weight: bold;
  font-size: 2em;
  border: 2px solid red;
  font-style: arial;
  text-align: center;
  padding: 5px;
}

et le code de la page HTML qui pose probleme :

Code : Tout sélectionner





<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Bienvenue sur l'interface de gestion UFR7 - PPCS</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>

  <div id="page">
    <h1>BIENVENUE</h1>
    
    <hr />

        <div id="loginbox">
      <form action="" method="POST">
        <label for="login">Login : </label><br />
        <input type="text" name="login" maxlength="12" id="login"/><br />
        <label for="password">Mot de passe : </label><br />
        <input type="password" name="password" maxlength="12" id="password"/><br />
        Rester connecté ? <input type="checkbox" name="keepconnection" /><br />
        <input class="submit" type="submit" name="submit" value="Se connecter" />
      </form> 
    </div>
        
      </div>

  </body>
</html>

Merci d'avance,
Netsupra

PS : si vous avez des remarques generales sur mon CSS, je les prend volontier vu que ca fait 3 jours que je fais du CSS :s

25 sept. 2007, 19:08

Ton bloc #loginbox n'est pas positionné du tout, or le positionnement en absolu se fera toujours par rapport au premier élément parent positionné. Dans le cas qui nous occupe, ton bouton s posiiotnne donc par rapport à... body.

Donc dans ton style CSS, ajoute ceci pour #loginbox : "position: relative;" et comme ton bouton est positionné en absolute, afin qu'il ne chevauche pas le label "Rester connecté", modifie le padding-bottom à 10px toujours pour #loginbox.

25 sept. 2007, 20:41

Merci beaucoup, ca marche très bien. Par contre maintenant, le submit est plus du tout centré par rapport a la loginbox...
Je n'ai changé que le position: relative pour le bloc loginbox
Une idée ?
Netsupra

25 sept. 2007, 20:48

Dans ce cas, vire le float: left, et ajuste le positionnment :

Code : Tout sélectionner

left : 50%;
margin-left: -[la moitié de la largeur du bouton]; /* marge gauche négative */

évite le margin: auto, IE6 le gère très mal voire pas du tout.

25 sept. 2007, 21:22

Pour IE, m'en fout, pas autorisé sur mon site (c'est un back office qui communique avec un plugin firefox).
A part ca, tu ne voies pas d'incoherence ?
Par contre, je comprends pas pourquoi vu que dans la classe loginbox j'ai une propriété text-align: center; le bouton n'est pas centré d'office
Merci pour ton aide précieuse
Netsupra

25 sept. 2007, 21:46

dans la mesure où un élément est positionné en absolute, il sort du flux normal des données de la page : c'est pour ça que si tu ne modifies pas le padding de ton contenant, le bouton va chevaucher le label du bas parce que le contenant ne tiendra plus compte de la taille du bouton pour s'adapter en hauteur. De même le text-align n'aura aucun effet sur les éléments hors flux.

25 sept. 2007, 23:32

OK, merci, j'ai reglé le probleme en agrandissant le bouton

Netsupra

26 sept. 2007, 06:21

N'oublie pas le [Résolu]

26 sept. 2007, 08:14

Modération :
netsupra, si ta question est résolue, pense à ajouter le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.
Tu peux réaliser cette opération en cliquant sur le bouton

en haut à gauche de ce sujet.

Positionnement absolue relatif a un block

Qui est en ligne