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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] inline et width sur un div

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] inline et width sur un div

n°513427
anapajari
s/travail/glanding on hfr/gs;
Posté le 12-09-2003 à 15:07:43  profilanswer
 

bon voila en gros j'ai ça:

Code :
  1. <div class="dpc">blabla</div>
  2.        <div class="dpc">blaialba</div>


Les deux class libelDpc et inputDpc sont definis comme ça:

Code :
  1. .dpc{
  2.   display:inline;
  3.   width:200px;
  4. }


L'idée étant d'avoir deux divs se comportant comme du texte. Mais avec une taille fixée.
Or si ça marche avec IE, mozilla a l'air de s'en tamponner sevère et ma div se retrouve avec une width equivalent à auto.
 
Ou c'est que j'ai pas bon? ou comment puis-je faire autrement?


Message édité par anapajari le 12-09-2003 à 15:16:59
mood
Publicité
Posté le 12-09-2003 à 15:07:43  profilanswer
 

n°513434
simogeo
j'ai jamais tué de chats, ...
Posté le 12-09-2003 à 15:12:10  profilanswer
 

Code :
  1. .dpc{
  2.   display:inline;
  3.   width:200px;
  4. overflow:hidden;
  5. }


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
n°513441
anapajari
s/travail/glanding on hfr/gs;
Posté le 12-09-2003 à 15:17:46  profilanswer
 

change rien du tout ...

n°513456
simogeo
j'ai jamais tué de chats, ...
Posté le 12-09-2003 à 15:34:55  profilanswer
 

parce que blaialba inférieur a 200px;
 
ou alors j'ai pas compris ce que tu souhaitais faire  [:spamafote]


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
n°513484
anapajari
s/travail/glanding on hfr/gs;
Posté le 12-09-2003 à 15:54:23  profilanswer
 

ok c'est moi qu'est ptet pas été très clair  :(  
Donc sous IE j'obtiens ça:

Code :
  1. |blabla          | |blaialba       |


mais sous moz

Code :
  1. |blabla| |blaialba|


Et moi ce que je voudrais c'est que ça fasse toujours comme sous IE.
En effet sous mozilla si je mets inline j'ai l'impression qu'il ne tient plus compte de width.
 
Suis-je plus clair?

n°513499
simogeo
j'ai jamais tué de chats, ...
Posté le 12-09-2003 à 16:07:22  profilanswer
 

oki .. j'ai compris  :sweat:  
 
en ajoutant un float:left; ca devrait fonctionner ...  :whistle:   enfin je crois


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
n°513520
anapajari
s/travail/glanding on hfr/gs;
Posté le 12-09-2003 à 16:27:20  profilanswer
 

oui mais non  je sais que j'aurrais pu faire pareil avec float mais ça m'arrange pas...
Et puis surtout je voulais savoir si j'avais pas bon ou si c'était mozilla ou IE qui consommait des produits illicites...

n°513611
gizmo
Posté le 12-09-2003 à 18:14:13  profilanswer
 

c'est surtout qu'à partir du moment où tu indiques inline, le width ne peut plus fonctionner, vu que c'est inline justement. IE a tord, once again...

n°513636
gm_superst​ar
Appelez-moi Super
Posté le 12-09-2003 à 19:30:20  profilanswer
 

Et pour enfoncer le clou : http://www.yoyodesign.org/doc/w3c/ [...] pdef-width
 

Citation :

Celle-ci ne s'applique pas aux éléments non remplacés et de type en-ligne.


 
On ne pas faire plus clair :D


Message édité par gm_superstar le 12-09-2003 à 19:30:31

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°514473
fadenretur​ns
Posté le 14-09-2003 à 19:10:23  profilanswer
 

exact. mais il suffit de donner une taille à un élément interne et ça marchera.


---------------
mon blog : http://www.magnin-sante.ch/journal/
mood
Publicité
Posté le 14-09-2003 à 19:10:23  profilanswer
 

n°514478
sibelius
Vous êtes sûr ?
Posté le 14-09-2003 à 19:12:17  profilanswer
 

fadenreturns a écrit :

exact. mais il suffit de donner une taille à un élément interne et ça marchera.


Les inline ne peuvent contenir que des inline, non ?  :??:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°514482
fadenretur​ns
Posté le 14-09-2003 à 19:13:33  profilanswer
 

SIBELIUS a écrit :


Les inline ne peuvent contenir que des inline, non ?  :??:  


 
 :o jsp


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514484
gizmo
Posté le 14-09-2003 à 19:13:52  profilanswer
 

En théorie, oui. Mais comme il s'agit ici d'un bloc transformer en inline, c'est correct d'un point de vue syntaxique pour le HTML. Il faudrait voir ce que disent les specs CSS dans ce cas.

n°514489
fadenretur​ns
Posté le 14-09-2003 à 19:15:58  profilanswer
 

dans ce cas, ce que j'ai fait ici n'est pas correct
 
http://www.maxdesign.com.au/presen [...] ical12.htm
 
 :sweat:


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514498
gizmo
Posté le 14-09-2003 à 19:18:59  profilanswer
 

bah non. C'eut été plus logique de mettre la balise <a> en block plutôt que la balise <li> en inline

n°514501
fadenretur​ns
Posté le 14-09-2003 à 19:24:47  profilanswer
 

gizmo a écrit :

bah non. C'eut été plus logique de mettre la balise <a> en block plutôt que la balise <li> en inline


 
Justement la balise a est en block et la balise a en inline.
 
Voilà pourquoi j'ai fait ça  
 
 
http://www.magnin-sante.ch/journal/bugie/bug.htm
http://www.magnin-sante.ch/journal [...] .php&id=53


Message édité par fadenreturns le 14-09-2003 à 19:25:10

---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514503
gizmo
Posté le 14-09-2003 à 19:27:58  profilanswer
 

Pour éviter ce bug sans mettre un inline, c'est simple: ne pas mettre d'espace entre tes </li><li>

n°514510
sibelius
Vous êtes sûr ?
Posté le 14-09-2003 à 19:34:00  profilanswer
 

En fait, je ne comprends pas ton problème de inline/block avec tes listes.
 
Pour ma part, je laisse tout en bloc et ça marche très bien : http://www.alsacreations.com/articles/menu/
 


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°514544
fadenretur​ns
Posté le 14-09-2003 à 20:27:25  profilanswer
 

SIBELIUS: le but cest de les afficher de manière horizontale...
 
EDIT: je voulais dire de manière verticale  ;) .
 

