Mon autre blog

Ceci n'est que mon blog de test... J'ai un autre blog, un vrai, plus attrayant et plus complet que celui-ci...

Recommander

Vendredi 28 juillet 2006
Pour ajouter une bordure, c'est bien simple, il suffit d'utiliser l'attribut border. On précise l'épaisseur, le style et la couleur.
Par exemple, border:1px solid #000; permet d'avoir une bordure de 1px d'épais, noire, et continue.
Il existe différents type de bordure :
<div style="border: 1px solid #5675A4;">Ici, la bordure est continue. </div>
Ici, la bordure est continue.

<div style="border: 1px dotted #5675A4;">Ici, la bordure est en pointillés. </div>
Ici, la bordure est en pointillés.

<div style="border: 1px dashed #5675A4;">Ici, la bordure est en tirets. </div>
Ici, la bordure est en tirets.

<div style="border: 1px groove #5675A4;">Ici, la bordure est en 3D. </div>
Ici, la bordure est en 3D.

<div style="border: 3px double #5675A4;">Ici, la bordure est double . </div>
Ici, la bordure est double .

A noter, pour la bordure double, l'épaisseur correspond au total de l'épaisseur de chaque trait plus de l'espace entre les deux traits, sachant que chaque trait a la même épaisseur, qui est égale à l'espace entre les deux traits. Donc, pour une bordure 3px, chaque trait fait 1px, et ils sont séparés par un vide d'1px. Et pour une bordure de 21px d'épais, chaque trait fait 7px d'épais, et sont espacés par 7px de vide.

Pour changer l'épaisseur, on change donc la première donnée :
<div style="border: 5px solid #5675A4;">Ici, la bordure est épaisse de 5px. </div>
Ici, la bordure est épaisse de 5px.

Par Titia - Publié dans : Aides diverses
Ecrire un commentaire - Voir les 33 commentaires - Recommander
Retour à l'accueil

Commentaires

Salut
en fait j'aurai besoin d'une aide pour que les personnes qui se rendent sur mon blog puissent rajouter eux même des photos
Commentaire n°1 posté par brian le 04/08/2006 à 19h31
Des photos ? Sur ton blog ? Dans les commentaires ? Si c'est dans les commentaires, il faut qu'ils cliquent sur le bouton "Source" et écrivent ceci : <img src="url_de_la_photo"/>
Mais c'est pas sûr qu'ils connaissent tous la manip !
Réponse de Titia le 04/08/2006 à 19h52
BravoTitia! ton blog est très instructif! il m'a permis de modifier le mien! je suis allée me balader dans tes autres sites. continue!
Commentaire n°2 posté par Calaube le 15/08/2006 à 18h46
Merci bien :)
Réponse de Titia le 15/08/2006 à 23h48


Un fil sur le forum t'es consacré ici :
 http://forum.over-blog.com/0-forum-blog-9-1815107.html

