2 Questions: Marge minimum obligatoire pour un div + Placement footer

Bonsoir all,

Voila, j'ai deux petites questions concernant deux choses bien différentes.

Question 1: J'ai une vidéo flv en arrière plan sur mon site, cependant à partir d'une certaine résolution (1024x768), la vidéo étant assez haute vient piétiné la bande bleu correspondant à la continuité du menu horizontale. Et esthétiquement c'est très moche.

L'idée serrait de faire un espèce de "padding-top" minimum dont la valeur serrait de quelques centaine de pixels pour que même lorsque la résolution de l'internaute est petite le padding-top agissant sur la video, permettrait à la video de ne pas venir chevaucher la ligne bleu (menu).

Je vous invite à essayer par vous même, réduisez la fenêtre, la vidéo remonte, et au bout d'un moment vous allez voir... ICI

J'espère avoir été clair, si vous avez une autre idée afin de palier à ça, je suis preneur, pour le moment c'est tout se que j'ai pondu.

Question 2: J'ai deux sortes de footers sur mon site, le premier étant sur l'index (ICI). Il se place toujours en pied d'écran, et si un internaute dispose d'une petite résolution encore une fois, le contenu de la page ne pouvant pas s'afficher sur l'intégralité de l'écran sans un scroller, le footer lui se retrouve en plein milieu de ce contenu .

Quant-à l'autre footer, il est sur la page cité lors de la première question, il s'agit ni plus ni moins d'un copyright juste en dessous du dernier div de la page (dans le flux). Hors avec un imac de 27pouces, la résolution étant gigantesque le footer se retrouve en milieu d'écran même si il est en dessous du contenu. J'aimerais qu'il reste continuellement en bas (en pied de page).

Vous l'aurez compris j'ai à faire à un paradoxe, et je ne parviens pas à trouver une quelconque solution, d'un coté, le footer est toujours coller en pied d'écran, et de l'autre coté le footer est en dessous du contenu. Mais les deux ont ces avantages et inconvénients. Existe t-il une autre solution?
Comme par exemple un footer se trouvant continuellement en pied de page (comme celui de mon index) mais lorsque le contenu entier d'une page n'est pas afficher sur l'écran sans scroller rajouter un code qui permettrait de l'abaisser en dessous du contenu?

Je sais c'est pas très bien expliqué mais c'est pas facile, si vous n'avez pas saisi mon problème je recommencerais depuis le début.

En attendant j'attends de bonnes idées de votre part
Merci
Modifié par shakuro (21 Dec 2010 - 12:11)

Je vous est fais deux croquis, j'ai peut être mis la main sur une solution, même si elle est pas très propre...
Alors illustration 1 montre le problème (grossièrement mais clairement):


Et voila à quoi je pensais pour la sollution, illustration 2:


Explications: Enfaite le trucks serrait de créer un tableau de deux lignes, une première ligne avec une hauteur en pixel bien défini, et dans la ligne du dessous la vidéo dans laquelle elle pourra bouger en hauteur durant le scrolling ( couleur violet ), la ligne serra à 100% du restant de l'espace disponible en hauteur...

C'est une bonne idée? faisable?

PS: J'ai mis une page test, avec les deux éléments qui poses problème comme ça c'est plus clair. ICI
Modifié par shakuro (18 Dec 2010 - 00:38)

Toujours aucune réponse, pourtant je potasse avec le problème de la vidéo.
J'ai dû vous faire peur avec mon grand post je vais donc résumer ma principale question:

Comment faire pour que la vidéo ne chevauche jamais la barre bleutée du menu?

Le position: absolute sort les éléments du flux de ce faite, la vidéo remonte/descend avec l'étirement/rétrécissement de la fenêtre. Le fait est que sa se passe comme-ça n'est pas un problème. Sauf qu'au bout d'un moment la vidéo en remontant chevauche le menu, et j'aimerais lui définir une sorte de "marge de sécurité" à partir de top, pour que la vidéo bloc et ce même si la fenêtre continue d'être réduite.

J'espère avoir été plus clair, et attends de vous quelques suggestions d'idées, merci.

J'ai fais une page test: ICI
Modifié par shakuro (21 Dec 2010 - 11:53)

