Y'a-t-il moyen de simplifier ?

Y'a-t-il moyen de simplifier ? - HTML/CSS - Programmation

Marsh Posté le 16-09-2004 à 21:50:19    

Voici un petit code html qui ne fait qu'afficher au centre de l'écran un e invite d'auth. Je trouve pourtant ce code compliqué pour ce que c'est ... N'y a-t-il pas moyen de le simplifier ???
 
En l'executant vous verrez que le titre dans la barre de titre ne se centre pas correctement, y-a-t-il un moyen de corriger ca ?  
 

Code :
  1. <html>
  2. <head>
  3.    <title>[TEXT=auth_page_title]</title>
  4.    <style type="text/css">
  5.    <!--
  6.    body {
  7.       background-color:    white;
  8.       color:               black;
  9.       font-family:         sans-serif;
  10.       font-size:           small;     
  11.    }
  12.    .contener {
  13.       text-align:          center;
  14.    }
  15.    .cadre {
  16.       position:            absolute;
  17.       top:                 50%; 
  18.       left:                50%;
  19.       margin-left:         -200px;
  20.       margin-top:          -70px;
  21.       width:               400px;
  22.       height:              140px;
  23.       text-align:          left;
  24.       border-color:        #B21B1B;
  25.       border-width:        1px;   
  26.       border-style:        solid;
  27.       background-color:    #FFF5F4;
  28.       font-weight:         bold;
  29.       text-shadow:         black 3px 3px;
  30.    }
  31.    .title {
  32.       display:             block;
  33.       height:              25px;
  34.       color:               white;
  35.       padding-left:        10px;
  36.       background-color:    #F96969;
  37.       background-repeat:   no-repeat;
  38.       background-image:    url(images/menu_bg.jpg);
  39.    }
  40.    .content {
  41.       padding-left:        5px;
  42.    }
  43.    input {
  44.       border-style:        solid;
  45.       border-width:        1px;
  46.    }
  47.    .input {
  48.       left:                10px;
  49.    }
  50.    -->
  51.    </style>
  52. </head>
  53. <body>
  54.    <div class="contener">
  55.       <div class="cadre">
  56.          <div class="title">
  57.             [TEXT=auth_title_box]
  58.          </div>
  59.         <div class="content">
  60.            <br/>
  61.            <table>
  62.               <tr>
  63.                  <td align="left">[TEXT=login]:</td>
  64.                  <td width="30"></td>               
  65.                  <td align="right"><input type="text"><td>               
  66.               </tr>       
  67.               <tr>
  68.                  <td height="10" colspan="3"></td>
  69.               </tr>                     
  70.               <tr>
  71.                  <td align="left">[TEXT=login]:</td>
  72.                  <td width="30"></td>                                 
  73.                  <td align="right"><input type="text"><td>
  74.               </tr>           
  75.            </table>
  76.            <br/>
  77.         </div>
  78.       </div> 
  79.    </div>
  80. </body>
  81. </html>


 
Merci d'avance !!!


---------------
.:coin:.
Reply

Marsh Posté le 16-09-2004 à 21:50:19   

Reply

Marsh Posté le 16-09-2004 à 21:58:02    

url pour voir?
 
paske la tes 50 div imbriqu" avec whatmille table dedans c'est bof :o

Reply

Marsh Posté le 16-09-2004 à 22:13:40    

Reply

Marsh Posté le 16-09-2004 à 22:15:43    

rassure moi, c'est volontaire les [TEXT=(.+?)] :??:
 
sinon ben pour centre ton titre, dans la class .titre tu rajoute
 
text-align:center a la fin

Reply

Marsh Posté le 16-09-2004 à 22:18:00    

yep ! le [TEXT=...] est une balise de mon système de template !
 
le text-align c'est pour l'horizontal, ce qui m'interesse c'est le vertical...


Message édité par kalios le 16-09-2004 à 22:18:12

---------------
.:coin:.
Reply

Marsh Posté le 16-09-2004 à 22:20:28    

ben vertical-align alors [:dawa]
 
et moi je le voit centré h/v hein :o

Reply

Marsh Posté le 16-09-2004 à 22:25:52    

[TEXT=auth_title_box] n'est pas centré sur la barre de titre ! ou alors c'est moi qui louche !  
 
vertical-align ne fonctionne pas sur les div !!!!!


---------------
.:coin:.
Reply

Marsh Posté le 16-09-2004 à 22:41:26    

kalios a écrit :

vertical-align ne fonctionne pas sur les div !!!!!


Exact.
 
 
Sinon pour alléger les code :
 
 - vire le tableau
 - utilise des balises sémantiques (<h1> au lieu de <div class="title">
 - regroupes les propriétés CSS (border-color, border-width et border-style peuvent être regroupées avec border)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-09-2004 à 22:46:55    

gm_superstar a écrit :

Exact.
 - vire le tableau
 - utilise des balises sémantiques (<h1> au lieu de <div class="title">
 - regroupes les propriétés CSS (border-color, border-width et border-style peuvent être regroupées avec border)


 
c juste pour le <h1> ! j'y avais pas pensé  
 
en revanche pour le tableau c'est difficile puisque je souhaite que les <input type=text> soient alignés ! je ne vois pas comment faire autrement !
 
sinon pour l'alignement vertical du text dans le titre ?


---------------
.:coin:.
Reply

Marsh Posté le 16-09-2004 à 22:48:02    

je sais pas trop pour ton alignement :/
 
peu etre un  
 
margin-top:auto
margin-bottom:auto
 
je sais pas trop, faudrait tester

Reply

Marsh Posté le 16-09-2004 à 22:48:02   

Reply

Marsh Posté le 16-09-2004 à 22:56:05    

kalios a écrit :

en revanche pour le tableau c'est difficile puisque je souhaite que les <input type=text> soient alignés ! je ne vois pas comment faire autrement !


 
Allez, ce soir c'est ma tournée ! Tu peux t'inspirer de cette page que j'ai faite pour un site perso : http://djailles.free.fr/hfr/prog/login.html
 
A adapter à tes besoins donc.
 

kalios a écrit :

sinon pour l'alignement vertical du text dans le titre ?


Si tu es sûr que le titre sera sur une ligne tu peux essayer de jouer avec line-height ou avec padding-top. Mais ça ne sera pas un centrage automatique.


Message édité par gm_superstar le 16-09-2004 à 22:56:30

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 17-09-2004 à 09:37:19    

merci bcp ! J'ai considérablement simplifier la page pour avoir la même apparence:
 
http://www.canard.ch/hardwarefr/hardwarefr_002.html
 
Cependant il reste ce problème d'alignement vertical que je n'arrive pas à résoudre !  


---------------
.:coin:.
Reply

Marsh Posté le 17-09-2004 à 09:38:17    

:fou: mais le problème c'est que sur iexplore ca merde !!!

Reply

Marsh Posté le 17-09-2004 à 09:45:14    

kalios a écrit :

:fou: mais le problème c'est que sur iexplore ca merde !!!


 
euh c'est bon c'était la largeur du label qui était trop grande !

Reply

Sujets relatifs:

Leave a Replay

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