28173 sujets

CSS et mise en forme, CSS3

Balise<H1><H2>etc. différentes sous IE et FF +saut ligne a

Bonjour à tous,
après maintes recherchesn je ne trouve pas la solution, voici mon problème :
J'ai une liste de magasins dans une page, et le nom des magasins est en <H3>
Dans mon CSS, j'ai }
h1, h2, h3, h4, h5, h6 { margin:0; display:inline;
}

Mais j'ai un problème, sur IE, tout est nikel, par contre, sous Firefox, les balises H sont beaucoup plus petites !
Une solution svp ?

Aussi, après mes tableaux, j'ai toujours un saut de ligne alors que je n'ai pas de <br>, est ce arrivé à quelqu'un ? Quelle est la solution svp ?

Merci d'avance pour vos réponses
Pour ton premier problème il suffit de fixer une taille de police à tes titres. La taille par défaut est effectivement plus petite sur Firefox que sur IE. (par contre des titres en display:inline c'est un peu bizarre mais pourquoi pas)

Pour le deuxième souci, si un contenu passe à la ligne c'est qu'il n'a pas la place de s'afficher à coté ou que ce contenu est un bloc et donc induit un retour chariot avant et après lui... tu peux éventuellement fixer une largeur à tes tableaux pour régler ça mais ça dépend un peu du contexte.
Salut MrPatate et merci, la solution pour les balises <H.> fonctionnent.

Par contre, pour les tableaux, j'ai crée une class avec une largeur fixe, et j'ai toujours le même problème... voici une portion du code HTML : 

                        Voici la liste des magasins de Paris
                        <br>
                        <br>
                        <table border="0" cellspacing="0" cellpadding="0" class="table-magasin">
                          <tr>
                            <td class="edito"><h5 ><span ><img src="../puce.jpg" alt="nianiania" width="25" height="25"><span class="services">La Joie pour Tous </span></span></h5></td>
                          </tr>
                          <tr>
                            <td class="edito"><p><strong>37, boulevard St Germain </strong><br>
                                <strong>75005 Paris </strong><br>
                                <br>
                                Tél : 01 43 54 98 67<br>
                                <br>
                                <strong>Horaires d'ouverture :</strong>                                <br>
                                Ouvert du Lundi au Samedi de 10h à 13h et de 14h30 à 19h30 <br>
                              <br>
                            </p>
                            </td>
                          </tr>
                        </table>
                        
                        <table border="0" cellspacing="0" cellpadding="0" class="table-magasin">
                          <tr>
                            <td class="edito"><h5 ><span><img src="../puce.jpg" alt="nianiania" width="25" height="25"><span class="services">Paris Jouets </span></span></h5></td>
                          </tr>
                          <tr>
                            <td class="edito"><p><strong>20, avenue Trudaine  <br>
                              75009 Paris </strong><br>
                                    <br>
                              Tél : 01 48 78 23 85<br>
                              <br>
                              <strong>Horaires d'ouverture :</strong> <br>
                              Ouvert du Mardi au Samedi de 10h30 à 19h30 <br>
                              <br>
                            </p></td>
                          </tr>
                        </table>


Et le CSS : 
.edito {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	width: 500px;
}
.table-magasin {
width:500px;
}


Toujours cet espace après les tableau Smiley ohwell
c'est parce que le tableau est par défaut un conteneur "bloc", comme un titre hn.
tu as mis tes titres en display inline, ce qui fait que tu peux écrire "à la suite" du titre, autrement ça passerait automatiquement la la ligne aussi ...
pour ton pb, si j'ai bien saisi, il faudrait soit passer le tableau en inline (et encore, je ne suis pas sûr que ça fonctionne), soit le passer dans un conteneur en marge flottante...

genre :

<div style="width:500px; float:left;">
... ton tableau...
</div>

<div style="width:100px; float:right;">
...ton texte...
</div>

<div style="clear:both;"></div>
Sujet clos
Aller à