Petit soucis de design CSS
louis1984
Messages postés
341
Date d'inscription
Statut
Membre
Dernière intervention
-
louis1984 Messages postés 341 Date d'inscription Statut Membre Dernière intervention -
louis1984 Messages postés 341 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Petit soucis de design CSS
- Trier du plus petit au plus grand excel - Guide
- Petit 3 ✓ - Forum Word
- Petit 2 ✓ - Forum Windows
- Petit 9 - Forum Mail
- Comment imprimer une photo en petit ✓ - Forum Photo numérique
16 réponses
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
Ca peut venir d'Internet Explorer car IE et Firefox n'ont pas les mêmes "règles" au niveau du CSS
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
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
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,
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,
J'oubliais, et comment puis-je faire pour que ma page s'affiche correctement sur Internet Explorer?
Merci
Merci
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
Je sais pas si je dis n'importe quoi et si j'ai été clair :S
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?
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?
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
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
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.
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.
pourquoi ne pas mettre un <center> autour de ta div si tu veux que ce soit bien au centre de ton ecran?
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.
Merci quand meme pour ton aide.
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.
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..
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..
