28220 sujets

CSS et mise en forme, CSS3

Probleme avec le footer !

Bonjour ,

J'ai un problème avec le footer de mon design , sous FF sa marche tres bien ! seulement sous Ie le footer se coupe , on ne voit que la moitié !
Voila , si quelqu'un pouvait m'aider à résoudre sa ...
PS = lien : http://s140718937.onlinehome.fr/d%e9coupes/imagehost/
A oui et 2ème probleme , les textes aussi sont décalés (exemple avec le texte Zone D'upload) sous ie c'est bon , sous FF => il remonte !

Merci Smiley cligne
Modifié par mKd (15 Jan 2006 - 00:26)
bonjour

pour le footer, il te manque un </div>

<div id="contenu_2"><div class="texte">bla bla bla</div>
</div>  <--- avec ça , ça devrait etre mieux, c'est celui qui feme ton conteneur --->
   <div id="footer"></div>
Bonjour ,

Déjà merci d'avoir répondu ,
alors sa ne corrige pas l'erreur ! le footer se décale un peu vers le bas mais c'est tout !
Je l'ai rehébergé pour te montrer Smiley cligne
salut !

j'ai regardé un peu ton code et j'ai fait quelques essais...
concernant ton deuxième problème, il semblerait que t'arrives à uniformiser le truc en supprimant les </div> en trop et en rajoutant celles qui manquent.
quant à ton premier problème, je reverrais la conception de ton site... pour moi, ton soucis vient entre autre de ta div texte qui, il me semble est inutile, puisque tu peux directement mettre ses propriétés dans ta balise <p>. Elle est faite pour ça. Peut etre que cela ne suffira pas à résoudre tous tes problèmes, mais une chose est certaine, c'est que ça améliorera ton code et t'éviteras certainement des soucis par la suite.
a+
voila.. j'ai tenté d'utiliser ta méthode (je pense qu'on peut faire nettement plus simple)... le résultat est un peu mieux mais il y a encore des choses à voir. tu trouveras ton code et ta css modifié sur www.joelleg.ch/tests

pour les paragraphes :

dans la css:
p{text-align: center;
etc;
}
et dans ton code html:<p>blabla</p>
Modifié par p_tite_jo (15 Jan 2006 - 12:30)
Bonjour,

Rapidement, et en vrac :
- Utiliser XHTML1.0 ou HTML4.01. Pas XHTML1.1, qui obéit à des règles très spécifiques et qui répond à des besoins précis (que tu n'as très probablement pas ici).
- Please, pas de questions sur des problèmes de rendus sans avoir auparavant vérifié la validité du code (X)HTML et corrigé toutes les erreurs : un code invalide s'en remet (de manière variable) au hasard des corrections effectuées par les différents navigateurs, chacun à sa manière.
- Utiliser les propriétés de positionnement (float, position), ne pas jouer sur les marges pour créer une sorte de positionnement qui ne tient en fait qu'à tes conditions très précises de rendu sur ton écran (résolution, taille de caractères, etc.)
- Eviter d'enfermer la page dans un height:100% illusoire et difficilement gérable.
- Ne pas utiliser inconsidérément les pseudos-contenus générés avec des images d'arrière-plan CSS sur des éléments vides : ils n'existent pas pour une grande partie des utilisateurs, pour les moteurs de recherche, pour etc.
Modifié par Laurent Denis (15 Jan 2006 - 12:35)
Je vais regarder sa merci beaucoup !
Par contre ,
1)j'aimerais que le 1er block de droite soit aligné avec celui de gauche et qu'il y est un tout p'tit espace entre les 2 , j'utilise un margin-top ?
2) Pour le texte y a t'il moyen de le centrer a gauche et de le descendre un peu (zone d'upload) ?
3)J'ai l'intention de rajouter des boutons Parcourir et envoyer à coter de la zone de saisie comment je dois m'y prendre (sachant que ce n'ai pas le même alignement pour ces 2 boutons)

Merci !!

