28172 sujets

CSS et mise en forme, CSS3

Problème de centrage IE et FF

Bonsoir Smiley smile

Je viens vous voir car je n'arrive pas à centrer mon site internet sous IE...

J'ai suivi ce tutoriel et pourtant, le résultat n'est pas celui espéré ( mon site ). Maintenant j'ai un problème d'affichage sous IE et Firefox : (

J'ai ajouté un <div id="conteneur"> et un <div id="wrap"> et j'ai modifié mon fichier CSS en conséquence. Je vous montre mon fichier css.


body
{
width: 800px;
height: 100%;
min-height: 100%;
margin: auto;
margin-bottom: 20px;
background-color:#CCFFCC;

/*background-image: url("images/fond.jpg");*/
}

#conteneur
{
width:800px; 
margin:0 auto;
}

#wrap 
{
overflow:hidden;
}

#menu
{
float:left;
width: 140px;
min-height: 100%;
padding: 5px;
border: none;
background-image: url("images/menu.gif");
background-repeat: no-repeat;
}

/*le corps de la page ou se trouve le contenu du site*/
#main
{
width: 630px;
min-height: 100%;
margin-left: 145px;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
border: solid black 1px;
background-color: white;
}

#footer
{
position: relative;
text-align: center;
margin-top: 7px;
padding-top: 8px;
width: 798px;
height: 40px;
}


La structure de mon site est la suivante:


<body>
    <div id="conteneur">
          <div id="header">
          </div>

          <div id="linkbar">
          </div>

          <div id="wrap">
                <div id="menu">
                </div>

                <div id="main">
                </div>
          </div>

          <div id="footer">
          </div>
     </div>
</body>


Pourriez-vous m'expliquer ou est mon erreur? Merci par avance Smiley smile

ps: je précise que je n'ai fait les modifications que sur la page index.php Smiley smile
ps2: svp, ne faites pas attention au design du site, je suis une bille dans ce domaine T_T Il s'agit de toute façon d'un site fictif que j'ai réalisé en apprenant le html, css et php Smiley smile
Modifié par pixl (14 Oct 2008 - 21:57)
tant qu'à faire j'ai travaillé à partir des fichiers originaux

il y a un petit décalage de deux pixels dans la largeur qui fout le bronx
donc soit tu supprimes la bordure de "main" soit tu reduis les padding à 9px

ensuite il y a un pb pour la photo de la xboite qui dépasse de son conteneur sous FF
à mon avis c'est normal puisque tu lui met un float:right ce qui le sort du flux
pour régler le pb il suffit de donner une valeur en px à minheight de "main"
Modifié par scott54 (15 Oct 2008 - 00:53)
Merci beaucoup Smiley lol Effectivement, ça marche mieux comme ça ^^
Donc il y avait deux pixels de trop par rapport à la largeur totale de mon site c'est ça?

Par contre, pour l'image, j'ai un petit problème, parce que pour les autres pages de mon site, je ne peux pas fixer de valeur à height. Je suppose que je vais devoir faire deux feuilles de style: 1 pour la page d'accueil avec une valeur fixe pour height et 1 pour le reste du site. Ou bien y aurait t'il une solution plus simple?

Merci Smiley smile

edit: en attendant, j'ai rajouté un peu de texte... ^^
Modifié par pixl (15 Oct 2008 - 06:42)
je pense que si tu met
minheight : 700px;
height: 100% ;

ça devrait te mettre une hauteur mini de 700 pixels et s'allonger si tu met plus de chose dans le div
Bonsoir Smiley smile

a écrit :
Excusez-moi, je reviens vous voir pour un problème similaire...
Tout fonctionnait bien et j'ai voulu modifier mon design. A un moment je me suis rendu compte que les elements de mon site ne s'emboitaient plus correctement et je n'ai pas réussi à retrouver mon erreur t_t. J'ai essayé de jouer avec les padding et les bordures mais je n'ai pas trouvé...

Si vous pouviez me donner un coup de main encore une fois? Smiley smile

Merci Smiley smile


Finalement j'ai trouvé la solution: c'était un problème de balises <siv> mal organisées. Il en manquait une...
Modifié par pixl (26 Oct 2008 - 00:45)
Sujet clos
Aller à