28173 sujets

CSS et mise en forme, CSS3

bonjour, bonjour !!

J'essaye de faire un petit site pour quelqu'un et niveau CSS j'ai un petit problème.

Bon les couleurs c'est pas encore ça, mais je voudrais déjà réussir à définir le style général.

Sous IE c'est parfait , mais pas sous firefox ! Le cadre du corps de la page est riquiqui, ce qui fait que le texte dedans n'est pas dans le cadre!!

Voilà la page en test :
http://poopsinou.free.fr/Kanji-Society/accueil2.php

Et voilà un chouilla de CSS :

body 
{
	margin: 0; /* pour éviter les marges */
	text-align: center; /* pour corriger le bug de centrage IE */
	background: #CFE9E9 ;
}

#corps 
{
    margin: auto;
    width: 770px;
    text-align: left; /* on rétablit l'alignement normal du texte */
	border: 2px solid #9DC2D5;
	background: #fff;
	margin-top : 10px;
}

div#header
{
	height: 150px ;
	background-image : url(banniere.png);
	margin: 0;
}

div#contenu
{
	float : right;
	width : 638px;
	background: url(bg_page.gif) no-repeat 15px 15px ;
}


Quelqu'un pourrait m'expliquer ce qui se passe sous Firefox ?
Merci d'avance! Smiley smile
Modifié par poopsinou (13 Jul 2006 - 10:14)
Bonjour,
Problème classique : firefox se comporte normalement puisqu'un bloc
conteneur ne devrait pas s'adapter à un contenu hors flux (élément en
position:absolute ou flottant) et comme tu as le div#contenu qui est flottant
pour le conteneur c'est comme s'il n'était pas présent.
Il y a plusieurs solutions à ce problèmes que je te conseil de lire plutôt que de
te donner la solution :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
http://openweb.eu.org/articles/initiation_float/
Modifié par Hermann (13 Jul 2006 - 12:41)
Merci pour ta réponse!!

J'ai lu ce qui avait sur le premier lien mais pas le 2°, parce que ça marche pas Smiley confus

DOnc le problème vient du fait que mes éléments soit en float ... Et si je veux les garder en float, il y a une méthode pour régler le problème ?? Ou un lien qui en parle ou quelque chose dans le genre que je regarde un peu ?? En attendant je vais chercher pour voir.

EDIT : Finalement, j'ai trouvé une solution en qulques secondes sur ce site. J'ai ajouté <div style="clear: both;">&nbsp;</div> juste avant la fermeture du bloc parent et ça amrche. Je ne sais pas si c'est la bonne solution, mais bon !! Smiley lol
Modifié par poopsinou (13 Jul 2006 - 13:46)