[CSS] Problème incompréhensible d'alignement

Problème incompréhensible d'alignement [CSS] - HTML/CSS - Programmation

Marsh Posté le 19-07-2006 à 00:51:26    

http://magicsite.manga-torii.com
 
Pkoi mon block de login se retrouver carrément à côté de mon body ? (dans le CSS, body est à 70% centré, et est représenté par le cadre)
 
PS: regardez avec FF, parceque niveau IE j'ai que le 7 (qui donne exactement le même résultat débile)
 
A la base, le block de login devrait être sous forme de deux colonnes : une avec les champs login/pass, et une avec le bouton, le tout à gauche du titre...
Là c'est bien à gauche mais bon... Tant qu'à faire j'aimerais bien que ça reste dans le document :o
 
Accessoirement, depuis que j'ai mis des <label>, mes champs ne font plus tous la même taille : seul le premier semble affecté par le style.
Bref, là je sais plus quoi faire, ça fait bien deux heures que je suis là dessus (j'ai réussi à caller le menu, c'est déjà ça :o)

Reply

Marsh Posté le 19-07-2006 à 00:51:26   

Reply

Marsh Posté le 19-07-2006 à 10:35:11    

petit up pour la forme :sweat:

Reply

Marsh Posté le 19-07-2006 à 12:15:32    

Bon, merci quand même :o
 
J'ai corrigé le biniou.
 
Seul truc, c'est que sous FF c'est moins beau que sous IE7 (même si c'est pas déconnant non plus -petits problèmes d'alignement vertical et une marge trop grosse)
 
Par contre, sous IE7, comprends pas.
Quand je redimensionne la fenêtre, le bouton "S'identifier" n'arrête pas passer sous les champs et remonter. Si je reste à une résolution où il est en dessous, j'ai beau faire refresh, il reste dessous.
Pourtant, il a largement la place à droite !
 
Comprend pas :sweat:

Reply

Marsh Posté le 19-07-2006 à 17:32:06    

à ta place j'aurai fait autre chose :
petite techinque tirée du bouquin the zen of css design  
(cf. www.csszengarden.com)
 
Fait des UL / LI avec des attributs CSS float: left ou right pour le LI
ça marche du feu de dieu sur tous les navigateurs et tu peux en faire ce que tu veux après...
 
Ex :
 
<div id="identification" xmlns="">
        <div>
          <div>
            <label for="login">login:</label>
            <input type="text" name="chp:user_nickname" id="login" />
          </div>
          <div>
            <label for="password">pass:</label>
            <input type="password" name="chp:user_password" id="password" />
          </div>
          <div>
               
            </div>
        </div>
        <div>
          <input type="submit" value="S'identifier" />
        </div>
      </div>
 
tu le remplaces par  
 
<div id="identification" xmlns="">
        <UL class="maDisposition">
          <LI>
 
            <table class="maClassedeTable">
              <TR>  
                   <TD>
                      <label for="login">login:</label>
                     <input type="text" name="chp:user_nickname" id="login" />
                  </TD>
           </TR>
          <TR>
          <TD>
            <label for="password">pass:</label>
            <input type="password" name="chp:user_password" id="password" />
          </TD>
          </TR>
          </TABLE>
          </LI>
 
         <LI>
          <input type="submit" value="S'identifier" />
        </LI>
      </UL>
 
</DIV>
 
ensuite tu declares tout simplement dans ta css
 
UL.maDisposition LI {
 
     float: right; (ou left je sais plus fait un essai!!)
 
}

Reply

Marsh Posté le 19-07-2006 à 17:35:53    

moi par ex j'ai ça :
 
<ul class="navBar">
 <li>
 <a href="/websuivi/default.do">Siloxane</a>
 &gt;
 </li>
 <li>
 
 <a href="/websuivi/donnees/saisieindiv/etcv/findform.do">Recherche Etat Civil</a>
 &gt;
 </li>
 <li>
 Liste d'états civils  
 </li>
</ul>
 
avec comme css (j'ai tronqué...) :
 
.navBar {
 
 color: #000000;
 
 text-align: left;
 font-size: 8pt;
 font-style: normal;
 list-style-type: none;
 float: none;
}
 
UL.navBar LI {
 
 text-align: left;
 font-size: 8pt;
 font-style: normal;
 float: left;
 color: #000000;
}
 
et ça donne ça :
 
Siloxane  > Recherche Etat Civil >  Liste d'états civils

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed