Positionement elements

Positionement elements - HTML/CSS - Programmation

Marsh Posté le 17-03-2008 à 21:26:07    

Bonjour,
 
J'ai une question a propos du positionnement de mon texte et autre dans une page html.
 
En faite j'ai un fond d'écran qui est fixé, mais mes éléments eux bougent, cad que si je rétrécie ma page et que les ascenseurs apparaissent
les éléments bougent, comment faire pour les immobiliser de manière a ce qu'il reste au bon endroit en fonction de mon fond d'écran?
 
Merci d'avance.  

Reply

Marsh Posté le 17-03-2008 à 21:26:07   

Reply

Marsh Posté le 18-03-2008 à 03:15:36    

définir une taille (width) pour l'élément les contenant et définir cette élément pour qui soit placé a une distance fixe du bord gauche de l'écran.

Message cité 1 fois
Message édité par Lactique le 18-03-2008 à 03:16:52

---------------
Studio CréeAll
Reply

Marsh Posté le 18-03-2008 à 07:20:52    

ok merci pour la réponse je vais essayer

Reply

Marsh Posté le 18-03-2008 à 18:12:21    

Lactique a écrit :

définir une taille (width) pour l'élément les contenant et définir cette élément pour qui soit placé a une distance fixe du bord gauche de l'écran.


 
 
Je dois donc fair un div pour contenir mes elements et apres definir la position du div mais le truc c'est ke je n'arrive pa a fixer sur la page mes elements.

Reply

Marsh Posté le 18-03-2008 à 20:57:39    

Je vais essayer de mieux expliquer ce que je comprend pas.
 
Si j'ai un div comme celui ci:
 

Code :
  1. <div id="menu">
  2.      <a href="cell.php">homepage  </a>
  3.      <a href="cell.php">musique </a>
  4.      <a href="cell.php">infos </a>
  5.      <a href="cell.php">contact</a>
  6. </div>


 
Que dois-je mettre ds le CSS pour que les 4 liens du menu soit positioner a un endroit précis en fonction de mon background ET que lorsque je diminue horizontalement la taille de la page les liens soit toujours a la même place en fonction du background?
 

Reply

Marsh Posté le 19-03-2008 à 00:25:12    

Une petite idée?

Reply

Marsh Posté le 19-03-2008 à 05:45:03    

Bon, déjà il s'agit d'un menu donc n'utilise pas de div, ça ne sert strictement à rien. Uniquement ul > li li li li..... /ul, une balise ul ou une div ça se comporte de la même façon avec les mêmes données en css.

 

Déjà si tu as ce problème qui relève d'un besoin absurde compte tenu des impératifs qu'impose en général l'affichage d'un site selon les différents utilisation de tes visiteurs, c'est que tu as mal pensé le site, le découpage dès le départ. Mais bon soit.

 

Ton background est positionné comment ? C'est une grosse image qui fait tout l'écran ? un truc qui se répète ? c'est juste une portion de l'écran ? c'est centré ? c'ets aligné à gauche ? à droite ?

 

Ensuite si ton background est aligné à gauche, c'est à dire que seule la partie droite disparaît quand on redimentionne la fenêtre, ben tu fixes ton menu (ul) en position:absolute avec les coordonnées correctes en left:x px, et top: y px, et c'est bon. Ya plus besoin de div du coup. les li à l'intérieur du ul se positionnent, si tu le désires, en position relative ou dans le flux en ligne ou colonne. C'est une autre question ça.


Message édité par Lactique le 19-03-2008 à 05:46:18

---------------
Studio CréeAll
Reply

Marsh Posté le 19-03-2008 à 12:46:23    

Je vais poster mon code, très réduis pour le moment mais tant que j'aurais pas comprit cela je ne peu pas avancer.
 
 
html :  
 

