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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  deux bloc de la même taille

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

deux bloc de la même taille

n°1333324
freed102
Arayashiki
Posté le 28-03-2006 à 10:07:31  profilanswer
 

deja pour commencer un petit bout de CSS :
 

Code :
  1. .texte_postit{
  2. margin-left:15px;
  3. }
  4. #postit{
  5. position:relative;
  6. width:148px;
  7. border: 1px solid #CCCCCC;
  8. padding:1px;
  9. margin-bottom:10px;
  10. }
  11. #postit_inside{
  12. width:148px;
  13. background-color:#F8ECDF;
  14. float:left;
  15. }
  16. .post_it_texte_noir {
  17. font-family: Arial, Helvetica, sans-serif;
  18. font-size: 12px;
  19. color: #000000;
  20. }
  21. .post_it_texte_orange {
  22. font-family: Arial, Helvetica, sans-serif;
  23. font-size: 12px;
  24. color: #FF6600;
  25. }
  26. .post_it_points {
  27. font-family: Arial, Helvetica, sans-serif;
  28. font-size: 14px;
  29. font-weight: bold;
  30. color: #000000;
  31. }


 
puis un petit bout d'HTML :
 

Code :
  1. <div id="postit">
  2.     <div id="postit_inside">
  3.      <p class="texte_postit"> <span class="post_it_texte_noir">Vous poss&eacute;dez</span> <br />
  4.            <span class="post_it_points">5 460</span> <span class="post_it_texte_orange">points</span> </p>
  5.     </div>
  6.    </div>


 
et une petite image :
 
http://www.freedfromparis.com/temp/OR/_test/div.jpg
 
 
... et la question est....
 
Comment faire pour que sur FF et ses copines ce soit comme sur IE ??

Message cité 1 fois
Message édité par freed102 le 28-03-2006 à 10:07:59
mood
Publicité
Posté le 28-03-2006 à 10:07:31  profilanswer
 

n°1333350
j_lecruel
☀ ☁ ☂
Posté le 28-03-2006 à 10:39:26  profilanswer
 

Salut,
 
essaie de mettre un overflow:auto sur ton #postit...


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
n°1333376
freed102
Arayashiki
Posté le 28-03-2006 à 11:00:37  profilanswer
 

j'ai essayé.. mais sur IE mac il me met des barres de scrolling ce con !

n°1333430
bixibu
Ca ... c'est fait!
Posté le 28-03-2006 à 11:26:44  profilanswer
 

Tu veut la bordure grise autour du cadre orange ?
 
Il faut que tu mette la div contenant le cadre orange (et donc qui fait la bordure grise) avec une hauteur fixe (heigh)
 
pour  virer les barres de scrool tu peut bidouiller avec overflow-x:hidden et overflow-y:hidden

n°1333434
freed102
Arayashiki
Posté le 28-03-2006 à 11:28:22  profilanswer
 

bah ouai mais je peux pas mettre de hauteur fixe parceque le contenu est variable

n°1333447
j_lecruel
☀ ☁ ☂
Posté le 28-03-2006 à 11:33:42  profilanswer
 

Et il n'y a qu'IE Mac qui rajoute les scrollbars ?


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
n°1333481
freed102
Arayashiki
Posté le 28-03-2006 à 12:02:15  profilanswer
 

bah en essayant hier ouai j'ai l'impression que ya que cette daube d'IE Mac

n°1333856
freed102
Arayashiki
Posté le 28-03-2006 à 17:13:35  profilanswer
 

j'ai essayé les overflow-x:hidden etc etc.. sur IE mac j'ai des grosses barres de scrolling inutiles et abominables !!! en dehors de ça sur tous les autres le overflow:auto; fonctionne.. c chiant !

n°1335698
Pitsy
Posté le 30-03-2006 à 17:23:11  profilanswer
 

freed102 a écrit :


 
... et la question est....
 
Comment faire pour que sur FF et ses copines ce soit comme sur IE ??


 
Il est tout à fait normal que FF t'affiche ceci:
 
En plaçant le contenu en float:left, le contenu de celui-ci ne se déroule plus dans le flux normal. Pour le conteneur, il n'y a donc plus de hauteur de contenu. Pour y remédier, si tu n'as pas d'autres infos à l'intérieur du cadre, tu supprimes le float qui ne sert à rien et ton problème disparaîtra.
 
Exemple avec code simplifié:
 


#postit { width:148px;
    border: 1px solid #CCCCCC;
    padding:1px;
    margin-bottom:10px;}
       
#postit p { margin:0;
     padding:5px 15px;
     background-color:#F8ECDF;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000;}      
   
