28173 sujets

CSS et mise en forme, CSS3

bonjour tous,
imaginez un site avec sur la partie gauche un menu et une signature.
Sur la partie droite le reste des infos du site.

Mon problème vient de la partie gauche.
Je dois avoir "collé en haut" le menu et "collé en bas" de la page une signature.
Et tout ceci indépendament de la longueur de la page.

Le problème que je rencontre est que ma signature ne se positionne pas en bas de page mais se colle sous mon menu.
Je n'ai pas trouvé de solution en css pour régler ce problème.
J'ai essayé plusieurs chose dont mettre de mettre la signature en absolute mais il s'en moque royalement.

une idée ?
Smiley biggrin
Merci de votre aide
Salut la ptiote Smiley cligne ,

je ne suis pas sûr de savoir ce que tu appelles une "signature" mais s'il s'agit bien d'une image et que ce n'est que de la décoration le plus simple serait de la mettre dans la css en background left bottom du bloc contenant le menu...

A+
j'ai donc
#menu {
width:178px;
padding-left:3px;
padding-top:0px;
margin-top:0px;
background-image:url(images/nb.gif);
background-position:bottom;
background-repeat:no-repeat;
}

Mais il n'apparait pas sur ma page !
côté html j'ai :
 <div id="menu">
              <div align="center" id="flashcontent"><br />
                <br />
                Votre ordinateur ne poss&egrave;de pas le playeur flash n&eacute;cessaire &agrave; la
                lecture du menu de ce site. <br />
                Merci de t&eacute;l&eacute;charger le player sur le site d'Adobe
                en cliquant <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW" target="_blank">ici</a></div>
              <script type="text/javascript">var so = new SWFObject("structure/menu.swf", "mymovie", "178", "800","8");
so.write("flashcontent");
</script>
            </div>

Le menu est tu l'as comprit en flash.
J'ai l'impression que la signature (nb.gif) se met en dessous du flash et n'occupe que la taille du flsah
la ptiote a écrit :
Le menu est tu l'as comprit en flash.

Pourquoi ne pas proposer un menu en HTML dans la div#flashcontent?
Si Flash est disponible -> menu en Flash.
Si pas de Flash -> menu HTML donnant accès aux pages du site.

Niveau référencement, tu y gagnes aussi. Smiley cligne

Sinon, je crois qu'il vaut mieux ne pas placer le script avec la fonction SWFObject à l'intérieur du div dont on veut remplacer le contenu par l'animation Flash. Je dis peut-être une bêtise, mais il me semble que ça fait planter IE6 (j'ai eu ce cas une fois, mais il y avait peut-être d'autres paramètres en jeu).

Enfin, pour le sujet de départ:
- si tu veux juste placer une image décorative, tu peux effectivement la mettre en image de fond avec background-position: left bottom; (et pas juste "bottom" même si ça marche peut-être avec certains navigateurs)... par contre, il faudra la placer sur un bloc qui descend jusqu'en bas de la page, ce qui n'est à priori pas le cas de div#menu;
- si l'image en question apporte une information, il vaudrait mieux la mettre dans le code HTML, par exemple comme suit:
<p id="signature"><img src="..." alt="L'info donnée par l'image" /></p>
On pourra alors placer cet élément en bas de page par divers moyens que je ne détaille pas pour l'instant, mais qui peuvent s'apparenter à ceci:
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
HS :
Le menu est pas en html car c'est une usine à gaz avec 3 niveaux et qu'en plus il devait avoir un aspect graph bien précis.

Voila pour être court et résumer bcp.
J'y avait bien penser, je suis pas accro du flash, mais il y ades moment ou c'est plus simple à mettre ne place.

Concernant le script, j'ai jamais eu de soucis, pourvu que cela dure !!!
Je l'ai pourtant utilisé sur certains site complexe. et je continu bien sur à
tester avec IE6

Sujet :
C'est bien de la déco, pure et dure.
a écrit :
il faudra la placer sur un bloc qui descend jusqu'en bas de la page, ce qui n'est à priori pas le cas de div#menu;

Il faudrait donc que je mette une hauteur à mon div, c'est cela ?
Le souci c'est que toutes mes pages ont une hauteur différentes en fonction de leur contenu, et là je vais vraiment commmencer à me prendre la tête pour la mise en page actuelle et à chaque MAJ.

Comment faire prendre toute la hauteur à mon bloc sans spécifié de hauteur ?
Re',

En fait lorsque je parlais du bloc contenant le menu je voulais parler du bloc à l'intérieur duquel était placé ton div menu. Celui-ci n'a pas forcément besoin de descendre jusqu'en bas de la page mais il sera peut-être nécessaire de lui mettre un min-height (et un height via un commentaire conditionnel pour IE6) pour qu'il soit au moins assez haut pour contenir le menu et la hauteur de l'image. Un exemple pour être plus clair :

html

<div id="conteneur">
	<div id="header"></div>
	<div id="contenu">
		<div id="menu"></div>
		<div id="texte"></div>
	</div>
	<div id="pied"></div>
</div>


css

#contenu {
	min-height:500px;
	background:url(images/signature.gif) no-repeat bottom left;
}

#menu {
	width:100px;
	float:left;
}

#texte {
	margin-left:110px;
}


A+ Smiley smile

Edit :
la ptiote a écrit :
Il faudrait donc que je mette une hauteur à mon div, c'est cela ?
Dans le lien donné par Florent il ne s'agit pas de mettre une hauteur au div mais également un min_height:100% Smiley cligne
Modifié par Heyoan (05 Dec 2007 - 15:15)
Je vais essayer de mettre le pourcentage mais j'ai peur qu'il se colle juste sous le menu et pas en bas de page.

Merci les gars Smiley smile