Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1786 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme de position de DIV une ptite aide svp

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Probleme de position de DIV une ptite aide svp

n°2132536
hyptnos
GT : Gui iom
Posté le 22-03-2012 à 17:25:59  profilanswer
 

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>

mood
Publicité
Posté le 22-03-2012 à 17:25:59  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme de position de DIV une ptite aide svp

 

Sujets relatifs
Problème de liaison wikimedia/wikimindmap[RESOLU] Problème de cration de tableau avec ExtJS 4
[XML] Problème avec formulaire envoiProbleme pour compiler un fichier java
aide moi !!!! pour ajouter google adsence dans replyeProbleme couleur de fond newsletter
wx-widget - Problème de conception avec ThreadAide sur macro Excel
probléme d'installation et compilation de QWT sous netbeansCSS couleur texte + position texte
Plus de sujets relatifs à : Probleme de position de DIV une ptite aide svp

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.116 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR