28172 sujets

CSS et mise en forme, CSS3

Mauvaise gestion des display et position ?

Pages :
Bonjour tout le monde ... Smiley smile
Après avoir laisser les membres de ce forum tranquille un week-end je reviens à la charge avec un problème plutôt gênant Smiley confus

Donc voila je vous explique mon problème :

Je cherche à mettre des vignettes (en <img>) avec une petite phrase en dessous de chacune (en <p>)

Sous Safari et Google Chrome, parfait comme toujours. Smiley lol

Sur Mozilla à ma grande surprise, c'est franchement nul, j'ai mes vignettes, suivie du texte sur la même ligne Smiley ripperwhore Smiley decu

Ensuite IE 8 à ma grande surprise une fois encore, ça fonctionne impeccable !
Or, sur IE 7 j'ai mes 3 vignettes côte-à-côte (normal) mais j'ai un retour à la ligne par phrase après Smiley fache

Voila, je vous poste mon bout de code HTML :

		<div id = "Cadre">
			<div id = "Vignette" align = "center">
				<img src="../images/catmoteur.png">
				<img src="../images/catchassis.png">
				<img src="../images/catvisibilite.png">
				</br>
				<p>Catégorie Moteur</p>
				<p>Catégorie Châssis</p>
				<p>Catégorie Visibilité</p>
				</br>
				<img src="../images/catpieceasi.png">
				<img src="../images/catpneu.png">
				</br>
				<p>Catégorie Pièce Asiatique</p>
				<p>Catégorie Pneumatique</p>
			</div>
		</div>


Et mon CSS : 

#Vignette img, #Vignette p
{
	display : inline-block;
	
	border : 5px solid;
	width : 150px;
	margin-left : 70px;
	margin-top : 25px;
	
	-webkit-border-radius:75px 100px 100px 0px;
	-moz-border-radius:75px 100px 100px 0px;
	-o-border-radius:75px 100px 100px 0px;
	border-radius:75px 100px 100px 0px;
}

#Vignette
{
	display : block;
	width : 80%;

}


Voici l'adresse ou j'héberge actuellement le site http://eltakos.free.fr (pas pro je sais Smiley lol ) et me problème de vignette en question peux se trouver sur cette page par exemple http://eltakos.free.fr/vlvul/categorie.html

J'espère avoir fourni tout le nécessaire pour pouvoir m'aider le plus simplement possible pour vous ...

En vous remerciant Smiley cligne
Modifié par sonizef (04 Jun 2012 - 15:33)
Et si tu mettais des divs autour des éléments qui vont par paire ?

Logique, facile a manier et a reprendre par quelqu'un d'autre.

EDIT : aucun problème pour moi non plus (Firefox 12.0)
Modifié par Naemesis (04 Jun 2012 - 15:36)
Gothor a écrit :
Bonjour, aucun problème pour moi avec le code que tu as donné (testé sur dabblet)


Je viens de fournir en édit, les liens du site ( vers la fin du post ), si tu a Mozilla ou IE 7 je pense que tu pourra constater une nette différence au niveau des catégories entres les différents navigateurs Smiley smile
A part les coins arrondis sur FF et carrés sous IE, je vois pas... Même sur ton site directement...
Naemesis a écrit :
Et si tu mettais des divs autour des éléments qui vont par paire ?

Logique, facile a manier et a reprendre par quelqu'un d'autre.


Comme ça tu veux dire ? 

		<div id = "Cadre">
			<div id = "Vignette" align = "center">
                            <div id ="un">
				<img src="../images/catmoteur.png">
                            </div>
                            <div id ="deux">
				<img src="../images/catchassis.png">
                            </div>
                            <div id ="trois">
				<img src="../images/catvisibilite.png">
                            </div> 
				</br>
                            <div id ="un">
				<p>Catégorie Moteur</p>
                            </div>
                            <div id ="deux">
				<p>Catégorie Châssis</p>
                            </div>
                            <div id ="trois">
				<p>Catégorie Visibilité</p>
                            </div>
				</br>
				<img src="../images/catpieceasi.png">
				<img src="../images/catpneu.png">
				</br>
				<p>Catégorie Pièce Asiatique</p>
				<p>Catégorie Pneumatique</p>
			</div>
		</div>
Gothor a écrit :
A part les coins arrondis sur FF et carrés sous IE, je vois pas... Même sur ton site directement...



