Discussion :

[hamzaHDR]

Bonjour les amis,

Je sais que c'est un sujet très dépasse mais je veux une solution rapide et efficace.

Je base sur la création de mon site sur une Template (compatible avec tous les navigateur), mais comment je peux faire et ajouter des codes CSS pour qu'il soit compatible ?

je suis offert a vos suggestions les amis.

Merci.

Cordialement,

[Doksuri]

HTML4, CSS2 et ES5
tu seras pleinement compatible.
mais tu ne pourras peut-etre pas faire tout ce que tu reves de realiser

[hamzaHDR]

@Doksuri

Merci pour la réponse, en effet je ne suis un développeur web mais j'ai des connaissance en css,html, js et php.

bonjour je veux juste votre recommandation, vu que tu es un développeur Web.

Comme j'avais dis je travaille sur une Template qui es compatible avec tous les navigateurs, mais que j'ajoute des contenus au niveau de CSS, là ou les problèmes commencent.

[Invité]

Bonjour,

il faut respecter les recommandations du W3C.

Que veux-tu qu'on te dise ??
Montre-nous du code qui ne va pas.
Là, on te dira ce qu'on en pense.

[hamzaHDR]

Montre-nous du code qui ne va pas.

Merci pour la réponse, d'accord voila le code qui ne marche pas

Le code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 <div class="Back">
  <form >
    <div class="row_ligne">
<div class="row_ligne" id = "mark" >
      <div class="col-25">
        <label for="subject">Age </label>
      </div>
      <div class="col-75">
          <input type="text" id="returns" name="returns" placeholder="Votre age">
      </div>
    </div></div></div></div>

Le code CSS :

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
Back{
    box-sizing: border-box;
}
 
.Back input[type=text]{
    width: 50%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}
 
.Back label {
	float: right;
    width: 45%;
    margin-top: 10px;
}
 
.col-25 {
    float: left;
    width: 25%;
    margin-top: 10px;
 
}
 
.col-50 {
    float: left;
    width: 50%;
    margin-top: 15px;
	margin-left : 20px;
}
 
.col-75 {
    float: left;
    width: 60%;
    margin-top: 6px;
}
 
/* Clear floats after the columns */
.row_ligne:after {
    content: "";
    display: table;
    clear: both;
}
 
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75,.col-45 input[type=submit] {
        width: 50%;
        margin-top: 0;
    }
}

Voila les résultats entre Google Chrome et Firfox

Firfox :



Chrome :

[psychadelic]

tu n'utilises pas de reset css ?

c'est indispensable.

sinon, la ligne 11 est fausse : </div></div></div></div>
ce devrai être : </div></div></form></div>

ca se voit du premier coup d'oeil dans l'endentation avec beautyfy.

[Invité]

Bonjour,

...Je base sur la création de mon site sur une Template (compatible avec tous les navigateur), ...,

On ne pourra pas t'en dire plus si on ne connait pas ta base de travail... (Quel template ?)
Et si tu as une page en ligne, c'est mieux.