[Résolu] Faire des cadres avec que du css

Bonjour à tous,

Je voulais personnaliser ma signature pour mes mails et j'avais essayer avec un tableau.
Non concluant !

De ce fait, je voulais le faire en css seulement, mais je patauge sérieusement.

Voulez-vous me dire comment faire ?

<style type="text/css">
/*
DIV#generale{
border-style:solid;
border-width:5px;
border-color:red;
background-color:cyan;
width:200px;
}
*/
DIV.nom{
padding-left:20px;FONT-SIZE: 16px; FONT-FAMILY: verdana; font-weight:bold;}
DIV.tel{
padding-left:20px;FONT-SIZE: 14px; FONT-FAMILY: verdana; font-weight:normal;}
</style>

<!--<div id="general">-->

	<div class="nom">
		Jean-Luc BOUCHEZ
	</div>
	<div class="tel">
		Bureau : +33 (0)9.52.00.00.00<br>
		Mobile : +33 (0)6.52.00.00.00<br>
		Domicile : +33 (0)3.28.00.00.00
	</div>
	
<!--</div>-->

Voyez-vous pourquoi au niveau de tel y a rien qui va ?

Merci d'avance.

Cordialement.
Masterfree
Modifié par masterfree (07 Apr 2013 - 06:32)

Bonsoir,

Et pourquoi est-ce dont faire les guillemets en fin de déclaration ?

.nom{
  padding-left:20px;
  font-size: 16px; 
  font-family: verdana; 
  font-weight:bold;

}
.tel{
  padding-left:20px;
  font-size: 14px; 
  font-family: verdana; 
  font-weight:normal;
}

J'ai toujours fait ça et dans tous les exemples de style que j'aie vus, il y en a !

Mais pourquoi cette remarque ?

Il s'agit de ça

Ces parenthèses délimitent en fait toutes les fonctions du style !

Vous voulez mettre quoi à la place ?

Votre question est très bizarre pour moi !

Dans toutes les formes de style basique, il y a des parenthèses, comme le montrent les exemples du tutoriel de ce site.
http://www.alsacreations.com/tuto/lire/1524-le-modele-tabulaire-en-css.html
Modifié par masterfree (06 Apr 2013 - 20:30)

Un guillemet = "
Une parenthèse = )
Une accolade = }

Il ne doit pas y avoir de guillemet à la fin de votre déclaration de styles.
Cette dernière se termine par un point virgule et une accolade.
ie :

...;}

et non :

...;"}

Merci du renseignement, mais j'avais vu ça et rien ne va comme il faut.

J'aurais dû le modifier ici mais ça m'est sorti de la tête.

Quoiqu'il en soit, le style ".nom" prend bien sa forme en html, mais ".tel" prend exactement la même forme.

Mais ce n'est pas trop grave, j'y arriverai !

Il serait bien que je mette au dessus et au dessous des textes, un trait bleu de faible épaisseur.
Et une marge colorée sur le côté gauche prenant toute la hauteur des traits + les testes, mais là, j'y arrive pas du tout.

Bon, je verrais ça demain parce qu'il commence à se faire tard.

Je recontacterai le forum quand j'aurai concocté le style peermettant de faire ces traits... ci ça marche !

Bonne soirée.

PS : c'est vrai que je dois appeler "un chat" uin chat. Je fais allusion aux (, {, et [, j'ai pas penser à dire accolade pour {}
Modifié par masterfree (06 Apr 2013 - 21:24)

Si j'ai bien compris vous voulez donner un style à vos lignes de textes
Il faut revoir le code HTML en incluant des balises P.

Ensuite vous pouvez créer des marges à ces balises comme vous le souhaitez.

<div class="tel">
		<p>Bureau : +33 (0)9.52.00.00.00</p>
		<p>Mobile : +33 (0)6.52.00.00.00</p>
		<p>Domicile : +33 (0)3.28.00.00.00</p>
	</div>

Bonjour à tous,

Oui rodolpheb, j'ai déjà fait ça avec des balises "<p>", mais je n'ai pas vu de différence avec des "<div>", donc, je me suis contenté de ces derniers.
Le prb que j'aie c'est que j'arrive à faire les traits H et B, mais pas trouvé l'astuce pour que le trait haut se décale du top sans que le trait rouge ne bouge !

Le dessin affiché est une image de la signature que j'intégrais dans mes mails.
Mais c'est ce que je voudrais faire en html et css !
http://qi98.free.fr/temp/Essai_Tel_signature.jpg

Vous avez une idée pour éviter ce décalage ?

Voilà ce que j'ai essayé de faire :

<style type="text/css">

.traitbleuhaut{
background-color:darkblue;
width:250px; height:2px;
margin-top:10px;
margin-bottom:10px;
margin-left:15px;
}

.traitbleubas{
background-color:darkblue;
width:250px; height:2px;
margin-top:10px;
margin-left:15px;
}

