28220 sujets

CSS et mise en forme, CSS3

Gros probleme sous firefox

Bonjour a tous,
Je suis en ce moment en train de m'entrainer a faire des decoupes et prog de webdesign. J'ai donc codé un design, et tiou fonctionne parfaitement sous IE...
voila l'adresse : ici
et le css : 
body {
	background: #e5e5e5;
	width: 800px;
	margin: auto;
	padding: 0px;
	font-family: Verdana, Arial, Serif, Times;
	font-size: 10px;
}

#header {
	background-image: url("images/header.png");
	margin: 0px;
	width: 800px;
	height: 130px;
	background-repeat: no-repeat;
	float: left;
}

#corps {
	background-image: url(images/fond.png);
	background-repeat: repeat-y;
	height: auto;
	width: 800px;
}

#menugauche {
	width: 136px;
	float: left;
	margin-top: 15px;
	padding: 0px;
	margin-left: 37px;
	margin-right: 17px;
	display: inline;
}

#menudroite {
	width: 136px;
	margin-top: 15px;
	padding: 0px;
	margin-right: 37px;
	margin-left: 17px;
}

#graphX_nom {
	width: 136px;
	height: 23px;
	background-image: url(images/GraphX_nom.png);
	background-repeat: no-repeat;
	margin-bottom: 3px; 
}

#services_nom {
	background-image: url(images/services_nom.png);
	width: 136px;
	height: 23px;
	background-repeat: no-repeat;
	margin-bottom: 3px;
}

#outils_nom {
	background-image: url(images/outils_nom.png);
	width: 136px;
	height: 23px;
	background-repeat: no-repeat;
	margin-bottom: 3px;
}

#ressources_nom {
	background-image: url(images/ressources.png);
	width: 136px;
	height: 23px;
	background-repeat: no-repeat;
	margin-bottom: 3px;
}

#tutoriaux_nom {
	background-image: url(images/tutoriaux.png);
	width: 136px;
	height: 23px;
	background-repeat: no-repeat;
	margin-bottom: 3px;
}

#partenaires_nom {
	background-image: url(images/partenaires.png);
	width: 136px;
	height: 23px;
	background-repeat: no-repeat;
	margin-bottom: 3px;
}

#contenu {
	margin-top: 15px;
	float: left;
}

#texte {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	width: 420px;
}

#titre {
	text-align: center;
	width: 422px;
	height: 23px;
	padding: 4px;
	background-image: url(images/titre.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	font-weight: bold;
	
}

.menu_contenu {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	margin-bottom: 3px;
	padding: 3px;
}

a:hover {
	font-weight: bold;
	text-decoration: none;
}

a, a:visited, a:active {
	text-decoration: underline;
	color: #000000;
}

p {
margin: 5px;
}

seulement, si vous allez voir avec firefox, ben... ca ne marche pas du tout!
Donc si quelqu'un pouvait m'eclairer...

Je précise que le design n'est pas de moi, et que je l'ai emrunté a son auteur pour m'entrainer. d'ailleurs, une fois le probleme résolu, je supprimerais ces pages du web.
Keeper a écrit :
J'ai donc codé un design, et tiou fonctionne parfaitement sous IE...
seulement, si vous allez voir avec firefox, ben... ca ne marche pas du tout!


Euh...
Une petite capture d'écran peut-être.

Simplement pour voir comment tu "voeux" que cela marche et comment cela ne marche pas Smiley cligne

Et tu utilises "tux" comme icone dans un site qui "marche" avec IE et pas FF Smiley eek
Modifié par h2o (22 Aug 2005 - 18:42)
lu
voila la capture : clik ic]

pour ce que j'aimerais obtenir, il suffit d'aller sur la page avec IE.
quand au tux, comme ce n'est pas moi qui ai réalisé le design, je ne m'en suis pas préoccupé.
merci d'avance,
Modifié par Keeper (22 Aug 2005 - 19:07)
Keeper a écrit :
lu
voila la capture : clik ic]
pour ce que j'aimerais obtenir, il suffit d'aller sur la page avec IE.

