28221 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de mise en page avec différents backgrounds

Tout d'abord, Hello !
Je doit réaliser un site pour une future entreprise donc j'essaye de faire le plus compatible possible et le plus clair mais le problème c'est que je débute encore dans le XHTML/CSS et j'ai vraiment des problème pour ce design.
Le design doit prendre toute la fenêtre si il n'y a pas assez de contenu ou alors s'alonger en fonction du contenu.
Le footer doit toujours rester en bas, le problème c'est que la hauteur de l'image footer du menu est différente que celle du contenu o_O
Enfin, pour etre plus clair, voici la maquette et où j'en suis pour le moment.

J'espère que quelqu'un a une piste pour pouvoir m'aider.
J'aimerais surtout apprendre comment faire ce genre de design ^^

Merci d'avance,

Graf'
Modifié le 30 Jan 2005 - 09:47
En premier lieu, tu pourrais virer le prologue :

<?xml version="1.0" encoding="ISO-8859-1"?>

Il est inutile avec un content="text/html;" et fait passer IE en mode "Quirk".

<aparté>
Et puis, pour un design fluide (voir ton titre) elle est plutôt fixe la mise en page (770px en largeur). Enfin, une mise en page normalement constituée est naturellement fluide en hauteur non ?
</aparté>

Pour en revenir à ton design, tu peux ajouter ceci à ta CSS :

#container {
   position: relative;  
}
#footer {
   position: absolute;  
   bottom: 0; 
}

Je n'ai pas testé, mais en théorie ça fonctionne.
Je viens de tester et ça fonctionne à un détail près, manque plus qu'un background-repeat: no-repeat; dans le footer.

Donc si ton problème est réglé, un [Résolu] serait bienvenu dans ton titre en éditant ton premier post (celui qui a servi à créer ton sujet).

Ah et j'oubliais, bienvenue sur le forum Alsacréations ! Smiley cligne

PS : J'aime beaucoup ton choix de couleurs.
[ Après quelques tests, il semble que la méthode fonctionne avec peu de contenu, mais elle échoue avec un contenu plus grand. ]

Il y a bien Les Pieds (de Page) dans le Plat mais pompage.net est HS pour le moment. Tu peux cependant consulter la version originale Exploring Footers si tu te débrouilles dans la langue de Shakespeare.

Pour les pages dont tu as la certitude que le contenu est insuffisant, tu peux utiliser l'alternative suivante, mais puisqu'il ne faut pas présumer de la taille de l'écran de l'utilisateur, c'est assez difficile de trancher.

J'expose l'idée quand même.

Donc tu peux laisser :

#container { 
   position: relative; 
}
#footer { 
   background-repeat: no-repeat; 
}

Et tu ajoutes :

#special #footer { 
   position: absolute; 
   bottom: 0; 
}

Et dans le HTML des pages dont tu veux le footer collé en bas :

<body id="special">

Mais au fond, tout ça c'est de la grosse bidouille. En fin de compte, mieux vaut avoir du contenu !
Modifié le 30 Jan 2005 - 03:13
Merci, je test ça de suite et je te dis quoi Smiley cligne
Pour le design fluide, je voulais surtout parler de la hauteur, désolé j'ai mal employé l'expression je pense bien ^^
Sujet clos
Aller à