Est-ce possible ?

Bonjour à toutes et à tous.

Tout d'abord une très bonne année, tout plein de bonnes choses pour tous les membres du forum !

Allez, au travail maintenant. Je me frotte actuellement à un problème de CSS que je n'avais jamais rencontré avant, le suivant :



J'espère que l'image parle d'elle même.

En vous remerciant par avance pour vos futures réponses !
Amicalement, Pierre.

Bonne année a toi aussi !

Si tu le places en absolute et aligné en bottom et right dans le conteneur avec une grosse largeur... c'est le premier truc auquel je pense... c'est un peu bourrin, il y aura certainement mieux mais c'est une piste :

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

#content{
position:relative;
height:800px;
width:400px;
margin:0 auto;
background-color:red;
}

#footer{
position : absolute;
bottom:0px;
right:0px;
height:200px;
width:5000%;
background-color:blue;
}

Bonjour Laurent,

en effet c'est une solution qui m'est passée par la tête mais un chouilla bourrin à mon gout .

En tout cas je suis rassuré de voir que je ne suis pas le seul à galérer sur ce petit truc qui peut paraitre simple au premier abord, mais qui s'avère assez traitre...

Un grand merci en tout cas pour ta réponse !

et avec une propriété display:table; ce serait peut une autre solution à explorer, tout en gardant la structure div
Modifié par casshern83fr (10 Jan 2012 - 12:30)

Bonjour casshern83fr,

pourrais-tu préciser par un exemple ?

En attendant la réponse de casshern83fr je pensais a un autre truc..

Ton footer doit etre dans ton bloc "contenu" ? S'il peut en sortir tu peux le placer juste en dessous :

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

lui donner une largeur de 100%, un right:50%; et un padding-right:300px; (même raisonnement que pour centrer un bloc mais en partant de la droite)(d'ailleur en parlant de centrage il vaut mieux utiliser la technique du margin:0 auto; que celle du 50% et margin, voir ce tuto). La largeur 100% et le décalage devrait le faire dépasser tout le temps, il faudra juste penser à masquer l'overflow horizontal...

Ah yes, pas mal on se rapproche déjà d'un système plus "académique"...
Je vais tester ça de ce pas !


Merci beaucoup.

Par contre il y aura peut etre un problème avec le padding : ca va décaler les éléments positionnés dedans...

Encore une piste que j'avais oublié et que j'ai utilisé : faire deux blocs ! Ce sera peut être encore mieux niveau "académie"
En gros tu fais un premier footer collé à ton bloc de contenu et de la même largeur. Puis tu en crée un second en dessous de largeur 50% et collé à gauche de l'écran (en left:0px; ou rigth:50%;). Par contre il faut que ce second bloc soit en dehors du bloc de contenu lui. Et c'est un peu délicat de le placer exactement a la même hauteur des fois...
Le second bloc occupera donc la moitié de l'écran et le premier se chargera de la partie restante sous le contenu.
je sais pas si j'ai été très clair sur ce dernier exemple
Modifié par _laurent (10 Jan 2012 - 14:25)

Oui, alors en fait cette solution j'y avais pensé, seulement c'est l'aspect "superposition" des blocs qui me dérangeai un peu. Mais bon maintenant que tu m'y fais repenser, je me dis c'est c'est une solution tout à fait valable. Je pense qu'il vaut largement mieux ça plutôt qu'un bloc qui sort complètement de l'écran et qui ne compte que sur un overflow-x:hidden; ^^

Le schmilblick avance bien !

Merci pour ton temps !

Cr4sH a écrit :
je me dis c'est c'est une solution tout à fait valable. Je pense qu'il vaut largement mieux ça plutôt qu'un bloc qui sort complètement de l'écran et qui ne compte que sur un overflow-x:hidden;

Je pense aussi oui !!!

Cr4sH a écrit :
l'aspect "superposition" des blocs qui me dérangeai un peu.

Dis toi qu'il y en a un dans ton conteneur pour que le contenu du footer soit propre et proprement intégré et que le second bloc du dessous n'est la qu'en décoration, pour le background

(mais c'est vrai que l'alignement vertical des deux blocs risque d’être un peu tendu ! Surtout au niveau multi-navigateur... attention a tout ce qui est padding, magin, etc. etc.)
Modifié par _laurent (10 Jan 2012 - 15:13)

Bonjour,

prière de décrire un minimum le sujet abordé grâce au titre : "Est-ce possible ?" pourrait être le titre de 90% des sujets de la catégorie (pour éditer le titre, il faut éditer le premier sujet)

Felipe