EDIT = j'avais pas vu le message d'avant !
Modifié par mKd (15 Jan 2006 - 12:40)
Bon je viens de voir , merci à tous les 2
p_tite_jo : C'est bien (en tout cas le prob du footer est corrigé )
seulement j'ai essayer d'aligner le block contenu_3 sous ie c'est bon mais sous FF c'est la même chose , sa ne prend pas effet !
il faut que tu changes ton doctype. Perso, j'utilise celui la : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


a écrit :

- Utiliser les propriétés de positionnement (float, position), ne pas jouer sur les marges pour créer une sorte de positionnement qui ne tient en fait qu'à tes conditions très précises de rendu sur ton écran (résolution, taille de caractères, etc.)

Comme le dis Laurent Denis, il faut que tu revoies tous les positionnements de tes div.contenus. Tu pourrais peut être lire ceci et la doc d'openweb sur les positionnements.
Merci Smiley cligne

Avec vos indications j'ai réussi plus ou moins à rectifier ceci , mais il y a toujours des décalements entre IE et FF ! (exemple le footer et le block contenu_1)

Mes codes :

html
{
background-color : #FFFFFF;
width: 1000px;
color: #000000;
margin:auto;
}

body
{
height:auto;
height:100%;
min-height:100%;
width: 779px;
margin: 0 auto;
}

#header
{
width: 779px;
height: 131px;
background-image: url("images/header.gif");
background-repeat: no-repeat;
margin: auto;
}

#menu
{
width: 700px;
height: 37px;
background-image: url("images/menu.gif");
background-repeat: no-repeat;
margin-left: 50px;
margin-top: 3px;
text-align: center;
}

#contenu_1
{
width: 370px;
height : 345px;
background-image: url("images/contenu_1.gif");
background-repeat: no-repeat;
float: left;
margin-top: 13px;
margin-left: 10px;
}

#contenu_2
{
width: 327px;
height: 151px;
background-image: url("images/contenu_2.gif");
background-repeat: no-repeat;
float: right;
padding-left: 50px;
margin-top: 10px;

}

#contenu_3
{
width: 327px;
height: 151px;
background-image: url("images/contenu_2.gif");
background-repeat: no-repeat;
float: right;
margin-top: 16px;
padding-left: 50px;
}

#footer
{
width: 551px;
height: 36px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;
margin: 0 auto;
padding-top: 10px;
margin-top: 380px;
}

a
{
color: black;
text-decoration: none;
}

p
{
font-size: small;
text-align: center; 
}

p.2
{
font-size: small;
text-align: center;
font-weight: bold;
margin-top: -69px;
margin-left: -200px;
}

input
{
margin-left: 25px;
}


Le code xhtml reste le même.
Je suis encore débutant donc c'est possible qu'il y est beaucoup d'erreurs !
Ou sinon sa : 
body
{
background-color : #FFFFFF;
width: 1000px;
color: #000000;
margin:auto;
}

html, body
{
height:auto;
height:100%;
min-height:100%;
}

#header
{
width: 779px;
height: 131px;
background-image: url("images/header.gif");
background-repeat: no-repeat;
margin: auto;
}

#menu
{
width: 700px;
height: 37px;
background-image: url("images/menu.gif");
background-repeat: no-repeat;
margin-left: 160px;
margin-top: 4px; 
text-align: center;
}

#contenu_1
{
width: 370px;
height : 345px;
background-image: url("images/contenu_1.gif");
background-repeat: no-repeat;
margin-left: 145px;
margin-top: 17px;
}

#contenu_2
{
width: 327px;
height: 151px;
background-image: url("images/contenu_2.gif");
background-repeat: no-repeat;
margin-top: 145px;
}

#contenu_3
{
width: 327px;
height: 151px;
background-image: url("images/contenu_2.gif");
background-repeat: no-repeat;
margin-left: 380px;
margin-top: -153px;
}

#footer
{
width: 551px;
height: 36px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;
margin: 0 auto;
padding-top: 10px;
margin-top: 200px;
float: right;
padding-left: 60px;
}

a
{
color: black;
text-decoration: none;
}

.texte
{
font-size: small;
text-align: center;
}


Tout est bon sous FF.
Par contre sous ie ... toujours le bug du footer (il se barre à droite)
et pour le block contenu_3 qui se remonte (mais sa au pirre c'est pas grave !)
Sujet clos
Aller à