.traitrouge{
float:left; 
background-color:red;
width:10px; height:110px;
}

.nom{
padding-left:20px;FONT-SIZE: 16px; FONT-FAMILY: verdana; font-weight:bold;}

.tel{
padding-left:20px;FONT-SIZE: 14px; FONT-FAMILY: verdana; font-weight:normal;}

</style>

<div class="traitrouge">&nbsp;</div>
<div class="traitbleuhaut">&nbsp;</div>
	<div class="nom">
		Mon nom
	</div>
	<div class="tel">
		Bureau : +33 (0)9.00.00.00.96<br>
		Mobile : +33 (0)6.00.00.17.00<br>
		Domicile : +33 (0)3.28.00.00.75
	</div>
<div class="traitbleubas">&nbsp;</div>

Modifié par masterfree (07 Apr 2013 - 06:41)

Ca y est, j'ai trouvé pour que ça fonctionne, mais je ne sais pas si c'est correct.

.traitrouge{
float:left; 
background-color:red;
width:10px; height:120px;
[b][#blue]margin-top:[i]-10px[/i];[/#]
[/b]}

Modifié par masterfree (07 Apr 2013 - 06:51)

Pour votre trait rouge vous pouvez utiliser le pseudo élément :before.

Concernant l'utilisation de la balise P elle est fortement conseillée (prévue d'ailleurs pour recevoir du texte) car elle confère une souplesse que vous n'avez pas actuellement (utilisation de BR par exemple).
Modifié par rodolpheb (07 Apr 2013 - 12:40)

Valide ou pas, le résultat escompté est bien là !

J'ai regardé des css au hasard dans divers sites, et dans certains cas, il y a bien des valeurs négatives au niveau des "margin:"
Maintenant pour l'instruction "before", je ne l'ai jamais utilisé, donc, ça va être assez difficile pour moi de bien la placer !

Pour les marques de paragraphe "<p>", j'avais lu il y a quelques temps, qu'il était préférable d'utiliser des "<div>" à la place pour plus de compatibilité avec W3C je crois.
Si bien à l'affichage, je ne vois pas de différences entre :
<p>Testing</p> et <div>Testing</div>.

De plus, vous parlez des "<BR", mais ça va tout aussi bien avec l'un ou l'autre !

Concernant le margin négatif il n'y a aucun problème.

Par contre cette remarque est intrigante:

masterfree a écrit :
Pour les marques de paragraphe "<p>", j'avais lu il y a quelques temps, qu'il était préférable d'utiliser des "<div>" à la place pour plus de compatibilité avec W3C je crois.

J'aimerais bien voir où vous avez pu lire une ineptie pareille....

masterfree a écrit :
Si bien à l'affichage, je ne vois pas de différences entre :
<p>Testing</p> et <div>Testing</div>.

Oui sans aucun style il n'y a pas de rendu différent mais La balise P comporte l'avantage de générer des sauts de ligne ainsi que de recevoir des attributs d'alignement par rapport aux marges.
D'autant plus que créer une div pour placer un titre de paragraphe est totalement inutile : Mon Nom devrait être placé dans une balise Hn.

masterfree a écrit :
De plus, vous parlez des "<BR", mais ça va tout aussi bien avec l'un ou l'autre !

L'utilisation des balises BR n'est pas une faute en soi mais une mauvaise pratique quand elles sont utilisées comme vous le faites. D'ailleurs elles sont assez peu employées à l'usage et je ne m'en sers plus.
Modifié par rodolpheb (07 Apr 2013 - 17:22)

Ben, je constate l'affichage, c'est tout.
Maintenant, c'est peut-être un tort, toujours est-il que ce sont des modérateurs qui m'ont dit ça.
Je voudrais bien vous donner l'adresse exacte mais je l'ai plus en tête.
Ce dont je suis certain, c'était sur un forum (developper.com ou SdZ pour ne citer que ceux-là) ou j'allais souvent, plus developper.com quand même !

a écrit :
J'aimerais bien voir où vous avez pu lire une ineptie pareille....

A mon avis, que ce soit l'un ou l'autre, si on applique le même style, le résultat sera le même.
Comme je l'ai dit, d'après les forums, il est préférable d'utiliser des DIV pour que ça soit plus compatible avec W3C.
Je me souviens, il y a quelques années, j'ai passé mon site sous W3C, et il y avait beaucoup d'erreur.
C'est en questionnant les forum que j'ai eu cette astuce, et il est vrai qu'en procédant de la sorte, les erreurs avaient tendance à diminuer.

a écrit :
mais La balise P comporte l'avantage de générer des sauts de ligne ainsi que de recevoir des attributs d'alignement par rapport aux marges.

En fait, je me demande bien à quoi sert W3C parce que mêmùe avec des erreurs, le site fonctionne bien !

