[CSS] inline et width sur un div
inline et width sur un div [CSS] - HTML/CSS - Programmation
Marsh Posté le 12-09-2003 à 15:12:10
Code :
|
---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Marsh Posté le 12-09-2003 à 15:34:55
parce que blaialba inférieur a 200px;
ou alors j'ai pas compris ce que tu souhaitais faire ![[:spamafote]](https://forum-images.hardware.fr/images/perso/spamafote.gif "[:spamafote]")
---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Marsh Posté le 12-09-2003 à 15:54:23
ok c'est moi qu'est ptet pas été très clair 
Donc sous IE j'obtiens ça:
Code :
|
mais sous moz
Code :
|
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?
Marsh Posté le 12-09-2003 à 16:07:22
oki .. j'ai compris 
en ajoutant un float:left; ca devrait fonctionner ... 
enfin je crois
---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Marsh Posté le 12-09-2003 à 16:27:20
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...
Marsh Posté le 12-09-2003 à 18:14:13
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...
Marsh Posté le 12-09-2003 à 19:30:20
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 
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
Marsh Posté le 14-09-2003 à 19:10:23
exact. mais il suffit de donner une taille à un élément interne et ça marchera.
---------------
mon blog : http://www.magnin-sante.ch/journal/
Marsh Posté le 14-09-2003 à 19:12:17
| 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
Marsh Posté le 14-09-2003 à 19:13:33
| SIBELIUS a écrit : |
jsp
---------------
mon blog : http://www.magnin-sante.ch/journal/
Marsh Posté le 14-09-2003 à 19:13:52
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.
Marsh Posté le 14-09-2003 à 19:15:58
dans ce cas, ce que j'ai fait ici n'est pas correct
http://www.maxdesign.com.au/presen [...] ical12.htm
---------------
mon blog : http://www.magnin-sante.ch/journal/
Marsh Posté le 14-09-2003 à 19:18:59
bah non. C'eut été plus logique de mettre la balise <a> en block plutôt que la balise <li> en inline
Marsh Posté le 14-09-2003 à 19:24:47
| 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/
Marsh Posté le 14-09-2003 à 19:27:58
Pour éviter ce bug sans mettre un inline, c'est simple: ne pas mettre d'espace entre tes </li><li>
Marsh Posté le 14-09-2003 à 19:34:00
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
Marsh Posté le 14-09-2003 à 20:27:25
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 
...
Message édité par fadenreturns le 15-09-2003 à 18:38:17
---------------
mon blog : http://www.magnin-sante.ch/journal/
Marsh Posté le 14-09-2003 à 20:37:14
| 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
Marsh Posté le 14-09-2003 à 20:41:46
| SIBELIUS a écrit : |
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/
Marsh Posté le 14-09-2003 à 20:45:10
Il se passe quoi dans IE5 ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 14-09-2003 à 20:47:23
il y a toujours un espace entre les blocs. Moins grand mais il est bien là.
---------------
mon blog : http://www.magnin-sante.ch/journal/
Marsh Posté le 14-09-2003 à 21:39:50
Même en collant les balises ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 14-09-2003 à 21:48:04
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/
Marsh Posté le 14-09-2003 à 23:55:02
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
Marsh Posté le 15-09-2003 à 09:53:48
Merci bien pour toutes ces précisions 
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 :
|
Le tout sans positionnement absolute, donc j'avais mis des divs avec un width à 200 et en inline mais ça marche pas
Quelqu'un aurrait une méthode à me conseiller?
Marsh Posté le 15-09-2003 à 10:00:39
Bah ici, une table à deux colonnes ne serait pas une mauvaise idée je pense.
Marsh Posté le 15-09-2003 à 10:11:43
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
En fait je m'en suis à peu près sorti, je pense, en faisant comme ça:
Code :
|
En plus ça me permet d'en mettre autant que je veux sur une ligne.
Marsh Posté le 15-09-2003 à 11:11:47
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
Marsh Posté le 15-09-2003 à 11:29:03
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 :
|
Donc je cherchais une alternative 
Message édité par anapajari le 15-09-2003 à 11:29:57
Marsh Posté le 15-09-2003 à 18:17:24
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/
Marsh Posté le 13-11-2012 à 11:49:31
Bonjour,
À la place de "inline", chez moi cela fonctionne avec "inline-block".
Seb.
Sujets relatifs:
- [CSS] outil de validation du W3C
- Problè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
Marsh Posté le 12-09-2003 à 15:07:43
bon voila en gros j'ai ça:
Les deux class libelDpc et inputDpc sont definis comme ça:
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