Bonjour, à relire : initiation au positionnement css partie 2

Ton bloc #c1 est en position absolue sans avoir un parent positionné, donc il le fait par rapport à la fenêtre du navigateur.

Tu as mis bottom: 0 et ton object a 1000px de haut ce qui cause le problème.

Pourquoi alors ne pas le positionner à partir du haut de la fenêtre ? Tu évites ainsi qu'il soit par dessus ton menu.

Merci d'avoir prit le temps de comprendre et de répondre à mon problème. En effet ma div c1 n'a pas de parent tout simplement parce qu'elle est en position "absolute" et qu'un objet en position absolute ne peut pas se référé à un parent, si tel serrait le cas j'aurai simplement réalisé un div parent avec deux autres div tout deux enfant l'un avec une hauteur donnée (transparente) collée en top pour servir de "marge", une autre comportant la planète en dessous.

Ma video n'a pas 1000px de hauteur mais 500pixels, et elle est positionnée en bottom car je souhaite que cette derniere soit collée au pied de page...

J'ai peut être mal compris se que tu m'as dis, si tel est le cas j'en suis désolé, toujours est-t-il que je n'est pas THE solution direct...

Oui, la largeur est de 500px... mais cela ne change rien à la solution.

Je t'invite à bien relire le lien donné ci-haut, en particulier ce passage:

Benjamin D.C. a écrit :
Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.

Et comme dans ton cas, il n'y a pas d'ancêtre positionné, il le fait par rapport à la fenêtre du navigateur, mais toi tu aimerais le faire par rapport à ton pied de page. Donc, tu dois changer ta façon de positionner ton bloc.

shakuro a écrit :
En effet ma div c1 n'a pas de parent tout simplement parce qu'elle est en position "absolute" et qu'un objet en position absolute ne peut pas se référé à un parent

À relire position relative et position absolue

Benjamin D.C. a écrit :
Position relative: Servir de référent à un élément enfant positionné en absolu (rappelons qu'un élément positionné absolument grâce aux propriétés top, left, … le fera par rapport à la fenêtre du navigateur à défaut d'avoir un parent lui-même positionné)

Merci Mabelle pour le lien, j'ai relus l'article sur les positions et j'ai compris deux trois choses.

En gros je dois réalisé un <div id="conteneur"> parent de ma <div id="c1"> (enfant) ? .
J'ai fais des tests durant 3h ce soir et je me heurte à quelques problèmes, je ne comprends pas...

Voici le code de la page actuelle:

<style type="text/css">
<!--
 body {
background-color:black;
background-repeat: repeat-x;
outline: none;
margin:0;
padding: 0;
border: none;
}
#conteneur{
	position: absolute;
	width: 100%;
	height: 500px;
	margin-top: 300px;
	padding: 0;
}
#c1 {position: relative; width:100%; height:100%; z-index: -1; border: none; margin: auto; padding: auto;}

-->
</style></head>

