28172 sujets

CSS et mise en forme, CSS3

Probleme de display:inline et width avec un div

bonjour,

dès que je veux utiliser les propriétés width=200px( par exemple) et display:inline pour une div, la propriété de width n'est pas prise en compte. sauriez vous me dire pourquoi et comment arranger le probleme?
Merci d'avance.

<style>
div.colonne1
{
display:inline;
width:500px; 
}</style>
 <div class="colonne1">
		  premiere colonne
  </div>texte

Modifié par yossi (28 Feb 2005 - 14:47)
Bonjour et bienvenue Yossi sur ce forum,

Pourrions-nous en savoir un peu plus sur la page elle même. Un petit exemple en ligne serait un plus certain.
J'avoue que je comprend pas ce que tu veux faire avec inline sur une div tout en le dimensionnant Smiley eek
As-tu déjà lu dans les tutoriels La structure des balises : bloc et en-ligne? Tu devrais y trouver matière à abandonner ton display:inline Smiley cligne
Le seul moyen pour utiliser des propriétés comme width avec un élement de type inline, serait d'utiliser display: inline-block... Mais sous IE, inline-block n'est implémenté que pour <span> et <a>. Sous Gecko, il n'est pas du tout implémenté. Ca ne fonctionne en fait que sous Opéra Smiley bawling
en réponse a igor :

merci de m'avoir répondu. J'ai lu avec intèrêt le lien que tu m'as donné et il y a pourtant marqué à la fin
a écrit :
"Notez que vous pouvez aisément passer d'une structure bloc à une structure en-ligne (et vice-versa) grâce à la propriété CSS "display"."

En conclusion, on peut donc utiliser les div pour tout.
Ca me permettra de pouvoir imbriquer toutes les sortes de bloc à l'intérieur même d 'un autre ce que ne permettent pas les blocs en ligne:
a écrit :
"Une balise bloc peut contenir une (ou plusieurs) balise bloc et/ou en-ligne, sauf exceptions, et avoir une dimension (largeur, hauteur définies).
Une balise en-ligne ne peut contenir QUE une (ou plusieurs autres) balise en ligne."
(citation du lien dans la meme page que tu me donnes).
Je reste donc sur ma position Smiley smile mais je voudrais arranger ce probleme parcequ en plus , il me semble que je l'ai déjà fait.
Merci de m'aider.
Modifié par yossi (28 Feb 2005 - 15:39)
Administrateur
yossi a écrit :
"Notez que vous pouvez aisément passer d'une structure bloc à une structure en-ligne (et vice-versa) grâce à la propriété CSS "display"."

En conclusion, on peut donc utiliser les div pour tout.
Non, surtout pas, même si chaque balise peut être modifiée visuellement via CSS, le plus important est de conserver sa sémantique et d'utiliser chaque balise à bon escient.
Il ne faut surtout pas utiliser une balise générique comme <div> partout.
http://openweb.eu.org/articles/respecter_semantique/
http://www.alsacreations.com/blog/index.php?2004/08/15/51-maladies-exotiques-des-css

Dans ton cas, comme l'a souligné Laurent Denis : si tu appliques un display inline sur une balise bloc comme <div>, la propriété width ne s'applique plus. C'est aussi simple que ça.

Donc impossible de pouvoir te dépanner tant que, comme l'a dit Igor :
Igor a écrit :
Pourrions-nous en savoir un peu plus sur la page elle même. Un petit exemple en ligne serait un plus certain.

Modifié par Raphael (28 Feb 2005 - 15:41)
yossi a écrit :
il y a pourtant marqué à la fin "Notez que vous pouvez aisément passer d'une structure bloc à une structure en-ligne (et vice-versa) grâce à la propriété CSS "display"."

En conclusion, on peut donc utiliser les div pour tout.


Non. C'est exactement la chose à ne pas faire. Un élément <div> sert lorsqu'il n'existe pas d'élément spécifique approprié. Il ne sert pas à remplacer un élément plus significatif.

yossi a écrit :