Sous chacune des vignettes (lorsque tu cliques sur l'onglet VL/VUL par exemple) tu a bien le petit texte qui correspond ?
Si oui je suis curieux de voir sous quel version sont tes navigateurs ?

EDIT : Oula ... C'est bizarre je suis sous FF 3.6.12 et j'ai le problème Smiley pendu
Modifié par sonizef (04 Jun 2012 - 15:43)
Je pense qu'il voulait plutôt dire
<div id="Cadre">
    <div id="Vignette" align="center">
        <div id="un">
            <img src="../images/catmoteur.png">
            <p>Catégorie Moteur</p>
        </div>
        <div id="deux">
            <img src="../images/catchassis.png">
            <p>Catégorie Châssis</p>
        </div>
        <div id="trois">
            <img src="../images/catvisibilite.png">
            <p>Catégorie Visibilité</p>
        </div>
        <div id="quatre">
            <img src="../images/catpieceasi.png">
            <p>Catégorie Pièce Asiatique</p>
        </div>
        <div id="cinq">
            <img src="../images/catpneu.png">
            <p>Catégorie Pneumatique</p>
        </div>
    </div>
</div>
N'oublie pas qu'un id ne peut être attribué qu'à un seul élément sur ta page.
sonizef a écrit :
Sous chacune des vignettes (lorsque tu cliques sur l'onglet VL/VUL par exemple) tu a bien le petit texte qui correspond ?
Tu parles des sous-menus ?

Je suis sous FF12 aussi.
Modifié par Gothor (04 Jun 2012 - 15:45)
Oui Gothor, un div par élément c'est pas utile, mais pour "lier" des éléments qui vont ensembles, c'est bien plus logique.
@Gothor non je voulais bien dire ce que j'ai écris ... ^^ je voulais laisser les balises vraiment où elles étaient
Le deuxième solution était justement la tienne, mais maintenant je me demande si je devrais changer si vous, vous n'avez aucun problème
Mon "Il" désignait Naemesis...

Et syntaxiquement, c'est plus logique...
Encore, qu'il faudrait peut-être voir du côté de figure, et figcaption
Modifié par Gothor (04 Jun 2012 - 15:46)
Ta manière de faire n'est pas géniale dans le sens où les éléments qui devraient aller ensemble dans le HTML sont totalement libres les uns par rapport aux autres.

Il faudrait mettre en place les divs qui permettent d'organiser le code
Naemesis a écrit :
Ta manière de faire n'est pas géniale dans le sens où les éléments qui devraient aller ensemble dans le HTML sont totalement libres les uns par rapport aux autres.

Il faudrait mettre en place les divs qui permettent d'organiser le code


Je ne comprend pas vraiment ce que tu veux dire ? Est ce que tu peux développer s'il te plait ?
Le code HTML est le squelette de ta page. Imagine que tes images sont des mains et tes <p> des avants bras.

Si, comme tu l'as fait, je met a part les images et les <p>, mes bras sont désarticulés et rien ne tient ensemble, tandis que je dis qu'il me faut quelque chose pour les lier ensemble, on sait que l'un va avec l'autre. les divs seraient alors des poignets.
Oui d'accord je vois ... En fait je pensais bien faire en séparant bien chaque chose puis on les ressemblant si nécessaire, mais c'était trop boiteux
sonizef a écrit :
c'était trop boiteux

C'est plutôt juste une habitude à prendre et à ne plus perdre.
Je tacherai de m'en souvenir Smiley cligne

Voila j'ai donc fais ça sur mon HTML : 

		<div id = "Cadre">
			<div id = "Vignette" align = "center">
			<div id = "moteur">
				<img src="../images/catmoteur.png">
				<p>Catégorie Moteur</p>
			</div>
			<div id = "chassis">
				<img src="../images/catchassis.png">
				<p>Catégorie Châssis</p>
			</div>
			<div id = "visibilite">			
				<img src="../images/catvisibilite.png">
				<p>Catégorie Visibilité</p>
			</div>
				</br>
			<div id = "pieceasi">
				<img src="../images/catpieceasi.png">
				<p>Catégorie Pièce Asiatique</p>
			</div>
			<div id = "pneu">
				<img src="../images/catpneu.png">
				<p>Catégorie Pneumatique</p>
			</div>
		</div>


Et ça sur mon CSS : 

#moteur, #chassis, #visibilite, #pieceasi, #pneu
{
	display : inline-block;
	
	border : 5px solid;
	width : 150px;
	margin-left : 70px;
	margin-top : 25px;
}

#Vignette img
{
	
	border : 5px solid;
	width : 150px;
	margin-top : 25px;
	
	-webkit-border-radius:75px 100px 100px 0px;
	-moz-border-radius:75px 100px 100px 0px;
	-o-border-radius:75px 100px 100px 0px;
	border-radius:75px 100px 100px 0px;
}


Résultat visible à cette adresse : http://eltakos.free.fr/vlvul/moteur.html

Par contre pour voir les bons résultats je dois pas oublié de vidé le cache et de me mettre en navigation privé (le CSS doit être dans le cache ou quelque chose du genre) mais j'ai l'impression que ça tiens la route sur tous les navigateurs (sauf peut être IE 7)
Pages :
Sujet clos
Aller à