Capture ????
IE. Quelle version. Sur quel OS ?
Tu me montres ce qui est "moche".
Je voudrais voir ce que tu aimes.

L'OS, pas de rapport ?? : IE sous Windows, c'est probablement 90 % des utilisateurs, et peut-être ( Smiley cligne Smiley cligne Smiley cligne Smiley cligne Smiley cligne ) autant d'incompatibilités avec les standards (là, j'exagère volontairemement).

Moi, je suis dans les 10 % de la première affirmation.
oui lol moi je vois aussi ce qui est moche mais pas ce qui est beau Smiley langue car sous nunux c pas évident de voir ce que ça donne sous IE (enfin là mon IE avec wine ne veut pas se lancer grrr)
Salut j'ai jeté un coup d'oeil et je te suggère d'ajouter ceci

#corps WIDTH: 850px; car 800 c'est trop petit.
#menudroite float:left;

bonne chance
Bonjour,

J'ai deux piste a te proposer :

1-
Même mise en page que ce modèle.

Il faudrai appliquer un "float:right" a ta colonne de droite, definir les marges droite et gauche de ton contenu, et respecter un certain ordre d'apparition dans ton code HTML.

2-

Sinon, pour m'amuser, j'ai modifier ca dans ta feuille de style (celle présente dans ta page HTML, j'ai virer l'autre):

#menudroite {
	float:left; /*ICI*/
	width: 136px;
	margin-top: 15px;
	padding: 0px;
	margin-right: 37px;
	margin-left: 17px;
}
#contenu {
	margin-top: 15px;
	float: left;
	width:420px; /*ICI*/
}
#texte {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	width: 416px; /*ICI*/
}

#titre {
	text-align: center;
	width: 410px; /*ICI*/ /* RETRAVAILLER LA DIMENSION DE TON IMAGE */
	height: 23px;
	padding: 4px;
	background-image: url(images/titre.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	font-weight: bold;
	
}
/* AJOUTE CA */
hr {
	clear: both; visibility: hidden;
}


et ca dans ton HTML :

</div><!-- fermeture du menudroite -->
<hr /> <!-- ICI -->
</div> <!-- fermuture du corps -->


J'ai récupérer toutes tes images, pour voir si tout été bon, est a priori, chez moi, sous firefox et i.e tout fonctionne bien.

Voila mes 2 pistes, la seconde, c'est ma popotte perso, ca vaut ce que ca vaut n'étant pas un "pro de la css" Smiley smile .

En espérant t'avoir aider.
mjoly a écrit :
Salut j'ai jeté un coup d'oeil et je te suggère d'ajouter ceci

#corps WIDTH: 850px; car 800 c'est trop petit.
#menudroite float:left;

bonne chance

