Probleme de position de DIV une ptite aide svp

Probleme de position de DIV une ptite aide svp - HTML/CSS - Programmation

Marsh Posté le 22-03-2012 à 17:25:59    

Bonjour à tous
j'ai un petit soucis et je bloque. Je me dis que cela doit etre faisable vu qu'en CSS les possibilité son énorme.  
Donc j'ai un soucis de placement de DIV et de leur contenu. j'ai un design qui malheureusement m'impose un décalage de 280px vers le bas du DIV de contenu.
Au début je me suis dit ce n'es pas grave je peux largement compléter cest  280px via un module d'affichage d'image etc... puis c'est un DIV et que je peux mettre quelque chose à l'intérieur (mais seulement sur 285px de haut) c'est le design qui veux cela malheureusement
 
Ensuite j'ai un bloc extensible sans soucis, donc j'ai pensé mettre à l'intérieur du bloc extensible un DIV que je ferais monter de 280px via un margin-top.
Et bien parfait niquel sauf que mon texte lui reste 285px plus bah. malgré cela mon div d'orgine reste extensible en hauteur donc c'est juste un problème de positionnement du contenu de ce nouveau texte
 
voila le soucis en question en image
 
http://img802.imageshack.us/img802/4206/pbcsshtml.jpg
 
le bloc extensible est sur l'image avec un border de couleur rouge. La partie blanche juste au dessus c'est le div de 285px dont le contenu est vide pour le moment je ne pouvais pas le faire extensible en hauteur ce lui ci a cause du dégradé  (que la personne me demande de garder ) donc j'ai pensé faire un a l'intérieur de mon DIV extensible (qui est la continuité du gros bloc centrale de lui mettre uN DIV que je remonterais
mais voila ce que cela donne le border bleu est bien positionné mais le texte lui commence la ou l'autre DIV (border rouge) commence
 
J'ai essayer de passer le DIV en absolute (il est en relative) le texte se positionne bien mais du coup le DIV extensible ne l'ai plus :s
 
une idée ?
 
je vous joint le code donc les bloc concerner est le bloc #BLOCK3 qui est le bloc extensible qui a le border rouge et le bloc #CONTENU qui est le texte et qui devra contenir tout le contenu du site.
Je vous ai mis la totalité du code pour mieux d’imprégné de l'anarchie ^^
Je précise pour le moment il ne s'agit juste de trouver le soucis car ce n'est que la phase d'assemblage du squette HTML et du design  
merci :)
PS : désolé pour les fautes :(
 
la partie CSS

Code :
  1. *{
  2.    margin    : 0px;
  3.    padding    : 0px;
  4.    }
  5.   body{
  6.    background:#fff;
  7.    background-image :url('template/site1/background.jpg');
  8.    font-size: 11px;
  9.    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
  10.    color:#333;
  11.    line-height:1.28;
  12.    margin:0;
  13.    padding:0;
  14.    text-align   : center;
  15.    direction:ltr;
  16.    unicode-bidi:embed;}
  17.   #CLEAR { CLEAR : BOTH; }
  19.   #CONTENEUR{
  20.    width: 1100px;
  21.    background:transparent;
  22.    margin-top:0px;
  23.    position:relative;
  24.    margin-left:auto;
  25.    margin-right:auto;
  28.   }
  29.   #BLOCK1{
  30.    POSITION:RELATIVE;
  31.    WIDTH : 100%;
  32.    height:357px;
  33.    background-color:transparent;
  34.   }
  35.   #BLOCK1 #LEFT{
  36.    POSITION:RELATIVE;
  37.    FLOAT :LEFT;
  38.    WIDTH : 132px;
  39.    height:100%;
  40.    background-color:transparent;
  41.    background-image :url('template/site1/ban01.png');
  42.    background-repeat: no-repeat;
  43.   }
  44.   #BLOCK1 #CENTER{
  45.    POSITION:RELATIVE;
  46.    FLOAT :LEFT;
  47.    WIDTH : 820PX;
  48.    height:100%;
  49.    background-color:transparent;
  50.    background-image :url('template/site1/ban02.png');
  51.    background-repeat: no-repeat;
  52.   }
  53.   #BLOCK1 #RIGHT{
  54.    POSITION:RELATIVE;
  55.    FLOAT :LEFT;
  56.    WIDTH : 148px;
  57.    height:100%;
  58.    background-color:transparent;
  59.    background-image :url('template/site1/ban03.png');
  60.    background-repeat: no-repeat;
  61.   }
  63.   #BLOCK2{
  64.    POSITION:RELATIVE;
  65.    WIDTH : 100%;
  66.    height:295px;
  67.    background-color:transparent;
  68.    margin-left:42px;
  69.   }
  70.   #BLOCK2 #LEFT{
  71.    POSITION:RELATIVE;
  72.    FLOAT :LEFT;
  73.    WIDTH : 91px;
  74.    height:100%;
  75.    background-color:transparent;
  76.    background-image :url('template/site1/block2-01.png');
  77.    background-repeat: no-repeat;
  78.   }
  79.   #BLOCK2 #CENTER{
  80.    POSITION:RELATIVE;
  81.    FLOAT :LEFT;
  82.    WIDTH : 820PX;
  83.    height:100%;
  84.    background-color:transparent;
  85.    background-image :url('template/site1/block2-02.png');
  86.    background-repeat: no-repeat;
  87.   }
  88.   #BLOCK2 #RIGHT{
  89.    POSITION:RELATIVE;
  90.    FLOAT :LEFT;
  91.    WIDTH : 110px;
  92.    height:100%;
  93.    background-color:transparent;
  94.    background-image :url('template/site1/block2-03.png');
  95.    background-repeat: no-repeat;
  96.   }
  99.   #BLOCK3{
  100.    position:relative;
  101.    margin-left:42px;
  102.    background-color:transparent;
  103.    background-image :url('template/site1/block3-01.png');
  104.    background-repeat: repeat-y;
  105.    vertical-align:middle;
  106.      border:1px solid red;
  107.   }
  109.   #BLOCK4{
  110.    POSITION:RELATIVE;
  111.    WIDTH : 100%;
  112.    height:43px;
  113.    background-color:transparent;
  114.      text-align:center;
  115.    margin-left:42px;
  116.   }
  118.   #BLOCK4 #LEFT{
  119.    POSITION:RELATIVE;
  120.    FLOAT :LEFT;
  121.    WIDTH : 91px;
  122.    height:100%;
  123.    background-color:transparent;
  124.    background-image :url('template/site1/block4-01.png');
  125.    background-repeat: no-repeat;
  126.   }
  128.   #BLOCK4 #CENTER{
  129.    POSITION:RELATIVE;
  130.    FLOAT :LEFT;
  131.    WIDTH : 820PX;
  132.    height:100%;
  133.    background-color:transparent;
  134.    background-image :url('template/site1/block4-02.png');
  135.    background-repeat: no-repeat;
  136.   }
  138.   #BLOCK4 #RIGHT{
  139.    POSITION:RELATIVE;
  140.    FLOAT :LEFT;
  141.    WIDTH : 110px;
  142.    height:100%;
  143.    background-color:transparent;
  144.    background-image :url('template/site1/block4-03.png');
  145.    background-repeat: no-repeat;
  146.   }
  148.   #BLOCK5{
  149.    POSITION:RELATIVE;
  150.    WIDTH : 100%;
  151.    height:105px;
  152.    background-color:transparent;
  153.    margin-left:42px;
  154.   }
  156.   #BLOCK5 #LEFT{
  157.    POSITION:RELATIVE;
  158.    FLOAT :LEFT;
  159.    WIDTH : 91px;
  160.    height:100%;
  161.    background-color:transparent;
  162.    background-image :url('template/site1/block5-01.png');
  163.    background-repeat: no-repeat;
  164.   }
  167.   #BLOCK5 #CENTER{
  168.    POSITION:RELATIVE;
  169.    FLOAT :LEFT;
  170.    WIDTH : 820PX;
  171.    height:100%;
  172.    background-color:transparent;
  173.    background-image :url('template/site1/block5-02.png');
  174.    background-repeat: no-repeat;
  175.   }
  177.   #BLOCK5 #RIGHT{
  178.    POSITION:RELATIVE;
  179.    FLOAT :LEFT;
  180.    WIDTH : 105px;
  181.    height:100%;
  182.    background-color:transparent;
  183.    background-image :url('template/site1/block5-03.png');
  184.    background-repeat: no-repeat;
  185.   }
  187.   #CONTENU{
  188.    background-color : transparent;
  189.    position:relative;
  190.    margin-left:54px;
  191.    width: 890px;
  192.    border: 1px solid blue;
  193.    margin-top: -285px;


 