<body bgcolor="#000000" background="http://peexstudio.fr/aa.jpg">
	<div id="conteneur">
	  <div id="c1">
	      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="500" id="Flashouille">
	        <param name="movie" value="player.swf"/>
	        <param name="quality" value="high"/>
	        <param name="wmode" value="transparent"/>
	        <param name="flashvars" value="controlbar=none&amp;file=planisphere1.flv&amp;autostart=true&amp;repeat=always" />
	        <!--[si il s'agit de IE]>-->
	        <object type="application/x-shockwave-flash" data="player.swf" width="1000" height="500">
	          <param name="flashvars" value="controlbar=none&amp;file=planisphere1.flv&amp;autostart=true&amp;repeat=always" />
	          <param name="quality" value="high"/>
	          <param name="wmode" value="transparent"/>
	          <a href="http://www.adobe.com/go/getflashplayer"><img src=
			  "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt=
			  "Get Adobe Flash player"/></a>
            </object>
          </object>
	  </div>
	</div>
</body>
</html>

Enfaite je souhaitais réalisé un parent (conteneur) de 100% (hauteur de fenêtre) et de 500px de large (largeur de la vidéo) dans lequel j'imbriquerais l'enfant (c1) en bottom:0 pour qu'il reste au pied du parent et donc en pied de page. Mais sa ne fonctionne pas du tout! J'ai une marge noir sous la vidéo, donc elle est vrai semblablement pas en pied de page et de plus la vidéo ne monte pas (durant le rétrécissement de la fenêtre) surement dû à la position relative du parent...

Je conçois que tu m'as beaucoup mis sur la voix et qu'avec ça je devrais normalement m'en sortir, mais je t'assure avoir fais plein de manips, alors un petit coup de punch supplémentaire serrait cool de ta parts...

Regarde le résultat: ICI

PS: le margin-top: 300px sur le #conteneur, est la marge attribué au parent pour que la vidéo ne chevauche pas le menu...

Voila se que je pensais réaliser avec cette idée de parents>enfant :

Modifié par shakuro (22 Dec 2010 - 00:15)

Attention, tu as mis le conteneur en absolue et ton bloc c1 en relatif...

Bon aller je vais y arrivé, un vrai casse-tête mais je suis têtu aussi!

Voila, j'ai schématisé ce à quoi je pensais, dis moi si c'est bien cela, que je parte sur de bonne bases. Ou si j'ai oublié ou fais des erreurs dans mon raisonnement



C'est pour dormir sans ce sentiment "d'échec" car je reprendrais les manœuvres demain
Modifié par shakuro (22 Dec 2010 - 00:41)

C'est bon d'être têtu dans certains cas et il faut ajouter la curiosité aussi !

Bon, n'oublie pas que si tu positionne c1 en absolue dans ton conteneur en relatif, tu devras lui attribuer un bottom: 0 pour qu'il reste collé en bas de page. Mais en le fixant en bas de page, celui-ci ne bougera pas. Il n'y aura pas de déplacement de la vidéo.

#conteneur {
position: relative;}

#c1 {
position: absolute; 
bottom: 0;}

Tu pourrais aussi positionner ta vidéo en haut de page comme ceci:

#c1 {
position: absolute; 
top: 300px;}

Bref, à toi d'adapter selon le résultat que tu veux obtenir.

Aie! et il n'y a pas moyen de mettre ET la vidéo en pied de page ET permettre que celle-ci remonte?

J'ai utilisé le top:300px; mais je ne vois pas du tout l'intérêt du conteneur dans ces cas là, et esthétiquement se n'est pas se que je souhaite, en effet je travail sur un imac de 27pouces, la résolution est de 2560x1440pixels, et la planète sous le menu avec une telle résolution c'est vraiment mesquin (Regarde ici), j'aurai souhaité qu'elle soit collée au pied de page et qu'en remontant elle se block lorsqu'elle arrive au niveau du menu tout bêtement.

J'ai beau fouiner partout, essayé un tas de choses, je ne trouve rien de concluant, l'impression de perdre mon temps, je n'avance pas et stagne, je pense que je vais m'arrêter là, tampis.

Merci en tout cas de m'avoir épaulé.
Modifié par shakuro (22 Dec 2010 - 16:35)

Allez, il faut pas se décourager !

Peut-être que quelqu'un plus calé que moi va passer ici et te donner une autre piste.

J'avoue avoir de la difficulté à comprendre ce que tu cherches à faire et pourquoi

C'est juste pour rendre mon site plus "extensible". Seul le bas de la page, en l'occurrence la vidéo de la planète bougera de haut en bas selon la résolution de l'écran. Car je pourrais très bien lui donné des valeurs fixes pour mon affichage actuelle, tout serrait niquel mais si une tierce personne venait à visiter mon site avec une résolution bien moindre (ex: 1280x720), le contenu de la page étant trop grand pour être affiché en plein écran, la vidéo s'afficher en pied de page par défaut empiètera sur le menu, et esthétiquement c'est pas terrible...