Commentaire n°3 posté par bilboworld le 18/08/2006 à 02h38
Merci :)
Réponse de Titia le 20/08/2006 à 10h42
Il est super ton deuxième blog !! Je l'avais déjà visité mais tu l'as amélioré, il me semble !! Il faudrait qu'il puisse figurer dans la liste qui existe sur le forum !
Commentaire n°4 posté par missmio le 22/08/2006 à 08h51
Oui, j'ai changé le design. Disons qu'il était quasiment comme sur l'autre blog... Et l'autre jour, j'ai eu l'inspiration, hop, je me suis lancée ^^ !
Réponse de Titia le 22/08/2006 à 20h08
merci Titia pour tolus ces petits trucs !!!! ça aide   et c'est drôlement sympa
Commentaire n°5 posté par uguetta le 29/08/2006 à 00h12
C'est bien le but :)
Je donne ainsi aux bloggeurs les noms des classes, en expliquant ce qu'elles font, et les manip à faire pour changer la couleur du texte, mettre une bordure, un fond, etc... En reliant les deux, ils arrivent généralement à se débrouiller tout seul ;)
Réponse de Titia le 31/08/2006 à 22h18
Merci beaucoup Titia, ton blog m'a beaucoup aidé pour créer le mien. :-)
En revanche, j'ai pas tout à fait le même rendu sur Internet Explorer et FireFox. Sous Firefox, tout est comme je le désir. Sous IE, il y a quelques bugs et selon la configuration de l'écran ça empire (surtout si c'est un 16/9). :-(

Conclusion IE, c'est caca. ^^
Commentaire n°6 posté par Chelmi le 02/09/2006 à 10h51
Ah ça, il y a un certain nombre de différences entre ie et ff. Il me semble que tu trouveras des explications chez Francisek (en lien sur mon blog)
Réponse de Titia le 09/09/2006 à 17h05
ben voila,j'ai un blog et les liens hyper texte c'est pas mon fort,pourrais tu m'aider
Commentaire n°7 posté par juju le 06/09/2006 à 15h24
Tu veux savoir quoi au juste ? Comment les faire ? Créer un lien
Réponse de Titia le 09/09/2006 à 17h07

           Merci encore pour ton aide si précieuse !!


Je trouve cela très passionnant , mais je vais m'arrêter là pour aujourd'hui ... je repasserai demain. Il faut aussi que je réfléchisse à certaines choses  ... pour améliorer encore ce bout de blog en construcion.


Heureusement que tes gens sympas comme toi sont là pour aider les débutants sur OB !!


Bonne soirée     


Pascaly                         

Commentaire n°8 posté par pascaly le 16/09/2006 à 21h36
Il faut trouver l'idée. Ensuite, le design se fait tout seul. Pour info, pour chaque blog, j'avais les idées très précises sur ce que je voulais faire... J'ai mis quelques heures à faire chacun... sachant que ce qui m'a fait perdre du temps, c'est la création des images.
Réponse de Titia le 26/09/2006 à 19h34
bonjour Titia,
J'amerai mettre une bordure avec par ex. des petits fleurs, est possible?Ou puis-je trouver des explications ?
Je te remerci beaucoup,
lory
Commentaire n°9 posté par lory le 19/09/2006 à 09h12
Où ça ? Sur tes modules, sur tes articles ? Le principe n'est pas le même :)
Réponse de Titia le 26/09/2006 à 19h35

Titia, ton blog ne s'ouvre pas à 18H15 ??
Tu as mis un spam anti Dan hi hi hi hi hi hi



Amitiés
Dan

Commentaire n°10 posté par dan le 21/09/2006 à 18h11
Ah ? Tu n'accédais pas à mon blog ?
Réponse de Titia le 26/09/2006 à 19h35

Bonjour,


Très bien ton blog d'aide.... mais moi ce qui m'intéresse aujourd'hui.... c'est de savoir où tu as trouvé ton fond d'article.... la feuille de classeur. Je ne souhaîte pas du tout copier mais je recherche un fond pour illustrer les menus du restaurant alors peut être   as-tu des tuyaux sur des sites...

Commentaire n°11 posté par MDO le 03/10/2006 à 08h57
Ah ! Alors en fait, j'ai fait une recherche sur google de "Feuille carreaux A4" ou quelque chose de ce genre. Et j'ai fini par trouver ça. J'ai d'ailleurs hésité à scanner directement une feuille car j'ai eu du mal à trouver.
Donc essaie Google... ou tu peux scanner des papiers qui te plaisent...
Réponse de Titia le 04/10/2006 à 19h11
Bon bien évidement il ya que tu bon ici ,,,,, " je sais pourquoi " aller  assez parler je perd du temps pour " fouiller " se superbe blog......

 bizzzzz à toi
Commentaire n°12 posté par Jean Michel le 04/10/2006 à 22h38
Fouille, fouille.
Oh... et reviens quand la V2 d'OB sera sortie : je compte le mettre à jour à ce moment-là :)
Réponse de Titia le 07/10/2006 à 12h26

Bonjour,


Félicitations pour votre site qui est vraiment bien conçu! J'ai créé un annuaire de blogs et si vous souhaitez vous y inscrire voici l'adresse: http://netblog.site.cx  !


Bonne continuation

Commentaire n°13 posté par xav le 21/10/2006 à 23h34
Réponse de Titia le 22/10/2006 à 10h55

Bonsoir,


j'été venue chercher une astuce afin de mettre un peu d'originalité dans mon blog. il me semblait l'avoir vu chez toi, tu expliquais étape par étape comment procéder. mais je ne vois plus ce que je cherche.


je voudrais mettre une image d'un crayon pour les modules, est-ce que tu vois ce dont je parle.... je reviendrais quand j'aurais trouvé le bon crayon joli et tout ...


bonne soirée

Commentaire n°14 posté par Pascaly le 28/10/2006 à 19h26
Pour les puces en face des éléments de la liste ? Comme ici les petites fleurs sur mon autre blog ?
Si c'est ça, ça fonctionne comme ça :
.box-content li  { list-style:url(url_de_ton_crayon); color:#cc3366; margin:5px; padding:0px;}
Si ça n'est pas de ça dont tu parles, essaie de préciser un peu :)
Réponse de Titia le 28/10/2006 à 21h02

alors, comment puis-je te l'expliquer plus clairement ?? voici ce que j'ai imaginé : est-ce plus claire ?? Bien-sûr le texte sera dans ou plutôt sur le "manche" du crayon . As-tu compris ma requète ?


Hébergement gratuit avec Mezimages.com
Commentaire n°15 posté par Pascaly le 29/10/2006 à 00h05
Alors essaie un truc comme ça :
.box h2          { background-image:url(url_de_ton_crayon); background-repeat:no-repeat; background-position:top center;}
Réponse de Titia le 29/10/2006 à 09h30

bon, c\\\'est parti , je vais tenter !!!


 


merci beaucoup, que ferais-je sans vous ??

Commentaire n°16 posté par Pascaly le 29/10/2006 à 10h35
Tu irais sur le forum à la pêche aux informations ;)
Réponse de Titia le 29/10/2006 à 10h37

Mille merci Titia, grâce à tes conseils j'ai réussi !!


As-tu été voir ce que cela donnait ? Dis-moi - sincèrement - ce que tu en penses .


 

Commentaire n°17 posté par Pascaly le 29/10/2006 à 13h23
Je trouve ça sympa mais ça ne colle pas trop avec la bordure générale, du coup...
Réponse de Titia le 29/10/2006 à 19h02

et que me suggères-tu ?? un autre type de bordure ?? Je suis preneuse d'idées ...


Merci encore

Commentaire n°18 posté par Pascaly le 29/10/2006 à 22h16
J'avoue ne pas avoir trop d'idée...
Essaie ça, ça sera toujours plus adapté que le bleu :
.box             { width:90%; margin-bottom:10px; }
.box h2          { background-image:url(http://www.mezimages.com/image/pascaly/crayon%20hor%206.gif); background-repeat:no-repeat; background-position:top center; text-align:center; height:25px;}
.box-top         { }
.box-left        { border-left:2px solid #EDA;}
.box-right       { border-right:2px solid #EC4;}
.box-bottom      { border-bottom:2px solid #E90;}
.box-topLeft     { }
.box-topRight    { }
.box-bottomLeft  { }
.box-bottomRight { padding:3px; }
.box-content     { overflow:auto; padding:0px 0px 0px 0px; color: #5675A4; }
.box-content p   { margin:5px 0px 5px 15px; padding:0px; }
.box-content ul  { margin:5px 0px 5px 15px; padding:0px; }
.box-content li  { list-style:square; color:##ff6633; margin:5px; padding:0px; }
Réponse de Titia le 30/10/2006 à 19h33

Merci,


j\\\'ai changé comme tu me l\\\'as proposé, j\\\'ai juste changé la couleur de la bordure de droite, et supprimé complétement celle de gauche


Je trouve cela très bien. Merci encore !!


bonne soirée


Pascaly

Commentaire n°19 posté par Pascaly le 30/10/2006 à 22h33
Oui j'ai vu. Moi, je te donnais une idée. Je trouvais que le bleu n'était pas assorti. Mais là, c'est beaucoup plus sympa :)
Réponse de Titia le 31/10/2006 à 20h07

j'ai changé mes dessins ... trop ou pas assez ... ceux que j'ai mis en page d'accueil me conviennent mieux .


Sinon, j'ai eu le grand coup de main de Christine qui m'a fait un crayon-curseur ( reproduction mini de mes crayons de modules)


 


Grand merci encore

Commentaire n°20 posté par Pascaly le 02/11/2006 à 00h20
Ah ! C'est choupinou !
Tu vois, c'est bête, mais maintenant, tes petites puces clignotantes à gauche, je trouve que ça attire trop l'oeil et du coup, on ne regarde pas les jolies petites images de l'accueil :)
Mais ça n'est que mon avis.
Réponse de Titia le 02/11/2006 à 20h01

tu as raison, ça fait trop "brillant" avec le reste, je vais tacher de trouver un tout p'tit nounours par exemple.


Merci pour tes conseils.

Commentaire n°21 posté par Pascaly le 02/11/2006 à 23h01
Tout le reste paraît tout calme, en fait, alors le seul truc qui clignote, forcément, ça attire le regard !
Réponse de Titia le 04/11/2006 à 09h06
Et maintenant, t'en penses quoi ??
Commentaire n°22 posté par Pascaly le 02/11/2006 à 23h41
C'est trooop mignon !
J'adore !
Réponse de Titia le 04/11/2006 à 09h07
bonjour !
j'ai une petite question :$

Je voudrais mettre une feuille derniere mes article (un peu comme toi, mais une feuille toute blanche a sprirales ^^ parce que mon blog est un blog de dessin ^^)
tu pourrait m'aider tu pense ?

répond sur mon blog ;] ou envoi moi un e mail =)
Commentaire n°23 posté par Manon n_n le 04/11/2006 à 23h43
En lisant cet article,  Classes liées aux articles et commentaires tu devrais pouvoir trouver :)
Réponse de Titia le 05/11/2006 à 09h09

C\\\'est trooop mignon !
J\\\'adore !


Viens me l\\\'écrire sur mon blog, j\\\'en serais flattée !


biz


Pascaly

Commentaire n°24 posté par Pascaly le 07/11/2006 à 21h49
Allez zou ;)
Réponse de Titia le 07/11/2006 à 21h51

c cool toutes ces petites aides, ça permet de rendre nos blogs plus perso, je vais me lancer la dedans des que jai du temps


merci

Commentaire n°25 posté par virginie le 07/12/2006 à 10h13
Mais de rien ! C'est toujours un plaisir ! Si tu as des questions, n'hésite pas :)
Réponse de Titia le 08/12/2006 à 20h23

Bonsoir,




J'ai un petit souci sur mon blog depuis hier soir. En effet, sur celui-ci à gauche de mes articles, j'ai une colonne où sont répertoriés, "Présentation", "Auteurs Célèbres", etc... et à côté il y a un curseur vertical et une colonne verte qui s'affiche.




Comment supprimer ce curseur vertical et horizontal. Il y a un autre bloggeur qui a le même souci que moi et ce depuis hier soir. C'est curieux non !




Si tu as la solution, peux-tu me l'expliquer simplement afin que je puisse corriger cela.




Merci beaucoup et bonnes fêtes de fin d'année




Commentaire n°26 posté par Monicalisa le 23/12/2006 à 18h58
Désolée de n'arriver que maintenant... j'étais en vacances :)
Euh... je ne vois aucune colonne verte. Je suppose donc que tu as réussi à corriger le problème :)
Bonnes fêtes !
Réponse de Titia le 29/12/2006 à 11h51

Bonjour Titia,


Je viens de découvrir ton blog et ton site.


 Très belle présentation, très classe et harmonieuse. Je préfère la présentation en rose du blog... Je suis très fleur bleue...


aaaah enfin une aide à la composition d\\\'un blog... Merci infiniment, moi je débute pour l\\\'instant avec le HTML. Mais tout ce qui concerne la mise en page m\\\'intéresse vivement.


Tu peux voir mon site, qui est encore en chantier http://bourdelle.genevieve.free.fr, bon d\\\'accord il est assez basique, car je débute. C\\\'est mon premier essai de construction d\\\'un site. J\\\'ai toujours des problème d\\\'affichage de certaine images, bien que je comprenne les règles qui les régissent. Je travaille dessus pour régler le dit problème... Les images proviennent pourtant du même dossier (donc la balise est la même), mais certaines refusent encore de s\\\'afficher.   Pour l\\\'instant je sèche là desssus...


Voilà, bon ben je te souhaite de bonnes vacances.


Geneviève

Commentaire n°27 posté par GeneviÚve le 25/12/2006 à 19h02
J'ai zieuté rapidement ton site... et je crois que le problème vient de tes images. N'y aurait-il pas eu un problème lors du transfert, ou lors de la compression ? Le bas des images me semble un peu comme "raboté", parfois... Il faudrait que tu vérifies !
Sinon, si jamais tu as des questions particulières, n'hésite pas !
J'espère agrémenter mon blog de nouveaux articles d'aide d'ici peu :)
Repasse quand tu voudras... et bonnes fêtes de fin d'année !
Réponse de Titia le 29/12/2006 à 11h54
merci pour ton aide et ton lien pour le poids des pages...faut que j'apprenne à jouer avec la qualité et le poids...
Commentaire n°28 posté par patboy le 23/01/2007 à 12h05
Il faut penser que tout le monde n'a pas du haut débit ;)
Réponse de Titia le 28/01/2007 à 12h53
merci pour ton aide sur le forum...
pierre
Commentaire n°29 posté par pierre le 02/02/2007 à 22h05
Ben, de rien ;)
Quand je peux aider, j'aide :)
Réponse de Titia le 02/02/2007 à 22h13
Bonjour Titia !
Tout d'abord bravo pour ton blog !
Ce serait sympa si quelqu'un pouvait me dire à peu près quoi modifier dans ma feuille CSS pour supprimer ou modifier les pointillés laids entre chaque article sur mon blog http://micgrif.over-blog.fr
Merci d'avance
Commentaire n°30 posté par Mimi25 le 11/06/2007 à 14h04
Tu ajoutes ça quelque part dans ton css :
.afterArticle {border:none;}