Il me semble que 800px est deja trop grand pour les résolution en 800x600, apparition de scrollbar horizontal, alors 850px Smiley cligne . Le maximum avant apparition de scrollbar horizontal sous i.e est de 768px si je ne me trompe pas.
Modérateur
bonjour,
simplement pour placé une colonne menu a droite et a gauche tu utilise un float right et un float left respectivement pour l'un et l'autre. il doivent etre dans le flux, avant le conteneur centrale auquel tu luit met un margin right et gauche de la largeur des 2 elements flottant + au moins 3 px (pour eviter que IE te le vire en dessous., ensuite cela etant fait ton centre restera entre les menus et si ta page est en largeur fixe sa largeur ne changera pas, si ta page s'etend sur 100% de la largeur, le bloc centrale s'etirera pour remplir tout l'espace entre tes 2 colonnes de menus.

donc reprenons
1 conteneur en largeur fixe ou non.
1 menus gauche = float:left; + largeur fixe
1menus droite = float:right; + largeur fixe
1 centre = margin-left: largeur du menu de gauche + 3px; et margin-right:largeur du menu de droite + 3 px;

il est important de mettre dans le flux de ta page les element flottant avant l'element static si tu veut que celui vienne se positionner entre ou a coté d'eux, le footer en clear both; quant a lui permettra d'etendre le conteneur de l'ensemble (ce n'est pas automatique sous tout les navigateurs, mais important lorsqu'il doit afficher une couleur ou image en arriere plan).
par ailleur si apres tes 2 menus tu n'indique aucun css et aucun conteneur centrale les textes viendront automatiquement remplir la partie libre entre eux , quand le contenu sera plus long que les menus il continuera a occuper tout l'espace libre et viendra jusqu'au bord de ta page, donc sous les menus sans s'y superposer...
fait quelques essai sur une page blanche avec des div avec bordures ou fonds de couleurs differentes et des textes "blabla" pour te rendre compte des differents comportement .
a plus
et en esperant t'avoir donner une reponse claire ou du moins des pistes
Merci a tous pour vos réponses,
pour ceux qui n'ont pas ie, voici la screen : http://img397.imageshack.us/img397/4748/screendesign26xs.jpg

je vais essayer de corriger avec vos solutions et je vous donne des nouvelles.

p.s: je ne peut pas augmenter la largeur du design sinon j'aurais des problemes avec le header... et je suis incapable de le modifier, le design n'est pas de moi et mes connaissances en infographie ne sont pas suffisantes...
Modifié par Keeper (23 Aug 2005 - 07:59)
j'ai essayé la solution de gcyrillus, voila ce que ca me donne :
sous ie6 : http://img391.imageshack.us/img391/3719/screendesign24ew.jpg

sous mozilla firefox : http://img391.imageshack.us/img391/5265/screendesign8vr.jpg

en meme temps je n'ai peut etre pas bien fait... alors voila :
-j'ai supprimé le float: left au contenu.
-j'ai mis un float: right au menu droite
-j'ai mis une marge exterieure gauche et droite de 193px au contenu.(193= 37+17+136 +3)

ca n'a rien résolu désolé, je vais essayé une autre maniere

Edit : la premiere methode de mickael.D n'a pas marché... je vais essayer la deuxieme.
La deuxieme methode a fonctionné, merci beaucoup a vous tous. je vais essayer de faire une autre decoupe maintenant.(d'ailleurs j'aurais sand oute besoin de votre aide Smiley smile Si vous voyez des erreurs avec d'autres navigateurs, merci de me le dire...
@+
Modifié par Keeper (23 Aug 2005 - 09:14)
Modérateur
salut,
la soluce que je te proposais consistez a garder le float pour chacun des menus, et je te parler d'un footer qui te permetter d'etendre le conteneur( chose qui ne se passe pas dans ton screenshot de FF), d'ou le besoin d'en faire eventuellement usage .
grossomodo il faudrait que tu fasse comme ceci: 

...
<div id="menugauche">la, tu met ta liste de liens ou le contenu de ta colonne de gauche</div>
<div id="menudroit">la, tu met ta liste de lien ou contenu de ta colonne de droite</div>
<div id="centre">la tu met met le contenu de ta colonne centrale</div>
<div'd="footer">la tu met le copyright du site par exemple ou rien du tout, cette elemnt servira a allongé le conteneur ou body jusqu'au bas de la colonne la plus de ta page, il peut rester transparent(invisible [smile] )</div>
....
et pour le css:

#menugauche {float:left;width:190px;}
#menudroit {float:right;width:190px;}
#centre {margin:0 193px;}/* ici ajouter eventuellement les largeurs de colonnes si le centre se pose toujours  en dessous des menus, ne pas indiquer de largeur a cette element */
#footer {clear:both;}/* se positionnera sous le plus long des elements en etirant ainsi le body ou conteneur des 3 colonnes afin d'afficher les arrieres plans du conteneur ou body */

... maintenant si dans le html tu met 1 menu apres la colonne centrale, il viendra pas a coté, mais en dessous.
je suppose aussi que tu as une page de type xhtml ...

a plus
Modifié par gcyrillus (23 Aug 2005 - 13:47)
Sujet clos
Aller à