Suffit de regarder sur ce site qui test une adresse avec plusieurs résolutions (j'ai pris pour exemple mon site): ICI.

1920x1200 sa va
1600x1200 sa va
1400x900 sa va
1280x864 la vidéo chevauche le menu
etc...

C'est là qu'aurait du agir le css pour délimiter une marge protectrice visant à empêche la vidéo de chevauché le menu.
Comprends-tu l'utilité de se que je souhaite faire maintenant?
Modifié par shakuro (22 Dec 2010 - 18:52)

Bonjour,

Mais en fait tu souhaites que la terre soit toujours "complète" et non pas coupée sous le trait bleu c'est ca ?
Parce que je ne comprend pas bien moi non plus ce que tu souhaites avoir de plus que ce que tu as déjà fait sur ton site.
(hormis le fait que actuellement si on réduit la résolution, ton footer passe au dessus de tes textes)

Salut 513,

Effectivement hier j'ai trouvé une solution "provisoire".

Je m'explique: J'ai extrait la barre bleu du <body background=""> et je les placé dans un <div en z-index: -1 alors que la video est en z-index:-2.

Cela a pour conséquence de faire passé la vidéo en dessous du menu, du coup quand tu redimensionne la fenêtre la vidéo monte mais passe sous le menu et sa fait relativement plus propre. C'est une bonne chose de faite. Et c'est pour cela que tu ne comprends pas... Alors que si tu regarde la page test ( ICI )que j'avais fais pour retravailler mon code, sa n'étais pas comme actuellement sur mon site.

Donc je souffle un peux... Mais comme tu l'as dis j'ai à faire à un autre problème, notamment celui du footer qui reste en pied de fenêtre quoi qu'il advienne, et même si l'internaute redimensionne sa fenêtre, donc lorsqu'il scroll vers le bas, on voit apparaitre le contenu du site alors qu'il devrait être juste au dessus du footer.
Enfaite j'aurai aimé que le footer remonte quand il y a de l'espace disponible mais qu'il s'arrete sous le dernier contenu de la page. Je pense que cela est faisable j'ai vu un exemple sur ce site:
http://ryanfait.com/sticky-footer/

Si vous réduisez la fenêtre, le footer remonte dans l'espace vide disponible puis se block avant d'ampieter sur le contenu. C'est cela que j'aimerais réaliser.

En tout cas merci à vous de suivre de prêt mes soucis de positionnements.
Modifié par shakuro (23 Dec 2010 - 14:15)

Bonsoir all!

Je viens donner quelques nouvelles concernant mes différents problèmes de positionnement, mais avant toute chose je vous souhaite à toutes et à tous de passer un très bon réveillon de Noël! . En espérant que le papa noël serra généreux avec vous .

Bon alors, quelques news:

-Problème de footer résolu. Il remonte quand la fenêtre est redimensionnée, et se bloc sous le contenu. Chose qu'il ne faisait pas avant.
-Problème concernant la position de la vidéo est partiellement résolu! en effet j'ai placé celle-ci en z-index: -3; . Elle passe derrière tout objet, notamment la barre bleu du menu (qui est sur fond noir). Et sa fait relativement propre!

Un dernier petit soucis à réglé et tout est fini, oui oui mon site est presque totalement extensible, j'ai travaillé ma page test et voici le résultat: ICI

Faites l'expérience suivante: Redimensionnez la page doucement, le footer remonte, et il se bloque... Continuez de redimensionnez... Remarquez-vous quelques chose? La planète quant-à elle continue de remonter, chose que j'aimerais évité!

Je ne pense pas que sa soit faisable avec du css, peut-être du javascript avec une règle du genre: " Lorsque le footer arrete de scroller "alors" bloquer la vidéo" pourrait palié au problème.

Qu'en pensez-vous?
Modifié par shakuro (24 Dec 2010 - 18:30)

Problème partiellement résolu,

Il s'avère que ma remarque sur l'héritage de la fonction "z-index" m'a poussé à fouiner un peux plus loin. J'ai trouvé un petit lien qui explique le fonctionnement de la fonction ( ICI ).

Citation : Developerz.mozilla.org
Chaque contexte d'empilement est complètement indépendant de ses parents : seuls les éléments enfants sont pris en compte lors du traitement de l'empilement.


J'ai donc simplement appliqué un z-index: -3; au parent (#fond-menu) contenant la div #c1 (vidéo) et sa à fonctionné.

Mais mes liens (dans le footer) ne sont plus interactifs (cliquables); dû au z-index: -3; encore un problème auquel je dois faire face seul...

Regardez: ICI
Modifié par shakuro (24 Dec 2010 - 22:38)

Une petite idée ??