gizmo a écrit :

Pour éviter ce bug sans mettre un inline, c'est simple: ne pas mettre d'espace entre tes </li><li>


 
En effet ça marche aussi en faisant comme ça ... j'aurai jamais cru ça :lol: ...


Message édité par fadenreturns le 15-09-2003 à 18:38:17

---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514552
sibelius
Vous êtes sûr ?
Posté le 14-09-2003 à 20:37:14  profilanswer
 

fadenreturns a écrit :

SIBELIUS: le but cest de les afficher de manière horizontale...


Ben dans ce cas, il suffit d'enlever le float ! ;)
 
Essaye ça :  
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {font: 14px Verdana, Arial, sans-serif;}
 
ul {list-style-type: none;}  
 
div.menu a {
     margin: 0 2px;
     width: 100px;  
     height: 20px;
     display: block;
     text-align: center;
     border: 1px solid gray;
     text-decoration: none;
     color: #000;
     background: #fff;
     }
   
div.menu a:hover {
     background: #ccc;
     border: 1px solid gray;  
     }
 
div.menu a:active {
     background: gray;
     border: 1px solid gray;  
     color: #fff;
     }
-->
</style>
</head>
 
<body>
<div class="menu">
 <ul><li><a href="">Menu 1</a></li>
 <li><a href="">Menu 2</a></li>
 <li><a href="">Menu 3</a></li>
 <li><a href="">Menu 4</a></li></ul>
</div>
</body>
</html>


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°514557
fadenretur​ns
Posté le 14-09-2003 à 20:41:46  profilanswer
 

SIBELIUS a écrit :


Ben dans ce cas, il suffit d'enlever le float ! ;)


 
Oui mais le bug est encore présent dans IE5 ( dans une moindre mesure )
 
Par contre c bon pour IE5.5 et IE6 je crois


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514560
sibelius
Vous êtes sûr ?
Posté le 14-09-2003 à 20:45:10  profilanswer
 

Il se passe quoi dans IE5 ?  :??:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°514565
fadenretur​ns
Posté le 14-09-2003 à 20:47:23  profilanswer
 

il y a toujours un espace entre les blocs. Moins grand mais il est bien là.


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514587
sibelius
Vous êtes sûr ?
Posté le 14-09-2003 à 21:39:50  profilanswer
 

