[CSS] probleme hauteur de cadre

probleme hauteur de cadre [CSS] - HTML/CSS - Programmation

Marsh Posté le 22-11-2005 à 22:01:18    

bonjour
 
vu que le premier design ne plaisait a personne sauf a moi, je refais un truc complet, avec un graphique un peu plus avancé...
 
ca avance pas mal, mais j'ai un souci avec un bloc de cadre qui veut pas faire ca hauteur, et ce depuis hier soir, je commence a en avoir ras le bol :(
 
pour que vous voyez de vous meme : www.kaillou.net/new
 
sur le bloc de bienvenue, les hauteurs ne s'ajustent pas correctement
 
j'ai utilser un bloc pour faire la partie haut avec a l'interieur d'autres blocs pour chaque element
 
meme chose pour la partie du milieu, et celle qui forme le bas du cadre
 
 
donc j'ai mon bloc milieu qui s'ajuste en fonction du texte qu'il contient, et a l'interieur, le bloc qui contient ce dit texte, et deux vlocs de chaque coté pour faire les bords du cadre
 
et ces bords font de la merde
 
je pensais que en mettant juste des margin a 0, ca ferai ce que je veux, et ben non
et un height: 100%; ne marche pas non plus :(
 
je met le bout de code pour ce morceau :
(la, celui de gauche a une taille fixe pour voir comment il se positionne)
 
html

Citation :

<div class="corps-boite">    
      <div class="tranche-milieu-gauche"></div>
      <div class="tranche-milieu-droit"></div>
      <div class="centre-corps">
          ce site est "optimisé" pour les navigateurs respectant les normes du web, donc ceux utilisant encore internet explorer, veuillez cliquer  
          <a href="http://www.mozilla.fr">ici</a><br />
          Bon surf (bien que tres limité pour le moment)</div></div>


css

Citation :

.corps-boite
{  
  margin:0px;
  padding:0px;
  border: 0px solid;
  }
 
.tranche-milieu-gauche
{  
  border:0px solid;
  float:left;
  margin: 0px;
  padding: 0px;
  width: 16px;
  height: 50px;
  background-image: url("kaillou_fichiers/tranche-milieu-gauche.png" ) !important;
  background-image: url("kaillou_fichiers/tranche-milieu-gauche-ie.png" );
  background-repeat: repeat-y;  
  }
 
.centre-corps
{  
  margin: 0px;
  margin-right:16px;
  margin-left:16px;
  padding: 0px;
  background-color: #d7dffe;  
  }
 
.tranche-milieu-droit
{  
  float:right;
  margin: 0px;
  padding: 0px;
  width: 16px;
  border:0px solid;
  background-image: url("kaillou_fichiers/tranche-milieu-droit.png" ) !important;
  background-image: url("kaillou_fichiers/tranche-milieu-droit-ie.png" );
  background-repeat: repeat-y;  
  }


 
 
autre question au passage : pourquoi IE me coupe ma page completement parfois a la fin de l'ecran, le scroll ne servant a rien (ceux qui l'ont eut comprendront sans probleme)
 
merci


Message édité par kaillou38 le 22-11-2005 à 22:06:23

---------------
ras
Reply

Marsh Posté le 22-11-2005 à 22:01:18   

Reply

Marsh Posté le 22-11-2005 à 22:37:44    

Ce que j'ai dans un de mes templates et qui marche trés bien :

Code :
  1. .pffff {
  2.   line-height: 0px
  3. }
  4. td.right-bottom-fill {
  5.   background-image: url(./images/right-fill.png);
  6.   margin: 0;
  7.   height:100%;
  8.   vertical-align: bottom;
  9. }


et dans la page html

Code :
  1. <td class="pffff right-bottom-fill"><img src="./modele/beos6/images/right-bottom-back.png" alt="" /></td>


 
Je te laisses essayer les différences entre nos deux css. Si je me suis pas planté, je t'ai copier la partie qui permet d'agrandir une image sur toute la hauteur de la zone. S'il y a une image visible et une autre en fond, c'était pour avoir un effet de coin qu'a une taille fixe sans espace entre ce coin et le côté de l'ensemble.
 
PS : Je sais, les tables de présentation, c'est mal mais ce template est vieux, mais je l'indique par ce qu'il correspond à ce qu'il essaye de faire. ;)

Reply

Marsh Posté le 22-11-2005 à 22:53:20    

les seuls differences que je vois, c'est le line-height:0px qui a pour effet de me mettre l'epaisseur du bloc texte a 0 : pas tres pratique, et le vertical-align: bottom; qui n'a aucun effet chez moi :(
 
par contre, le fait de foutre deux classes pour un meme element est sympa, je connaissais pas, et ca me donne des idées :D
(bon pas pour mon probleme actuel :( )


---------------
ras
Reply

Marsh Posté le 23-11-2005 à 00:15:43    

Sauf erreur de ma part, t'as pas de texte dans le div contenant l'image qui se retaille pas, essaye donc le line-heigth quelques minutes voir si par miracle ca corrige pas ton probléme.
Je sais que moi aussi j'avais eu le même probléme que toi à moment donnée et si la solution est pas là, alors je fouillerait d'avantage mon modéle pour retrouver où se cache l'élément manquant.

Reply

Marsh Posté le 23-11-2005 à 00:23:06    

ben, j'ai essayé dans le div conteneur (.corps-boite) ou il y a l'ensemble des element
 
et dans celui ou il y a la tranche (.tranche-milieu-gauche ou droite), et les deux ne font rien (enfin celui dans le conteneur me met tout le bloc a une hauteur de 0)
 
par contre un truc bizarre, c'est que ff me fait un cadre de 0 de haut, et ie fait un cadre d'environ 10px...
 
en tout cas je te remercie de ton aide


Message édité par kaillou38 le 23-11-2005 à 00:23:42

---------------
ras
Reply

Sujets relatifs:

Leave a Replay

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