Pour ne pas te laisser dans l'ignorance et si d'autres débutants consultent ce sujet..

Quand tu fais construire une maison, tu ne te contentes pas que de l'aspect ? Tu vérifie s'il n'y a pas de fuite d'eau, etc. là c'est la même chose, on ne peut pas se contenter que de l'affichage que tu obtiens chez toi. Tu comprendra par la suite.

Les balise <p> et <div> font la même chose, mais pas pour la même chose. La programmation demande de la rigueur, c'est la seule chose de difficile.
Il est impossible qu'un modérateur du SdZ ou pire de developpez ai pu te dire que l'un était mieux que l'autre. On les utilise pour un usage différent. Le <p> est utilisé pour manipuler des paragraphes (donc du texte en général), les <div> sont des blocs pour séparer des élements, on peut très bien mettre un <p> dans un <div> mais pas l'inverse !

la W3C est extrement important, mais si on tient comtpe que de son affichage, il perd de son interet. W3C est un validateur qui fait des tests sur ton codep our savoir s'il est bien programmer. Quand ton code est valide W3C, celà veut dire qe l'affichage sera bon sur ton écran, mais aussi sur pas mal d'autres car le HTML est normalisé (on oublie IE bien entendu). Mais la norme n'est pasl à seulement pour une question d'affichage, il y a aussi unen otion d'accessibilité; Les per+sonnes mal-voyantes pourront consulter facilement otn site s'il passe le W3C.


Pour ton cas, les erreurs obtenues avec W3C étaient sûrement dû que tu mettais des éléments non autorisé dans des <p> mais autorisé dans des <div>, donc en changeant tes <p> en <div>, les erreurs disparaissent.. !


Dans l'optique de t'éclairer
JC

Bonjour JC,

Il est vrai de dire que tes explications sont claires, limpides et précises.

Je ne voyais pas cela sous cet argument (je parle du W3C).
Le prb, quand je vérifie le site, c'est que le résultat est en anglais... et je bute sur ça.
Il va sans dire que je vois la source où ce situe l'erreur, mais ne comprenant pas tout (sauf le mot à mot... et encore), j'ai du mal à corriger pour avoir la bonne syntaxe.

Un exemple, j'ai un menu déroulant en css et bien W2C m'informe pas mal d'erreurs. Au passage, même en essayant en ligne des menus css tout prêts, W3C m'indique des erreurs, surtout avec les UL.
Pourtant j'avais vérifié, mais l'ordre était correct. Alors maintenant, à savoir le pourquoi du comment, là, ça se complique un peu.

De plus, W3C me signale que le langage ne correspond pas, enfin je crois :

Warning Line 16, Column 29: Using windows-1252 instead of the declared encoding iso-8859-1.

<meta charset="iso-8859-1" />

&#9993;
Warning Legacy encoding windows-1252 used. Documents should use UTF-8.

Pourtant, 'il n'y que le fichier "index.php" qui définit ça.
Maintenant, il est possible que c'est un autre fichier qui me sert de popup, mais j'ai pas tout vérifié... pas trop le temps !

Comme tu dis IE et spécial, c'est vrai, alors pour avoir une compatibilité entre tous les navigateurs, là, y a du boulot.

Mais tes explications me serviront dans un avenir proche.

Encore merci JC.

Salut,

Alors déjà, ce n'est pas une erreur mais un avertissement. Donc ton site est tout de même valide, mais il y a des choses suspectes à vérifier.

Dans ton cas, tu utilises l'encodage iso-8859-1 mais tu utilises des encodes UTF-8 (&#9993;) apparament. Après je maîtrise pas l'encode, donc si quelqu'un veut prendre ma place pour expliquer l'encodage...

Bonne fin d’après-midi
JC

Bonjour JC,

C'est bien beau de m'avoir répondu et je t'en remercie, mais si quelqu'un doit m'aiguiller sur l'encodage, c'est dans un autre forum que ça se passe !

Moi non plus, je ne suis pas fortiche en encodage, en plus, les "explications" sont en anglais, et là aussi, j'ai beaucoup de lacunes.
Malgré tout, on avait compris grosso-modo le message de W3C, et j'ai encore vérifié les pages et les popups, tout est en iso, alors pourquoi ce message ??? Mystère et boule de gomme !
Ca vient peut-être d'autre chose, mais je vais voir ça dans le forum adéquate.

Bonne jounée.
JL

Johnny a écrit :
Salut,

Alors déjà, ce n'est pas une erreur mais un avertissement. Donc ton site est tout de même valide, mais il y a des choses suspectes à vérifier.

Dans ton cas, tu utilises l'encodage iso-8859-1 mais tu utilises des encodes UTF-8 (&amp;#9993;) apparament. Après je maîtrise pas l'encode, donc si quelqu'un veut prendre ma place pour expliquer l'encodage...