Ca me permettra de pouvoir ajouter un bloc à l'intérieur même d 'un autre ce que ne permettent pas les blocs en ligne:
"Une balise bloc peut contenir une (ou plusieurs) balise bloc et/ou en-ligne, sauf exceptions, et avoir une dimension (largeur, hauteur définies).
Une balise en-ligne ne peut contenir QUE une (ou plusieurs autres) balise en ligne."
(citation du lien dans la meme page que tu me donnes).

Il ne faut pas confondre:
- le fait que HTML distingue, du point de vue structurel, des contenus de type %block et %inline.
- et le fait que CSS distingue, du point de vue du modèle de représentation visuel, des éléments de type bloc et de type en ligne (sans compter les boîtes de lignes).

CSS ne permet pas de modifier la distinction structurelle %block %inline.

yossi a écrit :

je voudrais arranger ce probleme parcequ en plus , il me semble que je l'ai déjà fait.
Merci de m'aider.


Le code dont tu donnes l'exemple dans ton message ci-dessus est typiquement un cas de flottants (float: left sur ton .colonne1)
c'est bon finalement. En fait ce que je voulais faire c 'est tout simlement me servir de <div> pour faire un tableau (oui je sais je suis pas un puriste, mais j'ai pas besoin d 'afficher ma page sur un navigateur texte )
voila ma solution, elle vaut ce quelle vaut mais elle marche Smiley smile 

.colonne1
{
float:left;
text-align:right;
margin-right:15px;
}
.colonne2
{
float:left;
}
 <div class="colonne1">
 <div>Votre Login</div>
		  <div>Votre mot de passe </div>
		  </div>

		  <div class="colonne2">
		  <div>	<input name="login" type="text"  value="<? if (!empty($_REQUEST["login"])) echo $_REQUEST["login"];?>" ></div>
			<div>		<input name="password" type="password" value="">			</div>
			<div> 	<input type="submit" name="Submit" value="Envoyer" ></div>
		</div></div>
Heu... Je vais être un peu brutal, mais ce tableau en CSS, ce n'est pas du purisme, c'est une ânerie.

Voici le brillant résultat une fois le HTML linéarisé (pas seulement dans un navigateur texte, dans n'importe quel media oral, ou dans n'importe quel cas où les styles graphiques ne seront pas appliqués):

Votre Login
Votre mot de passe
<le champ de saisie login>
<le champ de saisie mot de passe>
<le bouton input>

Autrement dit, un formulaire incompréhensible et inutilisable.

Pour faire du HTML, il y a des éléments HTML, avec chacun un rôle précis (dans ce cas, les <label>, les <p>, les <dl>, <dt> et <dd>, ou les éléments de tableaux.
Oui, j'ai bien dit les éléments de tableaux : un tableau sera ici beaucoup plus respectueux des normes que ce soit-disant "purisme".

Et c'est un authentique puriste de longue date qui le dit Smiley cligne
Modifié par Laurent Denis (28 Feb 2005 - 17:33)
j'ai pas dit que je suis puriste mais que je le suis PAS justement ! Smiley smile
mais y aurait il une solution qui se passe de tableau et qui soit "rigoureuse" et respectueuse des standards ?en gros une solution appropriée au contexte. Parqeque moi les tableaux... ca me soule Smiley smile , c 'est pas souple je trouve. Avec les tableaux, dès qu'on veut rajouter une case dans une ligne, il faut la rajouter dans toutes les lignes, et il faut gérer les colspan ..... ce qui n' est pas le cas avec les div et autres blocs...
Dans ce cas, une liste de définition fera très bien l'affaire. Tu trouveras sur http://pompage.net/pompe/listesdefinitions/ les infos nécessaires pour les utiliser.
(Le principe étant de placer le <label> du champ en <dt> et l'<input> lui-même en <dd>)

J'avais lu de travers pour le "purisme". Je rectifie donc: ce tableau en CSS, ce n'est pas du non-purisme, c'est une ânerie. Smiley cligne
Modifié par Laurent Denis (28 Feb 2005 - 19:44)
Sujet clos
Aller à