.post_it_texte_orange {color: #FF6600;}
         
#postit b { font-size: 14px;}
 
 
 
<div id="postit">
 <p>Vous poss&eacute;dez<br />
 <b>5 460</b> <span class="post_it_texte_orange">points</span></p>
</div>
 


 
 
 
Si tu as plusieurs infos de ce genre à mettre à l'intérieur du cadre (mais vraisemblabement pas puisque tu as mis un id à ton postit_inside et non un class ;) ) et donc que le float s'avère nécessaire, 2 options pour placer l'indispensable clear:both (ou clear:left ou clear:right selon les cas) qui indique au conteneur de s'allonger jusqu'au bas des float:
 
1) Tu indiques au conteneur qu'il doit se clearer en bas; mieux du point de vue définition puisqu'on n'agit que sur le CSS, mais pas sûre de la compatibilité avec IE5 mac:
 

div#postit:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}


 
hack pour IE si ça ne suffit pas:


* html .postit {height: 1%;}


 
2) l'ajout d'un <div style="clear:both;"><div> vide en-dessous des float juste avant la fermeture du conteneur
 
Le clear:both pouvant s'appliquer à n'importe quel élément dans le flux normal, se trouvant au dessous des flottants, dans le même container.
 
 
 
 
 

n°1335724
freed102
Arayashiki
Posté le 30-03-2006 à 17:48:52  profilanswer
 

Merci pour toutes tes infos, je connais pas la deuxieme méthode.. je vais tester...  
cela dit je trouve que le <div style="clear:both;"><div> c'est aussi sale qu'un bon <td></td> vide !! :lol: bref... passons ce détail !  
 
je viens d'essayer ta méthode en supprimant le float:left...  j'avais un probleme,
 
au départ j'avais ça :
 
http://www.freedfromparis.com/temp/OR/_test/postit1.jpg
 
 
ensuite j'ai rajouté un padding:1px; à mon element postit_inside
et j'obtiens ça :
 
http://www.freedfromparis.com/temp/OR/_test/postit2.jpg
 
si je mets padding:0; j'obtiens ça :
 
http://www.freedfromparis.com/temp/OR/_test/postit1.jpg
 
 
... je trouve pas ça tres logique tout de même... mais j'utilise surement pas la bonne méthode !

Message cité 1 fois
Message édité par freed102 le 30-03-2006 à 17:49:37
mood
Publicité
Posté le 30-03-2006 à 17:48:52  profilanswer
 

n°1335889
Pitsy
Posté le 30-03-2006 à 21:32:38  profilanswer
 

freed102 a écrit :

Merci pour toutes tes infos, je connais pas la deuxieme méthode.. je vais tester...  
cela dit je trouve que le <div style="clear:both;"><div> c'est aussi sale qu'un bon <td></td> vide !! :lol: bref... passons ce détail !
 
... je trouve pas ça tres logique tout de même... mais j'utilise surement pas la bonne méthode !


 
Clair que le div vide est un pis-allé. Disons que si la première méthode ne fonctionne pas avec IE5 mac et qu'il faut impérativement que ça marche, c'est une solution néanmoins acceptable.
 
Si tu places en haut, de ton css un * {margin :0; padding:0;} tu t'apercevras que ta bande blanche n'apparaît plus. Donc vraisemblablement elle peut provenir d'une règle de marge ou de padding pas défaut du navigateur (toujours faire gaffe aux règlages par défaut, différentes d'un nav à l'autre). Je dois avouer n'avoir pas chercher plus loin à comprendre la logique de ton test...
 
Maintenant de nouveau, plus ta construction est compliquée et plus elle contient d'éléments inutiles, plus tu vas chercher longtemps la source du problème. Le code que je t'ai proposé est nettement plus court pourtant il correspond au résultat escompté, non? :)

n°1335906
freed102
Arayashiki
Posté le 30-03-2006 à 22:06:53  profilanswer
 

oui on peut dire que c plus efficace.. mais j'ai toujours un *{margin:0; padding:0} au début de ma CSS... et visiblement il aime pas les padding:0;


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

  deux bloc de la même taille

 

Sujets relatifs
[JS] detecter la taille d'une imagetaille automatique avec window.open
[Oracle][sqlldr] enregistrement de taille variable[CSS] appliquer une taille à un hover
Taille d'un dossier sur le réseaucomment augmenter la taille du heap ?
Taille d'un bloc (pour prendre la hauteur de tte la page ?Bloc de texte de taille fixe / centré sur la page + image ?
probleme taille bloc en pourcentagecomment augmenter la taille de bloc sur sql ?
Plus de sujets relatifs à : deux bloc de la même taille


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