28220 sujets

CSS et mise en forme, CSS3

Les divs : IE firefox : le clash. espaces intempestifs

Salut à tous,

Bon je n'ai pas un ultra bon niveau en css mais apres moult recherches, essais,lectures de doc... je pense que j'ai bien compris le fontionnement du css. Le probleme c'est que je crois que je ne l'ai pas forcement bien compris (sinon je ne serais pas ici en train d'ecrire ^^)

Donc voici le probleme : je créé un bloc composé de div dans lesquels il y a des images. Voici l'exemple :


<div class="block">
<div class="titre">
titre du block
</div>
<div class-"contenu">
contenu du truc
</div>
<div classe="pied">
</div>
</div>


Bon jusque là rien de bien compliqué...
un bloc dans lequel sont imbriqués trois autres.
Voici le css correspondant :


.block {
	font-family: Helvetica;
	font-size: 14px;
}

.block .titre {
	background-image: url("/themes/default/images/entete_haut.gif");
	background-repeat: no-repeat;
	width: 200px;
	height: 26px;
	font weight: bold;
}

.block .contenu {
	background-image: url("/themes/default/images/entete_contenu.gif");
	background-repeat: repeat-y;
	font-size: 12px;
	width: 200px;
}

.block .pied {
	background-image: url("/themes/default/images/entete_bas.gif");
	background-repeat: no-repeat;
	height: 15px;
	width: 200px;
}


Donc là dans le css, je met juste ke je veux une image de fond, quelle taille l'image fait et une ou deux babiole sur la police de caractere.
Donc dans la logique du truc, IE m'affiche pile poil ce que je veux...c'est a dire mes blocks assemblés (car mes trois images sont en fait une seule image coupée en trois et qui s'assemblent.)
Maintenant, sous firefox, ca passe pas. il me colle un espace entre chaque DIV... j'ai bien essayé avec du padding, du margin ou je ne sais quoi mais rien a faire, j'ai toujours ces espaces sous firefox alors que sous IE tout baigne...

Je crois que c'est ce genre de choses qui font que je ne comprend plus tout au css... Je sais que IE est particulier car propriétaire mais bon dans mon cas, c'est le comble car c'est lui qui fonctionne...

Alors si vous pouviez juste m'eclaircir, ou juste me donner la voix a suivre, ca serait super gentil ^^ j'ai maté les tutos d'alsa, d'autres sites mais je ne trouve pas.... Smiley decu

Merci d'avance

@++
Bonjour,

zax-tfh a écrit :
Donc voici le probleme : je créé un bloc composé de div dans lesquels il y a des images.


Tes images elles correspondent à quoi, elles participent du contenu de ta page ou ne sont-elles que de l'ornementation ?

Les "divs" n'ont pas de marges externes définies et restituées par tel ou tel agent utilisateur par défaut, par contre d'autres éléments se trouvant dans les "divs" peuvent en avoir. Dans ton exemple il n'y en a pas Smiley decu .

Je reviens sur les "divs" et sur ton utilisation. Je vois dans ton extrait que tu utilises des <div class="titre"> ou autres <div class="contenu"> qui intègrent directement du contenu, tu devrais t'intéresser de plus prêt à html et remplacer avec profit tes divs par les élements html adéquats lorsque nécéssaire, comme un niveau de titre hn suivi d'un p ou autre suivant la nature du contenu que tu as à restituer. L'utilisation des styles devient bien plus simple dans ces conditions Smiley cligne .

Sinon tu n'est pas au bout de tes lectures, voir ce post méthodologique de Raphaël: Méthodologie pour résoudre les problèmes d'affichage en CSS. A compléter par cette lecture sur la cascade: Comprendre la cascade.

ps: avec ta page complète -idéalement en ligne- ce serait l'idéal Smiley cligne .
Merci beaucoup pour cette reponse, je crois que ca remet en question ce que je croyais avoir saisi et donc me donne enfin une bonne direction ^^
En fait pour mon probleme, c'etait un probleme de margin: 0; que je n'avais pas mis... Bon c'est les aléas...enfin ca fonctionne c'est le principal.

Maintenant, concernant l'utilisation des balises Hn, P ... en fait j'avais testé mais comme ca merdouillait, j'ai pensé que ca venait de là. Maintenant, je vais opter pour cette methode.

Le seul probleme auquel je fais face maintenant, c'est une sorte de referenceur de propriétés possibles pour une balise (par exemple pour P j'aimerai savoir quelles propriétés sont disponibles car apparement le background-image n'a pas l'air de fonctionner...)

Donc en fait, ce serait plus un probleme d'adresses qui me manquent ^^
je cherche, je fouine, mais beaucoup de site expliquent des principes, mais je ne trouve pas vraiment de base de connaissances ou tout du moins de references...
J'ai bien tenté le site du W3C mais j'ai attrapé une jaunisse à chercher Smiley lol

En tout cas, merci, je vais continuer dans cette direction et ca me remotive a garder le CSS ^^

++
zax-tfh a écrit :
Le seul probleme auquel je fais face maintenant, c'est une sorte de referenceur de propriétés possibles pour une balise (par exemple pour P j'aimerai savoir quelles propriétés sont disponibles car apparement le background-image n'a pas l'air de fonctionner...)


P, comme n'importe quel autre élément de texte, et comme pratiquement tous les éléments HTML, peut "avoir un background-image".

Il faut que tu corrige une erreur de perception du rapport HTML - CSS : ce sont sont pas les éléments HTML qui ont des propriétés CSS, et qui aurient donc chacun des propriétés CSS différentes. Chaque élément HTML crée une "boîte CSS" qui peut être de deux types. Les propriétés CSS appliquables dépendent du type de boîte. Voir l'article de Raphaël sur ce sujet dans les tutoriels.
Sujet clos
Aller à