Boite qui prend la largeur du contenu

Salut à tous,

Je voudrais faire plusieurs cadres identiques (seulement la taille qui change). En fait j'aimerai que le cadre s'adapte en fonction du texte, du genre un code qui me mettrait automatiquement une marge intérieure (ex: 10px) en fonction du texte.

J'ai pas mal cherché, sans succès, quelqu'un peut m'éclairer ?

Merci
Modifié par Florent V. (17 Mar 2010 - 20:00)

Bonsoir.

Qu'appelles-tu "cadres" ?

Comme:

Nom du sélecteur {
    padding: 10px;
}

Vaxilart a écrit :
Comme:

Nom du sélecteur {
    padding: 10px;
}

Cette règle définit la marge interne de l'élément sélectionné.

Je ne comprends toujours pas où tu veux en venir.
As-tu quelque chose de concret, de visuel ?

Si tu veux simplement ajouter 10px de marge interne à tes éléments, c'est exactement la bonne règle que tu as citée. Et elle s'adapte très bien à la largeur de l'élément.
Modifié par Raphael (16 Mar 2010 - 21:12)

Merci des réponses

Je veux en fait écrire du texte puis faire un cadre (avec border, padding etc) qui s'adapte à la hauteur et la largeur du texte.

Si je mets juste padding: 10px; et border... ça me fait un cadre sur toute la largeur de la page (avec margin: 10px; aussi)

Merci

OK. J'ai pris la liberté de renommer ton sujet pour refléter ta demande, parce que là c'était vraiment pas clair.

Les éléments HTML tels que DIV, P, H1, etc., on comme rendu par défaut display:block. Avec ce type de rendu, ils vont effectivement prendre automatiquement toute la largeur disponible dans leur conteneur, et pas uniquement la largeur de leur contenu.

Il existe plusieurs modes de rendu ou types de positionnement qui permettent d'obtenir le comportement que tu décris. Le problème, c'est que ces modes de rendu (valeurs de la propriété CSS display) ou ces positionnements (propriétés CSS position ou float) ont d'autres caractéristiques, qui peuvent te gêner.

Il faudrait voir exactement ce que tu cherches à réaliser (si tu as un schéma ou une maquette graphique...) pour te répondre précisément. Mais:
- si tu veux mettre chaque bloc sur une ligne, display:table est une bonne solution (attention, non implémenté dans IE6 et IE7!);
- à défaut, display:inline-block peut faire l'affaire mais si tu as plusieurs éléments avec ce style à la suite ils se placeront les uns après les autres sur la même ligne (tu peux rajouter des BR entre pour provoquer des retours à la ligne...);
- float:left peut marcher aussi, dans une certaine mesure;
- pour des éléments les uns à côté des autres (sur une même ligne), les deux solutions ci-dessus peuvent être adaptées, voire même un simple display:inline.

Salut

Merci de ta réponse, la seule solution qui me conviendrait est le float:left;
je vais essayé de jouer un peu avec le css. Je vais essayé ça et vous tenir au courant.

Pour les nouveaux arrivés, n'hésitez pas à répondre

Re Salut

J'ai réussi à faire ce que je voulais avec ce code :

.cadre
{
	float: left;
	padding: 10px;
	margin: 10px;
	background-image: url("cadre.png");
	border-style: outset;
	border-color: rgb(145,28,188);
	border-width: 2px;
}

(en html je rajoute quelques <br /> pour que le texte se place en dessous le cadre, ça à l'air de fonctionner pareil sur les principaux navigateurs)

Je vous propose de passer ici, pour voir ce que ça donne

Merci a+

Salut,

KelT a écrit :
Je vous propose de passer ici, pour voir ce que ça donne

Au-delà de ta question CSS ton tuto HTML raconte un peu (beaucoup) n'importe quoi.

En vrac :

* tu parles d'éléments HTML et pas de balises.

* tu as zappé le DOCTYPE

*

tuto a écrit :
<meta /> Cette balise indique qu'on utilise des lettres dérivées du francais " â ï é... "

Non : on peut y mettre beaucoup de choses dont la déclaration de l'encodage qui peut être ou non de l'iso-8859-1

*

tuto a écrit :
<link /> Cette balise indique quel fichier css doit-on charger pour cette page html

Pas seulement.

* toujours à propos du LINK

tuto a écrit :
On peut également mettre le title qu'on veut à la place de "nom" (on laisse les guillemets), mais c'est sans importance.

Pas vraiment non.

*

tuto a écrit :
En fait h1 = le titre le plus important, h2 = le 2ème plus important, h3 = 3ème plus important etc... jusqu'à h6.

Rien à voir.

* etc...

Salut

Plutôt que de renvoyer sur des tutos, essaye de contre-argumenter sur de courtes phrases.

Pourrez tu me résumer le tutos sur les titre, je n'ai pas bien compris.

Merci

KelT a écrit :
Plutôt que de renvoyer sur des tutos, essaye de contre-argumenter sur de courtes phrases.

Ben les tutos servent justement à ne pas réécrire un roman à chaque fois !

Concernant les éléments Hn :
* ils ne sont pas de "simples" titres mais des titres de section d'où la définition du W3C : "Un élément de titre décrit brièvement le sujet de la section qu'il introduit". En clair l'exemple que tu donnes :

<h1>I Complexes</h1>
<h2>a) Module de z</h2>
<h2>b) Argument de z</h2>

