Probleme de CSS footer dans le contenu

Bonjour à tous,

Je viens de terminer la création d'un nouveau site. Le site est visible à cette adresse

orestaurant .fr

Cependant j'ai un problème avec mon footer sur les petits écrans.

Attention je parle bien de la taille de l’écran et non de la résolution!

Le site a été développé pour passer sur du 1024*78 ==> De ce coté là pas de problème.

Mon vrai problème est qu'à partir des 11 pouces le Footer vient taper dans le contenu


Ma contrainte principal est que le client ne veut pas d’ascenseur sur le coté.

Voici le code css (la position du div est fixe)

.bottom-contenu {
bottom: 0;
color: #FFFFFF;
left: 0;
padding: 7px 70px 0 0;
position: fixed;
width: 100%;
z-index: 10;
}

Salut,

rclkop a écrit :
Ma contrainte principal est que le client ne veut pas d’ascenseur sur le coté.

Et pourtant, la barre de défilement verticale est moins gênante que son homologue horizontale.

Si tu veux éviter que le pied de page ne masque le contenu, il faut agir soit sur l'élément body soit sur l'élément englobant le contenu avec padding-bottom.

rclkop a écrit :

Attention je parle bien de la taille de l’écran et non de la résolution!

Le site a été développé pour passer sur du 1024*78 ==> De ce coté là pas de problème.

Mon vrai problème est qu'à partir des 11 pouces le Footer vient taper dans le contenu

Il faudrait déjà que tu comprennes que la taille de l'écran n'a aucune incidence sur ton problème, c'est uniquement la résolution qui entre en jeu. Ce que tu dis n'a aucun sens.
Modifié par jb_gfx (18 Oct 2011 - 14:32)

Pour le problème rencontré: un peu de padding (dans les 60px) sur le contenu principal, ça devrait aider.

jb_gfx a écrit :
Il faudrait déjà que tu comprennes que la taille de l'écran n'a aucune incidence sur ton problème, c'est uniquement la résolution qui entre en jeu. Ce que tu dis n'a aucun sens.

En fait ce n'est pas la résolution qui entre en jeu, mais les dimensions (en pixels) du viewport. Ces dimensions dépendent du dimensionnement de la fenêtre par l'utilisateur (la fenêtre du navigateur n'est pas forcément maximisée), de l'interface du navigateur et de ses extensions, du système d'exploitation et de sa configuration (placement et dimensions des barres d'outils système), et enfin de la définition d'écran (en pixels).

Pour rappel, la définition d'écran est mesurée en pixels (par exemple 1440×900 pixels), tandis que la résolution d'écran est mesurée en pixels par pouce (ppp/ppi/dpi).

Il est vrai qu'un écran de 11 pouces avec une forte résolution peut afficher de nombreux pixels (par exemple 1366px en largeur sur le Macbook Air 11 pouces), tandis qu'un écran avec de 11 pouces avec une faible résolution en affichera beaucoup moins (par exemple 800px en largeur sur certains netbooks).
Modifié par fvsch (18 Oct 2011 - 14:46)

Ah Merci jb_gfx! C'est ce que je pensais...avant d'avoir ce problème!

Et effectivement après vérification le site n'est pas adapté (pas encore) pour certaines résolution! La taille de l'ecran n'a donc rien à voir la dedans!ouf!

Je vais essayer de mettre en place la solution de Victor!

D'autre part, Victor : Dois je en conclure que tu as une barre de défilement horizontale?

Si tel est le cas peux tu me préciser ta résolution d’écran stp?

Merci à tous les deux

Merci fvsch pour les explications sur les écrans, les définitions et résolutions!

Il est vrai que le client ne jure que par le cote esthétique du site... et donc il ne veut pas ascenseur quelque soit la taille de l’écran...

Pas facile quand on a l'habitude de faire des sites "normaux" avec ascenseurs!