la partie HTML
 

Code :
  1. <BODY>
  2.  <DIV ID="CONTENEUR">
  3.   <DIV ID="BLOCK1">
  4.    <DIV ID="LEFT"></DIV>
  5.    <DIV ID="CENTER"></DIV>
  6.    <DIV ID="RIGHT"></DIV>
  7.   </DIV>
  8.   <DIV ID="CLEAR"></DIV>
  9.   <DIV ID="BLOCK2">
  10.    <DIV ID="LEFT"></DIV>
  11.    <DIV ID="CENTER"></DIV>
  12.    <DIV ID="RIGHT"></DIV>
  13.   </DIV>
  14.   <DIV ID="CLEAR"></DIV>
  16.   <DIV ID="BLOCK3">
  17.     <div id="contenu">
  18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur urna id nibh feugiat sit amet elementum sapien fringilla. Praesent a orci odio, sed interdum elit. Nullam interdum congue enim sit amet dictum. Ut tincidunt lectus vel enim aliquet in faucibus justo rhoncus. Nam id metus ut arcu tincidunt laoreet. Fusce non massa orci, vel imperdiet dui. Praesent lacinia est orci, at dapibus felis. Sed eget orci in massa ultricies semper a vitae mauris. Proin a faucibus diam. Vestibulum fringilla libero at lectus placerat sollicitudin. Quisque semper laoreet accumsan. Maecenas quis sem neque, a molestie purus.
  20. Quisque in purus et diam tincidunt malesuada. Quisque viverra vehicula sagittis. Maecenas porta aliquet porttitor. Duis et turpis sit amet velit adipiscing feugiat ut id nulla. Quisque quis neque laoreet ligula lobortis lobortis eu et dolor. Morbi mattis, mauris sed auctor suscipit, quam arcu sollicitudin nulla, sed convallis ante velit in lorem. Vivamus libero quam, imperdiet ut pretium sed, euismod imperdiet lectus. Ut vehicula consectetur nulla nec vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque congue, nisl ut auctor interdum, mauris odio blandit leo, et faucibus ipsum dui quis neque. Aenean eget pretium velit. Mauris vel tortor mauris. Morbi eros est, egestas fringilla porta sit amet, blandit et magna. Fusce sollicitudin, leo et scelerisque lacinia, est lorem dictum magna, a tempor eros lectus vel tellus. Morbi sodales sollicitudin fermentum. Phasellus non sapien odio, sed cursus erat.
  22. Aliquam erat volutpat. Nullam rhoncus mollis dui, eu sodales eros commodo sed. Duis aliquet purus dui, sed consequat nisl. Vestibulum tortor tortor, sollicitudin vitae sollicitudin non, dapibus ac urna. Suspendisse potenti. Nunc mollis libero mi, in adipiscing mi. Donec in augue euismod urna mollis molestie. Aliquam fringilla erat non neque mattis porta. Suspendisse ornare enim at lacus elementum tempus. Pellentesque mattis porta porta. Praesent neque tortor, mattis eu fermentum vitae, mattis quis magna. Maecenas vestibulum pellentesque nisl, vel bibendum turpis feugiat non. Praesent vel nunc dolor, in tempus arcu. Duis libero metus, imperdiet at bibendum quis, pellentesque in tortor.
  24.     </div>
  25.   </DIV>
  26.   <DIV ID="BLOCK4">
  27.    <DIV ID="LEFT"></DIV>
  28.    <DIV ID="CENTER">
  31.    </DIV>
  32.    <DIV ID="RIGHT"></DIV>
  33.   </DIV>
  34.   <DIV ID="CLEAR"></DIV>
  35.   <DIV ID="BLOCK5">
  36.    <DIV ID="LEFT"></DIV>
  37.    <DIV ID="CENTER"></DIV>
  38.    <DIV ID="RIGHT"></DIV>
  39.   </DIV>
  40.   <DIV ID="CLEAR"></DIV>
  42.   </DIV>
  43. </BODY>

Reply

Marsh Posté le 22-03-2012 à 17:25:59   

Reply

Sujets relatifs:

Leave a Replay

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