<h1>II Trigonométrie</h1>
<h2>a) Loi des sinus d'Abbes</h2>
<h2>b) Cercle de rayon 1</h2>
<h2>c) Loi des tangentes</h2>

correspond en fait à la table des matières et ne devrait donc contenir aucun titre. C'est le contenu "réel" qui lui devra contenir ces titres et cette hiérarchie. Une astuce pour s'en souvenir : si tu as 2 titres qui se suivent c'est que tu as une erreur.
* comme tu le vois dans l'exemple précédent le choix d'un niveau pour un titre n'a rien à voir avec une quelconque "importance" mais avec la structuration hiérarchique.

je ne comprends pas, tu te contredis, la structure hiérarchique est représenté par l'importance de h1, h2, h3... (dans le tuto) mais tu dis que ça n'a rien à voir avec une quelconque "importance" mais avec la structuration hiérarchique ??

OK alors je vais redéfinir les termes que j'utilise : pour moi ce que tu décris n'est pas l'importance mais le niveau. Car en partant d'une notion d'importance on voit souvent sur des sites des titres de section H5 ou H6 après des H2 ou des H3 parce que la section introduite "n'est pas très importante". Or il n'y a pas d'autre règle que celle que l'on choisit pour structurer son document du moment que cette structuration soit cohérente et continue.

Pour illustrer cela je te renvoie à ce post : comme tu peux voir il n'y a aucune notion d'importance mais différents choix possibles de structuration.
Modifié par Heyoan (19 Mar 2010 - 01:09)

Ok c'est bien ce que je pensais avoir compris, seulement je suis retourner voir mes sources en me rendant compte que c'était le siteduzero, il parle bien d'importance et non de hiérarchie, je doute qu'il y soit mis des conneries sur un site aussi célébre, à moins que je n'y ai vraiment rien compris.
lien

KelT a écrit :
je doute qu'il y soit mis des conneries sur un site aussi célébre

Eh bien tu te trompes . Il était justement réputé pour être très approximatif ou bien pire. Je dis "était" parce que visiblement beaucoup d'articles (tous ?) ont été remis à jour. En l'occurrence dans ce tuto l'exemple montre des titres suivis de sections. Comme je disais je ne suis pas fan du terme employé (important) et surtout il n'est pas fait mention des sections.

KelT a écrit :
je doute qu'il y soit mis des conneries sur un site aussi célébre, à moins que je n'y ai vraiment rien compris

Il y a des tas de conneries sur le Site du Zéro. Et on pourrait dire la même chose d'Alsacréations ou de toute autre ressource ou référence. Il faut juger de la qualité et de la fiabilité d'un article non pas en fonction du site, mais article par article, information par information.

Après reste à savoir si vaut mieux utiliser des termes très exactes sur un tuto pour novice aux risques que le lecteur ni comprenne rien, ou mettre des termes approximatifs pour une meilleure compréhension de lecteur..

C'est effectivement une question de point de vue... et puisque tu me demandes le mien ( ) je dirais que :
* les auteurs de tutos destinés aux novices devraient être particulièrement attentifs à ne pas être approximatifs et utiliser des termes très précis.
* je ne vois aucune raison pour que la précision (plutôt que l'approximation) complique la compréhension du lecteur.
* il ne faut pas confondre simplification et approximation.
* il ne faut pas confondre approximatif et erroné.
* pour finir c'est tout un art d'être pédagogue et cela implique notamment d'être pointu Et d'être compréhensible. A ce titre je trouve que bon nombre des tutos d'Alsa sont très réussis (je précise que je n'en ai rédigé aucun ).
Modifié par Heyoan (19 Mar 2010 - 20:03)

Tes 4 premiers points sont les mêmes...

Mais on ne peut pas simplifier une explication sans déformer la réalité. C'est pourtant simple, si l'explication compliqué et exacte pouvait se traduire par une explication facile à comprendre alors il n'y aurait jamais de complexité et alors là tout est facile.
Si tu n'es pas d'accord avec ça alors sur ce point c'est à toi de remettre en cause ton raisonnement.

Cependant je suis d'accord avec ton dernier point, la pédagogie est une qualité qui se fait rare, même chez les professeurs, c'est pourquoi il est nécessaire de simplifier un maximum les choses lorsqu'on n'a pas ce don pour se faire comprendre des autres.