Sujets similaires

Sujet: Problème à l'affichage Ven 25 Oct 2013, 14:42

Bonjour/Bonsoir.
J'ai passé un petit moment sur un code pour une fiche pour bestiaire de forum. Et il s'est avéré qu'aux tests, l'affiche ne s'affichait pas comme elle le devait.
Sous Chrome, que j'utilise, je vois ceci :
http://gyazo.com/bcba7af91c3f9b037004e983dc004dbd

En revanche, les utilisateurs de Firefox voyaient ceci :
https://nsa34.casimages.com/img/2013/10/25//131025063810574292.jpg

J'ai donc fait des changement pour utiliser du css, et je vois ceci :
http://gyazo.com/c87dce2eccaadd27b14c6c83d858040f

Voilà ce qui concerne le css

Code:: <style type="text/css">
#table1{
position : absolute;
width:200px;
height:200px;
text-align: justify;
font-family : Oldenburg;
margin-left : 10px;
margin-bottom: 30px;
background-color : #9E9E9E;
border-top : 2px solid #5A5E6B;
border-bottom : 2px solid #5A5E6B;
border-left : 2px solid #5A5E6B;
border-right : 2px solid #5A5E6B;
}
#table2{
position : absolute;
width:200px;
height:200px;
text-align: justify;
font-family : Oldenburg;
margin-left : 10px;
margin-bottom: 30px;
background-color : #9E9E9E;
}
#cadre1{
width : 200px;
height : 200px;
border-top : 2px solid #5A5E6B;
border-bottom : 2px solid #5A5E6B;
border-left : 2px solid #5A5E6B;
border-right : 2px solid #5A5E6B;
}
#cadre2{
width : 200px;
height : 200px;
border-top : 2px solid #5A5E6B;
border-bottom : 2px solid #5A5E6B;
border-left : 2px solid #5A5E6B;
border-right : 2px solid #5A5E6B;
}
</style>

Et ce que j'ai en HTML

Code:: <div style="height : 450px; width: 450px; border: 5px solid grey; background-color: #CECECE;">
<center><div style="position: relative; float : left;"><img src="lien de l'image en 200*200" style="width:200px; height : 200px; border:2px solid #5A5E6B; margin-left : 15px; margin-top: -10px;"></div>
<div style="position: relative; float : right;"><div style="position: relative; overflow: auto; width:200px; height:200px; text-align: justify; font-family : Oldenburg; margin-right : 20px; margin-top: -28px; background-color : #9E9E9E; border : 2px solid #5A5E6B;">
<span style="color:#BB0B0B; font-family : Eater; font-size : 20px; text-align : center;"> Nom du monstre </span>

<span style="color:#766F64; font-family : Jolly Lodger; font-size : 30px;">Race :</span> Texte ici

<span style="color:#766F64; font-family : Jolly Lodger; font-size : 30px;">Dangerosité :</span> Texte ici

<span style="color:#766F64; font-family : Jolly Lodger; font-size : 30px">Puissance :</span> Texte ici</div>
</div></center>
<center><table cellspacing="50%"><tr><td>
<td><div id="cadre1"><div id="table1"><span style="color:#BB0B0B; font-family : Eater; font-size : 20px; text-align : center;">Caractère</span>
Texte ici</div></div></td></td>
<td><div id="cadre2"><div id="table 2"><span style="color:#BB0B0B; font-family : Eater; font-size : 20px; text-align : center;">Description</span>
Texte ici</div></div></td></tr></table></center>
</div>

Je n'ai pas tout mis en css, peut-être aurais-je dû. Mais étant débutante, je suis un peu perdue. Je n'ai ni couleur de fond, ni cadre, aussi bien sous Chrome que sous Firefox.
Que dois-je faire ?

Sujet: Re: Problème à l'affichage Sam 26 Oct 2013, 09:44

Petite question, pourquoi faire le choix de mettre une partie du CSS dans le HTML directement, et une autre partie directement dans la feuille de style ?

Seconde question, pourquoi utiliser des float pour les cadre du haut, et un tableau pour celui du bas ? ^^

Je te conseille de remanier ton code, en utilisant seulement des div (pas de tableaux). Pour l'instant oublie les float et autre, pas grave si elles sont en dessous les unes des autres. Pense à mettre un maximum de code dans la feuille de style plutôt que directement dans le HTML Smile

Une fois que cette partie marche bien sur Firefox et Chrome (tous les cadres les uns sous les autres), peux tu me poser ton HTML et ton CSS s'il te plait ?

Sujet: Re: Problème à l'affichage Lun 28 Oct 2013, 14:45

J'ai refait le code entièrement.
Dans ma feuille de style, j'ai ceci :

