Prob avec deux DIV

Prob avec deux DIV - HTML/CSS - Programmation

Marsh Posté le 12-05-2004 à 20:51:36    

Je n'arrive pas à afficher le bas (26 pixels) d'une div (contenant mon logo de 497*172 pixel centré en haut d'une page) sur une autre div (contenant mon texte, centré, et à donc situé à (172-26=146 pixels du haut de la page).
 
Voici mon code css:  
 

Code :
  1. #PageCentrale {
  2. width:95%;
  3.          text-align:center;
  4. border:3px
  5.          solid #000000;
  6. background-color:#FFFFFF;
  7. margin-left:auto;
  8.          margin-right:auto;
  9. margin-top: 146px;
  10. }
  11. #logoCentre {
  12. margin-left:auto;
  13. margin-right:auto;
  14. margin-top:0px;
  15. text-align:center;
  16. }

 
 
La div contenant le logo s'affiche en bas de celle contenant le texte.
Merci de m'éclairer  :)


Message édité par neo-spy le 12-05-2004 à 21:05:33
Reply

Marsh Posté le 12-05-2004 à 20:51:36   

Reply

Marsh Posté le 12-05-2004 à 21:41:48    

Reply

Marsh Posté le 12-05-2004 à 21:56:13    

Il n'y a pas d'url donc je met le code html.

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>...</title>
  7. <link rel="stylesheet" type="text/css" href="Site.css" title="principal">
  8. </head>
  9. <body>
  10. <div id="logoCentre">
  11. <img src="Layout/Images/Haut-Centre.png">
  12. <div id="PageCentrale">
  13. mapage</div>
  14. </body>
  15. </html>


Message édité par neo-spy le 12-05-2004 à 21:56:27
Reply

Marsh Posté le 12-05-2004 à 22:06:06    

OK. C'est normal car les éléments se superposent les uns sur les autres : les derniers déclarés dans le code HTML passent par dessus les premiers.
 
Or ici PageCentrale est opaque car tu lui as donné une couleur de fond.
 
Il faut donc que tu positionnes ton image de manière absolue (voire de lui donner un z-index si tu veux que l'image continue à précéder PageCentrale dans le code)
 
Le positionnement avec les CSS : http://incongru.webdynamit.net/PositionnementCss


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-05-2004 à 22:50:19    

J'avais effectivement essayé avec   position: absolute, mais cela ne marche qu'en indiquant un top et un left alors que je voudrais conserverl'alignement centrer.
 
Avec margin-left:auto et margin-right:auto , l'image se met cette fois en haut à droite du document.  
Elle est bien dessus mon div avec le texte, mais à droite de la page (au lieu d'être centrée)....


Message édité par neo-spy le 12-05-2004 à 23:04:14
Reply

Marsh Posté le 12-05-2004 à 23:25:21    

Mais tu peux utiliser le positionnement absolu pour centrer horizontalement l'image. Il faut utiliser la même méthode qu'ici : http://incongru.webdynamit.net/CentrageVertical


Message édité par gm_superstar le 12-05-2004 à 23:37:02

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-05-2004 à 23:35:11    

Merci !
cela fonctionne avec le duo position: absolute et  margin-left.

Reply

Marsh Posté le 13-05-2004 à 14:01:39    

<div id="logoCentre"> n'est pas fermée


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Sujets relatifs:

Leave a Replay

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