Et voilà !
Réponse de Titia le 17/06/2007 à 09h11
comment est ce que l'on change la hauteur des bordure ?? merci d'avance
Commentaire n°31 posté par M�lina le 05/10/2007 à 17h03
La "'hauteur" des bordures ? C'est-à-dire ? L'épaisseur ?
Comme ça : border: solid 5px #F00;
Réponse de Titia le 05/10/2007 à 20h28

Chère Titia,

Merci pour cette mine d'informations qu'est ton blog! Comme tu as l'air de bien t'y connaître, je me tourne vers toi, car je suis en train de convertir le CSS de mon blog en version 2, et je rencontre un souci lié aux bordures des modules. J'ai tout essayé, rien n'y fait: comment faire pour ne pas faire apparaître de bordures autour des modules?

Un autre de mes soucis est sans doute également lié à cela: mon entête et mon bas de page affichent une couleur grise, alors que normalement il n'y a pas de "cassure" entre ceux-ci et le reste du blog (ils ont le même fond d'écran que le reste du blog). Aurais-tu une idée sur comment je pourrais remédier à cela?

Je te remercie par avance pour ton aide précieuse et te souhaite une agréable journée :)

Morrigann ;)

Commentaire n°32 posté par Morrigann le 25/11/2008 à 16h57

Bon, apparemment, pour tes modules, il semblerait que tu ais trouvé la solution à ton problème puisqu'ils n'ont plus de bordures.

De même que pour tes soucis d'entête et de pied de page... je crois que j'arrive trop tard. Désolée :)

Réponse de Titia le 26/11/2008 à 12h24

Bonjour Titia,

Finalement, j'ai trouvé la solution, en effet, mais pas sans m'être arraché quelques cheveux ;)

Merci en tout cas d'avoir pris le temps de me lire ainsi que pour ta réponse :)

Bonne journée!

Commentaire n°33 posté par Morrigann le 26/11/2008 à 14h32

Hé hé ! Ouais, quand on a des questions, faut pas être à la seconde. Faut patienter un petit peu pour avoir la réponse. Donc soit on patiente et on se ronge les ongles... Soit on cherche et on s'arrache les cheveux. Dans l'un ou l'autre cas, on n'en ressort pas indemne :p

De rien pour la réponse. Je réponds en général à tous les commentaires :)

Réponse de Titia le 26/11/2008 à 18h40
Créer un blog sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus