IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Peut-on faire 2 class ?


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2005
    Messages
    593
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2005
    Messages : 593
    Par défaut Peut-on faire 2 class ?
    Bonjour a tous.

    voila je débute dans les .css, je suis déjà arrivé a avoir un bon style de mes pages html en copiant un peu partout les .css d'autres sites,mais ici je bloque un peu.

    je voudrais integrer un tableau dans mon formulaire
    pourquoi ?
    en faites c'est juste pour reprendre le design de mon formulaire et plus précisément le contour (fieldset et legend).
    Comme ca je dispose déjà d'un countour déjà défini dans mon .css.

    il me reste donc a creer mon tableau.


    je pensais créer un tableau avec 3 div comme ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="bandeau">Ceci est le bandeau</div>
    <div id="contenudroit">Ceci est le contenu de droite</div>
    <div id="contenugauxhe">Ceci contiendra la photo</div>
    <div id="restedelapge">Ceci est le reste de la page</div>
    mais bon je sais pas pourquoi il ne m'affiche pas du tout le style "normal" comme défini dans le .css.

    j'avais mis ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    div#bandeau {
    	width:600px;
    	height:50px;
    	background-color:#00CCFF;
    	}
    div#menu {
    	float:left;
    	width:100px;
    	height:400px;
    	background-color:#FF6699;
    	}
    div#contenu {
    	float:left;
    	width:500px;
    	height:400px;
    	background-color:#FFCC00;
    	}
    div#pied_page {
    	clear:both;
    	width:600px;
    	height:50px;
    	background-color:#33FF99;
    	}
    ps : si je code juste ceci ca marche mais integrer a mon .css cel ne marche pas
    a mon avis il reprend le style aussi du div dans lequel je suis imbriqué.


    pour contourner le probleme j'ai creer un simple <table>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <div id="content">		
     
    <div id="full">
    		<form id="FormSales" action="#" method="post">
    			<fieldset>
    				<legend>Inquiry Of Sales</legend>			
    				<p>
    				<table width=100% height=100% border=0 bgcolor=#FFFFFF summary="">
    				<tr>
    					<td width=100 height=110 bgcolor=#00FF00>ici sera la photo</td>
    					<td bgcolor=#FFFF00><label class="test">Name : </label></br>
    										<label>First Name : </label> </br>
     
     
    					</td>
    				</tr>
     
    				<tr>
    					<td bgcolor=#FF0000 colspan=2>&nbsp;</td>
    				</tr>
    </table>
     
    				</p>				
    				<hr />
    			</fieldset>
    		</form>
     
    </div>
    mais la class du label ne marche pas et je ne comprends pas pourquoi... si je met class="text" ca marche... par contre class="test" ne marche pas.
    je vous donne mon .css si vous pouviez me donner deux trois conseil a ce sujet.

    Merci d'avance

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    /* Body
    ----------------------------------------------- */  
     
    body { 
      	background:#EEEEE7; 
      	margin:0 10px;
      	font:small/12px Verdana,Sans-serif;
      	text-align:center;
      	color:#333;
      	margin-top:1.4em;
      	margin-bottom:1.4em;
      	}	 
     
     
     
     
    /* Page
    ----------------------------------------------- */
    #page {
      	background:#fff;
      	}   
     
     
     
     
    /* Header
    ----------------------------------------------- */  
     
    div#header {
    	width:100%;
    	height:70px;
    	background-color:#fff;	
    	text-align:left; 
    	} 
     
     
     
     
    /* Footer Styles
    ----------------------------------------------- */  		
    div#footer {   
    	margin-top:20px;
    	background:#0198CD; ;
        clear:both;
        width:100%;
     	color:#ffd;
    	text-align: center;
    	height:40px;
    	line-height:40px;
    	}	
     
     
    /* Menu
    ----------------------------------------------- */  	
    #menu {
     	background:#0198CD;
     	float:left;
     	width:100%;
     	font:bold 85% "Trebuchet MS",Verdana,Sans-serif;
     	line-height:1em;
     	color:#fff;
      	}
    #menu ul {
      margin:0;
      padding:0 15px;
      border-collapse:collapse;
      list-style:none;
      }	 
    #menu li {
      display:inline;
      margin:0;
      padding:0;
      background-image:none;
      line-height:normal;
      text-indent:0;
      }
    #menu a, #menu strong {
      float:left;
      padding:12px 10px 8px;
      border-width:0;
      text-transform:uppercase;
      text-decoration:none;
      color:#fff;
      }
    #menu a:hover {
      background:#396392;
      text-decoration:none;
      }	
     
    #menu .current a, #menu .current strong { 
      background:#a6d2de ;
      }
     
     
     
     
    /* Sub-Menu Styles
    ----------------------------------------------- */  
     
    #submenu{
      background:#e7ecff;   /* couleur du sous menu*/
      float:left;
      width:100%;
      font: bold 85% "Trebuchet MS",Verdana,Sans-serif;
      line-height:1em;
      color:#fff;
      margin-bottom:20px;
      }
    #submenu ul {
      margin:0;
      border-collapse:collapse;
      list-style:none;
      }	 
    #submenu li {
      display:inline;
      margin:0;
      padding:0;
      background-image:none;
      line-height:normal;
      text-indent:0;
      }
    #submenu a, #submenu strong {
      float:left;
      padding:8px 15px 8px;
      border-width:0;
      text-transform:uppercase;
      text-decoration:none;
      color:#039; /* couleur des liens du sous menu */
      }
     
    #submenu a:hover {		   /* couleur au passage de la souris */
      background:#b8c8fe;
      text-decoration:none;
      }			
     
    #submenu .current a, #submenu .current strong {    /* couleur du lien actif */
      background:#d0dafd;
      }
     
     
    /* Content 
    ----------------------------------------------- */  		
     
    div#content {
    	width:100%;
    	height:auto;
    	min-height:100px;
    	clear:both;
    	background-color:#fff;
    	}			
     
     
     
     
     
    /* Police
    ----------------------------------------------- */  			
     
    h1 {
    	font:bold 150% "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
    	text-decoration:underline;
      	color:#ee665a;
      }
     
     
     
     
    /* Table
    ----------------------------------------------- */  	
     
    #rounded-corner
    {
    	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    	font-size: 12px; 
    	clear:both;
    	margin:20 auto;
    	width: 60%;
    	text-align: center;
    	border-collapse: collapse;
     
    }
    #rounded-corner thead th.rounded-number
    {
    	background: #b9c9fe url('Pictures/left.png') left -1px no-repeat;
    }
    #rounded-corner thead th.rounded-end
    {
    	background: #b9c9fe url('Pictures/right.png') right -1px no-repeat;
    }
    #rounded-corner th
    {
    	padding: 8px;
    	font-weight: normal;
    	font-size: 13px;
    	color: #039;
    	background: #b9c9fe;
    }
    #rounded-corner td
    {
    	padding: 8px;
    	background: #e8edff;
    	border-top: 1px solid #fff;
    	color: #669; 
    }
    #rounded-corner tfoot td.rounded-foot-left
    {
    	background: #e8edff url('Pictures/botleft.png') left bottom no-repeat;
    }
    #rounded-corner tfoot td.rounded-foot-right
    {
    	background: #e8edff url('Pictures/botright.png') right bottom no-repeat;
    }
    #rounded-corner tbody tr:hover td
    {
    	background: #d0dafd;
    }
     
     
     
    /* Form
    ----------------------------------------------- */		
     
    /* regle la taille du formulaire  */
    #full {
    	position: relative;
    	width: 60%;
    	margin: 0 auto;
    	text-align: left;
    }
     
    fieldset {
    	margin-bottom: 1em;
    	border: 1;
    	width: auto;
    	margin: 0.5em;
     
    }
    fieldset p {
    	padding: 0 0 0.75em 0.5em !important;
    	padding: 0 0 0.35em 0.5em;
    	clear: both;
     
    }
    legend {
    	margin: 0 0 0.5em 0;
    	padding: 0.3em;
    	font: bold 120% "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    	color: #ee665a;
    	background-color:#fff !important;
    	background-color: none;
    }
    label.text {
    	background-color: #e7ecff;
    	display: block;
    	float: left;
    	width: 40%;
    	text-align: right; 
    	margin: 0 1em 0 0;
    	padding: 0.1em;
    	/*border-bottom: 1px solid #0198cd;	*/
    }
    .radioCheck {
    	margin: 0 1em 0 0.25em;	
    }  
    label.test {
    	background-color: #e7ecff;
    	display: block;
    	float: left;
    	width: 40%;
    	text-align: right; 
    	margin: 0 1em 0 0;
    	padding: 0.1em;
    	/*border-bottom: 1px solid #0198cd;	*/
    }
     
    input.text,
    textarea {
    	width: 40%;
    	border: #CCC 1px solid;
    	margin-right: 0.25em;
    }  
     
    /* champ Input couleur de selection et couleur de passage de la souris */
     
    input:hover, select:hover, input:focus, select:focus
    {
     
    	background-color: #e8edff;
    }
     
     
    .envoy {
    	margin: 1em 0;
    	text-align: center;
    }
    .envoy label {
    	border: 0;	
    }
    hr {
    	visibility: hidden;
    	clear: both;
    }
    span.note {
    	font-size: 0.75em;
    	color:red;
    }
    span.warning {
    	font-weight:bold;
    	font-size: 1em;
    	color: #ff0000;
    }
     
    span.mot {
    	font-weight:bold;
    	font-size: 1em;
    	color: #0033CC;
    }
     
    /* Mise en forme du bouton Submit et effacer */
     input[type="submit"]
    {
    	text-align:center;
    	border: #DDEEFF 1px solid;
    	width: 27%;
    }
     
     input[type="submit"]:hover
    {
    	text-align:center;
    	background-color: #66CC33;
    	cursor: pointer;
    }
     
     input[type="reset"]
    {
    	text-align:center;
    	border: #DDEEFF 1px solid;
    	width: 27%;
    }
     
     input[type="reset"]:hover
    {
    	text-align:center;
    	background-color: #E6484D;
    	cursor: pointer;
    }

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    1. Je n'ai rien compris à ton problème, sois plus clair.
    2. Merci de donner un code épuré de tout code PHP (cf les règles du forum).
    3. Donne un code minimaliste qui reproduit le problème et non pas tout ton code.
    4. qui rejoint 1. :
    Citation Envoyé par bullrot Voir le message
    si je met class="test" ca marche par contre class="test" ne marche pas.
    Mouais ...

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2005
    Messages
    593
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2005
    Messages : 593
    Par défaut
    voila j'ai essayé d'etre plus clair mais c'est pas évident.

    j'ai retiré aussi tout mon code php

    merci

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Je n'arrive toujours pas à voir quel est le problème exactement ..

    En prenant ton code et en faisant un copié/collé, que je mette class="text" ou class="test" ça me donne exactement le même résultat.

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2005
    Messages
    593
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2005
    Messages : 593
    Par défaut
    c'est bien ca le probleme... pourquoi es-ce toujours la meme chose ?


    j'ai changé la couleur dans le .css du test mais rien ne change

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    label.test {
    	background-color: red;

  6. #6
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Citation Envoyé par bullrot Voir le message
    pourquoi es-ce toujours la meme chose ?
    Parce que tes deux classes étaient strictement identiques :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    label.text {
    	background-color: #e7ecff;
    	display: block;
    	float: left;
    	width: 40%;
    	text-align: right; 
    	margin: 0 1em 0 0;
    	padding: 0.1em;
    	/*border-bottom: 1px solid #0198cd;	*/
    }
     
    label.test {
    	background-color: #e7ecff;
    	display: block;
    	float: left;
    	width: 40%;
    	text-align: right; 
    	margin: 0 1em 0 0;
    	padding: 0.1em;
    	/*border-bottom: 1px solid #0198cd;	*/
    }
    Citation Envoyé par bullrot Voir le message
    j'ai changé la couleur dans le .css du test mais rien ne change

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    label.test {
    	background-color: red;
    En modifiant cette ligne, le fond devient bien rouge de mon côté.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Peut-on faire du cluster avec winXP ?
    Par wikers dans le forum Windows XP
    Réponses: 37
    Dernier message: 02/06/2009, 11h13
  2. Réponses: 1
    Dernier message: 28/12/2007, 12h14
  3. Réponses: 6
    Dernier message: 11/12/2007, 17h55
  4. [C#] [VS.NET] Peut on faire un accesseur sur objets?
    Par Designotik dans le forum Windows Forms
    Réponses: 3
    Dernier message: 06/01/2005, 21h56
  5. Peut-on faire du son juste avec du code assembleur ?
    Par Rick1602 dans le forum Assembleur
    Réponses: 7
    Dernier message: 26/03/2004, 17h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo