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.
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
Mais c'est pas sûr qu'ils connaissent tous la manip !
Un fil sur le forum t'es consacré ici :
http://forum.over-blog.com/0-forum-blog-9-1815107.html
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 ;)
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. ^^
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
J'amerai mettre une bordure avec par ex. des petits fleurs, est possible?Ou puis-je trouver des explications ?
Je te remerci beaucoup,
lory
Titia, ton blog ne s'ouvre pas à 18H15 ??
Tu as mis un spam anti Dan hi hi hi hi hi hi
Amitiés
Dan
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...
Donc essaie Google... ou tu peux scanner des papiers qui te plaisent...
bizzzzz à toi
Oh... et reviens quand la V2 d'OB sera sortie : je compte le mettre à jour à ce moment-là :)
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
http://grumpitia.over-blog.com/article-4166450-6.html#anchorComment
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
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 :)
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 ?
.box h2 { background-image:url(url_de_ton_crayon); background-repeat:no-repeat; background-position:top center;}
bon, c\\\'est parti , je vais tenter !!!
merci beaucoup, que ferais-je sans vous ??
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 .
et que me suggères-tu ?? un autre type de bordure ?? Je suis preneuse d'idées ...
Merci encore
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; }
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
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
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.
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.
J'adore !
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 =)
C\\\'est trooop mignon !
J\\\'adore !
Viens me l\\\'écrire sur mon blog, j\\\'en serais flattée !
biz
Pascaly
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
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
Euh... je ne vois aucune colonne verte. Je suppose donc que tu as réussi à corriger le problème :)
Bonnes fêtes !
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
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 !
pierre
Quand je peux aider, j'aide :)
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
.afterArticle {border:none;}
Et voilà !
Comme ça : border: solid 5px #F00;
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 ;)
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 :)
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!
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 :)