Code:: #fond {
height : 450px;
width: 450px;
border-top: 5px solid grey;
border-bottom: 5px solid grey;
border-left: 5px solid grey;
border-right: 5px solid grey;
background-color: #CECECE;
}
#image {
position: relative;
float : left;
}
.bloc1 {
position: inline;
float : right
overflow: auto;
width:200px;
height:200px;
text-align: justify;
font-family : Oldenburg;
margin-right : 20px;
margin-top: -20px;
background-color : #9E9E9E;
border-top : 2px solid #5A5E6B;
border-bottom : 2px solid #5A5E6B;
border-left : 2px solid #5A5E6B;
border-right : 2px solid #5A5E6B;
}
.bloc2 {
position: inline;
float : left
overflow: auto;
width:200px;
height:200px;
text-align: justify;
font-family : Oldenburg;
margin-left : 20px;
margin-bottom: 30px;
margin-top : 10px;
background-color : #9E9E9E;
border-top : 2px solid #5A5E6B;
border-bottom : 2px solid #5A5E6B;
border-left : 2px solid #5A5E6B;
border-right : 2px solid #5A5E6B;
}
.bloc3 {
position: inline;
float : right
overflow: auto;
width:200px;
height:200px;
text-align: justify;
font-family : Oldenburg;
margin-right : 20px;
margin-bottom: 30px;
margin-top : 10px;
background-color : #9E9E9E;
border-top : 2px solid #5A5E6B;
border-bottom : 2px solid #5A5E6B;
border-left : 2px solid #5A5E6B;
border-right : 2px solid #5A5E6B;
}

Et pour le HTML :

Code:: <link href='http://fonts.googleapis.com/css?family=Oldenburg|Eater|Jolly+Lodger' rel='stylesheet' type='text/css'>
<div id="fond">
<div id="image"><img src="lien de l'image en 200*200" style="width: 200px; height: 200px;margin-left: 20px; margin-top : -2px; border : 2px dotted #5A5E6B;"></div>
<div class="bloc1">
<span style="color:#BB0B0B; font-family : Eater; font-size : 20px; text-align : center;"> Nom du monstre </span>

<span style="color:#766F64; font-family : Jolly Lodger; font-size : 30px;">Race :</span> Texte ici

<span style="color:#766F64; font-family : Jolly Lodger; font-size : 30px;">Dangerosité :</span> Texte ici

<span style="color:#766F64; font-family : Jolly Lodger; font-size : 30px">Puissance :</span> Texte ici</div>

<div class="bloc2">
<span style="color:#BB0B0B; font-family : Eater; font-size : 20px; text-align : center;">Caractère</span>
Texte ici</div>

<div class="bloc3"><span style="color:#BB0B0B; font-family : Eater; font-size : 20px; text-align : center;">Description</span>
Texte ici</div>
</div>

Tout est parfait pour Chrome, mais avec Firefox, le cadre de l'image disparaît, et du coup, le cadre en dessous remonte.

Firefox
https://nsa34.casimages.com/img/2013/10/28//131028064027430448.png

Chrome
http://gyazo.com/ed8101c8e70e5c4199b7053544fb4572

En fait, je travaille mon CSS sur Notepad++, et je ne sais pas comment intégrer mon fichier après, d'où le fait que le CSS soit dans le message.

Sujet: Re: Problème à l'affichage Lun 28 Oct 2013, 15:09

Pense à définir une taille aussi pour le bloc d'image ^^

Pour simplifier la lecture de ton CSS, je vais te donner quelques conseils qui te feront gagner du temps Razz

Sinon dans ton CSS tu as :

Code:: border-top: 5px solid grey;
border-bottom: 5px solid grey;
border-left: 5px solid grey;
border-right: 5px solid grey;

Tu peux simplifier en :

Code:: border: 5px solid grey;

Même chose pour les autres border.

Dans ton CSS il y a ça... Je crois qu'il y a un problème o___0. Il n'y a pas de valeur inline pour position ^^'

Code:: position: inline;

Enfin dernière chose, tu répètes plusieurs propriétés pour le bloc3, le bloc2, etc...
Cela serait plus simple de faire une class "bloc" dans laquelle tu mets toutes les propriétés communes (celles qui seront pour tous les blocs les mêmes).

Ensuite dans ton HTML tu fais comme ça pour tes div :

Code:: <div class="bloc bloc3"> </div>

Et dans le CSS pour ".bloc3" tu mets juste ce qui est spécifique au bloc 3 ^^

Sinon, est ce que c'est si tu remplaces tes "float: left" (ou right) par "display: inline-block" ça marche mieux ?

Sujet: Re: Problème à l'affichage Mar 29 Oct 2013, 07:20

Je vais essayer ça alors, merci. ^^

Problème à l'affichage

Problème à l'affichage

Sujets similaires

Sujets similaires

Partenaires Or