28173 sujets

CSS et mise en forme, CSS3

Salut, mon site a un problème d'affichage sous firefox les bloc qui se touche(sur les autres pages comme rubrique histoire) ...
J'aimerais savoir quel est la source du problème. Au départ je n'avais pas pensé à la compatibilité avec les autres navigateurs, et donc il ne marche qu'avec internet explorer. Smiley decu
L'adresse c'est : http://yugimaniafr.free.fr
Merci.
Modifié par moumou124 (18 Feb 2007 - 20:02)
Hello,

Sois plus précis, de quels blocs parles tu ?

Des colonnes (entre elles)?

Des blocs dans les colonnes ?

Tu as l'air de donner un contenu trop grand pour la taille en largeur de la colonne du milieu, un scrool apparait...

Attention à la colonne de gauche , quand on agrandi le texte le contenu des rubriques passe en dessous du titre de rubrique suivant.

Je n'ai pas pris le temps de regarder ton code, mais essayes de jouer avec les marges (margin...padding) sur tes blocs qui se touchent...
Modifié par Hum (18 Feb 2007 - 20:43)
Le problème est sur le message juste en dessous(désolé pour le double message).
Modifié par moumou124 (19 Feb 2007 - 12:06)
Le problème et que la taille des colonnes est différente avec firefox alors que c'est la même sur internet explorer.
Modifié par moumou124 (19 Feb 2007 - 12:06)
Peut etre qu'une recherche du coté de la technique des "colonnes factices" est ce qu'il te faut...?

Je n'ai jamais essayé je ne peux donc pas t'en dire plus.

Cherche ici avec "colonnes factices" ou "3 colonnes de meme hauteur" et tu devrais trouver.
bonjour,
j'ai trouvé plusieurs choses:

- dans la classe texte mettre le padding à 0px semble résoudre le problème

par contre toujours dans la css 'background' est mal ortographié 4 fois

- le validateur html lui reste très faché avec ton code! Smiley decu

Bon courage.
Le problème c'est que j'ai lu de nombreux tutoriaux sur les colonnes factices en anglais et français mais je comprend toujours pas comment cela fonctionne. Smiley confus
Modifié par moumou124 (20 Feb 2007 - 13:16)
moumou124 a écrit :
Le problème c'est que j'ai lu de nombreux tutoriaux sur les colonnes factices en anglais et français mais je comprend toujours pas comment cela fonctionne. Smiley confus

C'est pourtant simple : on ne fait pas deux colonnes de même hauteur, mais on en donne l'impression. C'est du trompe-l'oeil.

<div id="conteneur">
	<div id="colonne1">...</div>
	<div id="colonne2">...</div>
</div>

Le contenu va dans div#colonne1 et div#colonne2, que l'on mettra côte-à-côte en faisant flotter div#colonne1 à gauche ou à droite, ou encore en positionnant div#colonne1 ou div#colonne2 en absolu. Il s'agit simplement ici de faire une mise en page en deux colonnes, sans se préoccuper de l'habillage graphique.

Ensuite, il s'agit juste de donner à div#conteneur une image de fond répétable en hauteur qui dessinera les deux colonnes, et de s'assurer que les deux colonnes seront bien comprise dans div#container (ce qui risque d'être difficile avec une colonne positionnée en absolu, mais est relativement simple pour des colonnes flottantes).

Mais si vraiment on n'y arrive pas, ne pas se prendre la tête pendant des heures et faire un tableau à deux colonnes. Smiley smile
Florent V. a écrit :

C'est pourtant simple : on ne fait pas deux colonnes de même hauteur, mais on en donne l'impression. C'est du trompe-l'oeil.

<div id="conteneur">
	<div id="colonne1">...</div>
	<div id="colonne2">...</div>
</div>

Le contenu va dans div#colonne1 et div#colonne2, que l'on mettra côte-à-côte en faisant flotter div#colonne1 à gauche ou à droite, ou encore en positionnant div#colonne1 ou div#colonne2 en absolu. Il s'agit simplement ici de faire une mise en page en deux colonnes, sans se préoccuper de l'habillage graphique.

Ensuite, il s'agit juste de donner à div#conteneur une image de fond répétable en hauteur qui dessinera les deux colonnes, et de s'assurer que les deux colonnes seront bien comprise dans div#container (ce qui risque d'être difficile avec une colonne positionnée en absolu, mais est relativement simple pour des colonnes flottantes).

Mais si vraiment on n'y arrive pas, ne pas se prendre la tête pendant des heures et faire un tableau à deux colonnes. Smiley smile

Ok, j'ai compris au fait c'est le prolongement de la colonne par le conteneur qui fait comme si c'est celle-ci .