Même en collant les balises ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°514591
fadenretur​ns
Posté le 14-09-2003 à 21:48:04  profilanswer
 

Si tu colle les balises c'est bon, y a besoin de rien ...
 
Mais perso je préfère presque faire un petit hack CSS au lieu de coller les balises ... Mais j'ai peut-être tord.
 
Qu'en pensez vous ?


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°514657
gizmo
Posté le 14-09-2003 à 23:55:02  profilanswer
 

Bah, au final, ce n'est pas bien méchant, mais cela revient à corriger un bug au niveau de l'interprétation du HTML par une astuce au niveau du CSS

n°514731
anapajari
s/travail/glanding on hfr/gs;
Posté le 15-09-2003 à 09:53:48  profilanswer
 

Merci bien pour toutes ces précisions  :jap:  
 
Par contre je sais toujours pas comment faire mon truc !
C'est dans pour un formulaire j'ai besoin d'avoir un truc comme ça:

Code :
  1. Champs1             : ______________
  2. Champs2_plus_grand  : ______________
  3. Chps3               : ______________


Le tout sans positionnement absolute, donc j'avais mis des divs avec un width à 200 et en inline mais ça marche pas :sweat:  
 
Quelqu'un aurrait une méthode à me conseiller?

n°514738
gizmo
Posté le 15-09-2003 à 10:00:39  profilanswer
 

Bah ici, une table à deux colonnes ne serait pas une mauvaise idée je pense.

n°514747
anapajari
s/travail/glanding on hfr/gs;
Posté le 15-09-2003 à 10:11:43  profilanswer
 

j'aurrais aimé ne pas utiliser de tableau ( comment ça je suis difficile), surtout que le formulaire n'est pas vraiment aussi simple ... Mais merci quand même  :jap:  
En fait je m'en suis à peu près sorti, je pense, en faisant comme ça:

Code :
  1. <div style="display: block;">
  2.   <div style="float: left; width:200px;">Babanlaaaaaaaaaaa</div>
  3.   <div style="float: left; width:200px;">Babanla2</div>
  4.   </div>


En plus ça me permet d'en mettre autant que je veux sur une ligne.

n°514782
sibelius
Vous êtes sûr ?
Posté le 15-09-2003 à 11:11:47  profilanswer
 

Tu ne sera pas battu sur la place publique si tu utilises un tableau pour un formulaire... moi, sémantiquement parlant, je n'y vois pas d'objection


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°514791
anapajari
s/travail/glanding on hfr/gs;
Posté le 15-09-2003 à 11:29:03  profilanswer
 

Le probleme est pas temps le fait d'utiliser un tableau, mais d'eviter de se galerer avec les colspan. En effet le formulaire que je dois réaliser ressemble plus à cela:

Code :
  1. Champs1             : ______________    Champs2_plus_grand  : ______________
  2. Chps3               : ______________    Champs4             : ______________     Champs5              : ______________
  3. Champs6             : ______________
  4. Champs7             : ______________    Champs8_plus_grand  : ______________


Donc je cherchais une alternative :)


Message édité par anapajari le 15-09-2003 à 11:29:57
n°515135
fadenretur​ns
Posté le 15-09-2003 à 18:17:24  profilanswer
 

pour les champs tu utilise la balise label que tu style de mnière appropriée. Mais C'est chaud si tu veux une présentation au pixel près.
 
<form>
<fieldset>
<legend>Ma légende de formulaire</legend>
 
<label>champ 1</label><input bla bla />
<label>champ 2</label><input bla bla />
 
</fieldset>
</form>
 


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°2163741
maginot
Posté le 13-11-2012 à 11:49:31  profilanswer
 

Bonjour,
À la place de "inline", chez moi cela fonctionne avec "inline-block".
 
Seb.

mood
Publicité
Posté le   profilanswer
 


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

  [CSS] inline et width sur un div

 

Sujets relatifs
[CSS] outil de validation du W3CProblème de CSS avec Konqueror
background CSS et mise en cache[CSS]Mettre une image de fond
Preload en CSS ?[CSS] newbie : Changer de style a un endroit precis [résolu]
Tester un tuto : faire un design CSS à la portée de tous[CSS] height d'un div reglé par expression
Menu déroulant, Javascript & CSS, Fonctionne sur un max de nav.[CSS] Mettre en forme du code
Plus de sujets relatifs à : [CSS] inline et width sur un div

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

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