Code :
  1. <head>
  2. <title>page</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style2.css" />
  5. </head>
  6. <body>
  7.            
  8. <div id="menu">
  9.     <ul>
  10.            <li>zzzzz</li>
  11.            <li>zzzzz</li>
  12.            <li>zzzzz</li>
  13.     </ul>
  14. </div>
  15.  
  16.       </body>
  17.          </html>


 
css:
 

Code :
  1. body
  2. {
  3.    width: 760px;
  4.    margin-left: auto;
  5.    margin-right: auto;
  6.    margin-top: 20px;
  7.    margin-bottom: 20px;
  8.    background-color:#f0efef;
  9.    background-image:url("finalbg.jpg" );
  10.    background-repeat: no-repeat;
  11.    background-position: center 5px;
  12.    position:relative;
  13. }
  14. menu
  15. {
  16.         ??
  17. }


 
Que dois-je mettre dans les propriete css de mon menu pour que ce dernier soit toujours dans la meme position en focntion BG.
 
Merci d'éclairer ma lanterne :$


Message édité par punk'd le 19-03-2008 à 12:51:14
Reply

Marsh Posté le 19-03-2008 à 14:32:51    

tu definis une taille. genre :

Code :
  1. menu
  2. {
  3.        width:250px;
  4. }


Message édité par texaff le 19-03-2008 à 14:33:13
Reply

Marsh Posté le 19-03-2008 à 14:52:34    

Non cela ne fonctionne pas, si je réduis la fenêtre le menu bouge :(


Message édité par punk'd le 19-03-2008 à 15:23:38
Reply

Marsh Posté le 19-03-2008 à 14:52:34   

Reply

Marsh Posté le 19-03-2008 à 16:05:55    

et si tu mettais un div qui englobe tout ton site genre  
 

Code :
  1. <div id="page">
  2. //tout ton site la dedans
  3. </div>


 

Code :
  1. #page {
  2.   width:900px;
  3. margin:0 auto;
  4. }

Reply

Marsh Posté le 19-03-2008 à 16:42:26    

Je test de suite.

Reply

Marsh Posté le 19-03-2008 à 16:59:39    

Oui donc ca ne fonctionne toujours pas, c'est a dire que le menu "flotte" et ne suis pas le BG donc si je réduis la fenêtre le menu n'est plus a se place.
 
Lorsque je réduis la fenetre les élements ne bouge pas, il reste solidere de l'image de fond.


Message édité par punk'd le 19-03-2008 à 17:55:31
Reply

Marsh Posté le 19-03-2008 à 17:42:58    

enleve ton position relative du body?

Reply

Marsh Posté le 19-03-2008 à 18:15:43    

1) Le monsieur t'as dit de virer le div id="menu" qui ne sert a rien.

 

2) Ton background bouge donc puisque tu le centres. Il est donc impossible de faire ce que tu souhaites puisqu'un background centré peut sortir de la fenêtre des 2 cotés du navigateur alors qu'un élément ne le peut que du coté droit quand la fenêtre devient trop étroite.

 

3) C'est bien ce que je disais, tu as fait une erreur de conception. Aligne ton background à gauche, n'est-il pas fait pour juste remplir tes 760px de large de toute façon ?

 

4) Le body ne peut se définir comme étant plus étroit que la largeur de l'écran du visiteur de toute façon, définir une taille ne sert pas à grand chose, il vaut toujours mieux créer une div conteneur, contenant tes 760px et tout ton site. Cette div tu lui mets un position:relative; sans définir top ni left, puis ton ul tu lui mets un position:absolute; et tes top et left comme tu l'entends (par rapport au bords de ta div conteneur donc).


Message édité par Lactique le 19-03-2008 à 18:15:58

---------------
Studio CréeAll
Reply

Marsh Posté le 19-03-2008 à 21:22:20    

Ok, j'ai suivis tes conseils et ca fonctionne, merci beaucoup pour l'explication, j'avais pas totalement capté le truc du conteneur.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed