Petit soucis de design CSS Fermé

Question

Bonjour,

J'ai creer une feuille de style CSS sur mon site.

J'ai creer un cadre, et dans se cadre se trouvent les elements suivants:

Logo
Menu
Colonnd Gauche       Contenu       Colonne droite
Pied de page


La largeur du cadre est de 1100 px

La largeur de Colonne gauche + Contenu + Colonne droite = 1100 px.

Il ne devrait donc pas y avoir de probleme et pourtant...

Voici le resultat: http://www.izimo.eu

La colonne blanche correspond a la Colonne droite, comme vous pouvez le voir elle est partie sous la colonne gauche et le contenu. 

Si quelqu'un pouvait m'expliquer le probleme ce serait sympa..
Deplus, je suis debutant alors si quelqu'un pouvait rapidement verifier ma feuille CSS pour voir si il n'y a pas d'erreur ce serait genial.

Voici mon code CSS:


@charset "utf-8";
/* CSS Document */

body { 
margin: 0px; 
padding: 0px; 
background-color: #00FF00;	

		}
div#cadre {
	width:1100px;
	height:1100px;
	background-color:#FF6699;
	margin-left: 40px ;
	margin-right: 40px;
	margin-top: 15px;
	margin-bottom: 0px;
	border:#000000;
	border-width: 1px;
	border-style: solid;
	
		}
div#logo {
	width:1100px;
	height:200px;
	background-color:#99CC99;		
	}
div#menu {
	width:1100px;
	height:50px;
	background-color:#000000;
	}
div#colonne_gauche {
	float:left;
	width:100px;
	height:800px;
	background-color:#FFFF00;
	
	}
div#contenu {
	float:left;
	width:750px;
	height:800px;
	background-color:#CCCC33;
	}
div#colonne_droite {
	float: right;
	text-align: right;
	width: 250px;
	height:800px;
	background-color:#FFFFFF;
	}
div#piedpage {
	width:1100px;
	height:50px;
	background-color:#9966FF;
	clear:both;
	vertical-align: bottom;
	



N'hesitez pas a me dire si il y a des choses a modifier car c'est mon premier site internet et je ne suis sur de rien!

Merci par avance.

Cordialement.

L.

Pilow · Answer

Essaye de visualiser ta page avec mozilla Firefox, chez moi je ne vois pas de problème

Ca peut venir d'Internet Explorer car IE et Firefox n'ont pas les mêmes "règles" au niveau du CSS

papouuu86 · Answer

pas de soucis avec firefox j'ai bien ce que tu veux.

par contre comme dis dans un autre post juste avant utilise des tailles en % sinon tu auras des soucis avec les utilisateurs travaillant sur d'autres parametres d'affichages

louis1984 · Answer

Merci pour vos reponses.

Par contre, je pensais que c'etait mieux d'utiliser les pixels?

Auparavant j'utilisais les % et quand je changeait d'ordinateur (que je passais d'un 13 pouce a un 19 pource), le design changeait completement le site devenait vraiment moche.. je sais pas comment expliquer...

Donc pourrais-tu developper un peu le pourquoi il faut utiliser les % au lieu des px?

Merci par avance,

louis1984 · Answer

J'oubliais, et comment puis-je faire pour que ma page s'affiche correctement sur Internet Explorer?

Merci

Pilow · Answer

Moi j'ai toujours fait en fonction de FF, après je crois que tu peux mettre deux fois la même caractéristique avec deux syntaxes différentes dans ton CSS pour qu'il soit interprété par chaque Navigateur correctement

Je sais pas si je dis n'importe quoi et si j'ai été clair :S

louis1984 · Answer

Pilow, je n'ai rien compris!! lol

Pourrais tu developper?

Dois-je utiliser les pixels ou les pourcents pour mon design? comment faire pour que ca s'affiche correctement quel que soit le navigateur?

Pilow · Answer

D'apres le peu que je connais :
IE et FF n'utilise pas les meme standard de CSS.

Soit tu peux utiliser des standard communs aux deux.
Soit tu peux dire un truc du genre : If ton navigateur == IE, tu charge le CSS special IE, sinon tu charge le FF, ou bien autre navigateur ...

Edit : Rattrapez-moi si je me trompe

louis1984 · Answer

Je viens de tout convertir en % et ca fonctionne parfaitement sur IE et sur Mozilla... je pense le laisser en %

Par contre je n'arrive pas a centrer le cadre.... il est toujours situer un peu vers la gauche .. alors que j'ai bien mis des marges identiques a gauche et a droite:

		}
div#cadre {
	width:90%;
	height:90%;
	background-color:#FF6699;
	margin-left: 5% ;
	margin-right: 5%;
	margin-top: 5%;
	margin-bottom: 5%;
	border:#000000;
	border-width: 0;
	border-style: solid;



Voici le CSS en entier:


@charset "utf-8";
/* CSS Document */

body { 
margin: 0%; 
padding: 0%; 
background-color: #00FF00;	

		}
div#cadre {
	width:90%;
	height:90%;
	background-color:#FF6699;
	margin-left: 5% ;
	margin-right: 5%;
	margin-top: 5%;
	margin-bottom: 5%;
	border:#000000;
	border-width: 0;
	border-style: solid;

		}
div#logo {
	width:100%;
	height:10%;
	background-color:#99CC99;		
	
	}
div#menu {
	width:100%;
	height:10%;
	background-color:#000000;
	
	}
div#colonne_gauche {
	float:left;
	width:10%;
	height:90%;
	background-color:#FFFF00;
	
	}
div#contenu {
	float:left;
	width:70%;
	height:90%;
	background-color:#CCCC33;
	
	}
div#colonne_droite {
	float: right;
	text-align: right;
	width: 20%;
	height:90%;
	background-color:#FFFFFF;
	
	}
div#piedpage {
	width:100%;
	height:5%;
	background-color:#9966FF;
	clear:both;
	vertical-align: bottom;
	
	




Comment faire pour centrer le cadre?

Merci par avance.

papouuu86 · Answer

pourquoi ne pas mettre un <center> autour de ta div si tu veux que ce soit bien au centre de ton ecran?

louis1984 · Answer

Parce que ca m'a pas l'air tres propre un "center"... je pense que le probleme vient du CSS, donc je prefere modifier le CSS pour qu'il fonctionne plutot que de mettre le "center".. et d'avoir un CSS approximatif.

Merci quand meme pour ton aide.

papouuu86 · Answer

je sais pas si c'est moins propre mais j'utilise beaucoup c'est plus rapide qu'en css et plus "sur" je trouve a chacun ses methodes après.

louis1984 · Answer

J'avais lu je sais plus ou que c'est pas propre.. le truc bizare est que mon CSS etait centrer auparavant.. j'ai du modifier un truc .. je sais pas quoi..

Pilow · Answer

Essaye d'augmenter ton margin-left ?
10% par exemple

louis1984 · Answer

ouai mais c'est un peu a l'arrache.... normalement ca devrait marcher... les deux margin (left et right) sont egaux... donc ca devrait etre centrer.. je comprends pas..

Pilow · Answer

Bon moi j'ai trouvé un truc

Dans ton body
Tu rajoute : text-align:center;

Et ton container tu le fais comme suit :

#container{
width:90%;
margin-left:auto;
margin-right:auto;
text-align:left;
}

louis1984 · Answer

Merci Pilow,

Ca marche pour IE, mais sous Mozilla ca ne marche pas.. j'ai toujours un decallage sur la gauche..

Comment faire? Je n'y connais rien en codage..

Merci par avance pour votre aide.

Petit soucis de design CSS

16 réponses

Discussions similaires