Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
Publié dans : Design et Mise en page - OB
Ce gif signifie que l'article décrit une astuce contenant du javascript, form ou iframe et
que celle-ci n'est donc réalisable que sur les blogs en Privilège et Premium
DESIGN
Ces designs sont conçus pour des blogs Over-Blog en V2.
Ces designs sont conçus pour des blogs Over-Blog en V2.
IDEES DE MISE EN PAGE
Commentaires
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Sommaires
Sommaires Pour les Blogs OverBlog
- Premiers pas en V2
- Gestion quotidienne
- Ecritures dans les modules
- Ecritures dans les articles et pages
- Ecritures dans les fenêtres et albums photos
- Modifier les Fonds
- Placer des images
- Ajouter, déplacer ou masquer
- Design complet et Idées de Mise en page
- Aspect des Ascenseurs, Puces et Curseurs
- Cadres,lignes et bordures
- Effets d'Ecriture et de Texte
- Effets d'images et Diaporamas
- Créer et transformer des Images
- Placer des documents
- Musique, son, vidéo et télé
- Cadres, tableaux, lignes
- Liens, listes et menus
- Interactivité et gadgets
- Indicateurs,compteurs et Protection
- référencement, communautés et flux RSS
Dernières Astuces
- Ouvrir un texte au clic de la souris
- Fonction Lire la suite
- Espacer les lettres des mots dans un article
- Espacer les lettres de tous les mots de votre blog
- Souligner un mot ou une phrase en pointillé
- Changer plusieurs fois la couleur des liens au survol de la souris - Privilège
- Créer des infobulles avec Prototip - Privilège
- Créer un pop up avec message
- Changer un texte au passage de la souris
- Créer des textes animés en flash
Commentaires
-
10/07/2009 18:39:13Créer votre signature manuscriteCerise violette
-
09/07/2009 22:19:44Date au-dessus du titre de l'articlesaygomodo
-
09/07/2009 21:31:47Espacer les lettres des mots dans un articlechaton
-
09/07/2009 15:38:10Changer plusieurs fois la couleur des liens au survol de la souris - PrivilègeMystik-Angel
-
09/07/2009 15:37:15Espacer les lettres des mots dans un articleMystik-Angel
Publicité
Coin Films
Coin Jeux Vidéos
Coin Loisirs Exterieurs
| Articles les plus populaires | L'Univers des Ficelles |
|
|
venus
Le plus simple est de créer un tableau : 1 ligne + 2 colonnes = 2 cellules côte à côte. Et dans chaque cellule, tu vas mettre un bouton. Tu mets ensuite les bordures du tableau à 0, il sera ainsi transparent.
#ln_1 #cl_1_2 {width:25% } /*right*/
#ln_1 #cl_1_1 {width:46%; } /* colonne principale */
#ln_1 #cl_1_0 {width:25%; } /*left*/
Joue avec le % des largeurs (width), le total doit être égal à 96 %
Si tu n'as pas ces lignes dans ton CSS, tu les rajoutes
Tu as laissé un commentaire sur l'un de mes articles, je trouve ta remarque judicieuse mais j'aimerai en savoir un peu plus ...
commentaire n° : 1 posté par : Annak (site web) le: 28/10/2007 07:45:27 / sur : http://lo-photo.over-blog.fr/article-13186948-6.html#anchorComment
Rce : Je vais effectivement, élargir un peu la #cl_1_2, mais j'aimerai bien la partie "global" soit centré pour mettre des images en marge de part et d'autre.
Connais tu le code pour dire à "Global" de se centrer dans la page ?
Encore merci pour tes incantation... que ça ne CSS jamais !
:Lo
stp Annack
j'ai voulu essayer de mettre le design rose , pour voir comment il rendait , et il n'apparait pas , j'ai vidé le cache ,
par contre quand je fais prévisualiser , le design rose s'affiche
qu'est ce que je n'ai pas fait correctement
merci à toi
Je viens de tester votre désign "Cahier Bleu" pretty pink, malheureusement on ne voit pas le désign du cahier (les spires) il y a juste la couleur qui à changée.
Quelle erreur ai-je commise? j'ai essayé de suivre vos instructions mais je présume que je me suis trompé quelque part!
Merci de me dire comment corriger mon erreur si vous en avez le loisir.
Cordialement et encore merci pour tout l'aide que vous apportez aux débutants.
Robert
J'ai réussi à copier votre désign cahier et je tiens à vous remercier chaleureusement de mettre à dispo de tes visiteurs autant de services pour débutants. Je vous mets naturellement un lien vers votre blog et je vous souhaîte un bon week-End.
Merci encore, Robert
Effectivement j'ai changé le désign mais il est toujours de ton blog et je t'en remercie beaucoup, juste un petit souci avec celui que j'ai choisi la colonne des articles n'est pas assez large par rapport aux modules
ce qui fait qu'une partie de mes textes n'est pas lisible. Ne connais tu pas une astuce pour diminuer la marge de gauche du cahier ou bien les modules?
Bien à toi ,bonne soirée et bonne semaine.
la largeur des colonnes est ici dans le CSS
#cl_1_0{width:250px;}
#cl_1_1 {margin:0px; padding:5px; float:left;width:510px;}
Il suffit que tu modifies le nombre de px : plus ou moins
Cordialement, Robert
je refait et refait et toujour le soucis descommentaire je trouve pas mon erreur donc je te donne ce que j'ai fait comme tu sais y faire avec les css peut etre u errivera a lui faire entendre raison toi lol!
body {
margin:0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:x-small;
background: #000000;
color: #F0FFF0;
}
#top h1 {
color: #F0FFF0;
font-size: 20px;
}
/*titre des pages*/
/*-- Titre des modules --*/
.article h1, .article h2 {
color: #F0FFF0;
font-size: 15px;
}
h3 {
color: #F0FFF0;
font-size: 12px;
}
/* liens */
a {
color: #7CFC00;
text-decoration: underline;
font-size:110%;
}
a:hover {
color: #9E9E9E;
text-decoration: none;
}
legend {
color:#7CFC00;
padding-left:5px;
padding-right:5px;
}
/* listes */
li {
list-style-type:none;
}
/* image */
img { border:0px; }
/* elements de formulaire */
input {
border-left:2px solid #000000;
border-right:2px solid #000000;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
font-size:100%;
background:#000000;
color:#000000;
}
/* Boutons incription a la newsletter, rechercher */
#email, #recherche {
border-left: 2px solid #000000;
border-right: 2px solid #000000;
font-size: 100%;
background: #000000;
color: #000000;
}
/* ---------- Structure ------- */
#global{width:100%}
/* - La class main correspond a la structure global du blog
- le numero apres 'main' correspond au type de structure (1 2 ou 3 colonnes)
*/
/* Pour les stuctures avec 2 colonnes */
#main1 { text-align:left; margin:0px auto 50px auto; }
/* colonne de droite */
#main1 #rightnav {
padding:10px;
width:220px;
}
/* colonne de gauche */
#main1 #leftnav{
padding:10px;
width:220px;
}
/* colonne principale */
#main1 #content{
padding:10px;
border-left:2px solid #000000;
border-right:2px solid #000000;
}
/* titre des articles */
#main1 h2{
margin:0px 0px 10px 0px;
padding:0px;
font-size:130%;
color:#F0FFF0;
}
/* Pour les stuctures avec une colonne a droite */
#main2{
text-align:left;
margin:0px auto 50px auto;
}
/* colonne de droite */
#main2 #rightnav{
padding:10px; width:220px;
}
/* colonne principale */
#main2 #content{
padding:10px;
border-left:2px solid #000000;
border-right:2px solid #000000;
}
/* titre des articles */
#main2 h2{
margin:0px 0px 10px 0px;
padding:0px;
font-size:130%;
color:#F0FFF0;
}
/* Pour les stuctures avec une colonne a gauche */
#main3{
text-align:left;
margin:0px auto 50px auto;
}
/* colonne de gauche */
#main3 #leftnav{
padding:10px;
width:220px;
}
/* colonne principale */
#main3 #content{
padding:10px;
border-left:2px solid #000000;
border-right:2px solid #000000;
}
/* titre des articles */
#main3 h2{
margin:0px 0px 10px 0px;
padding:0px;
font-size:130%;
color:#F0FFF0;
}
/* Trois colonnes, modele 2XX */
#troisCol #leftnav{
width:220px;
float:left;
}
#troisCol #rightnav{
float:right;
margin-left:-220px;
width:220px;
}
#troisCol #main{
float:left;
width:100%;
margin:0 -220px 0 -220px;
}
#troisCol #main #content{
margin:0 222px;
overflow:auto;
}
#MainTab { margin:0px; width: 100%}
#MainTab td { vertical-align:top; }
/* entete */
#top {
padding:5px;
background:#000000;
color:#000000;
border-bottom:2px solid #000000;
}
#top h1{
padding:0px;
margin:0px;
color:#000000;
}
/* Bas de page */
#footer {
clear:both;
padding:10px;
background:#000000;
color:#000000;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
}
#footer p{
margin:0px;
padding:10px;
background:#000000;
color:#000000;
}
#footer a,#top a{
text-decoration:underline;
color:#000000;
font-size:110%;
}
#footer a:hover,#top a:hover{
text-decoration:none;
color:#000000;
}
.cleaner {clear:both;}
/* --------- Modules -------- */
/* Texte libre de gauche */
#LeftPart {}
/* Texte libre de droite */
#RightPart {}
/* Calendrier */
#Calendrier {}
/* Liens */
#Lien {}
/* Articles recents */
#ArticleRecent {}
/* Categories */
#Categorie {}
/* Archives */
#Archive {}
/* Recommander */
#Recommander {}
/* Album */
#Album {}
/* W3C */
#W3C {}
/* Recherche */
#Recherche {}
/* Commentaires */
#CommentRecent {}
/* Presentation */
#Presentation {}
/* Image aleatoire */
#aleaIm {}
.box {
width:100%;
margin-bottom:10px;
color:#000000;
border: solid black 1px;
}
.box h2 {
color:#000000;
font-weight:bold;
border-bottom: solid #000000 2px;
}
.box-top {
background: #000000;
border-left: none 0px;
border-bottom: none 0px;
border-right: none 0px;
border-top: solid #000000 2px;
}
.box-left {
background:#000000;
margin:0px;
border-right: none 0px;
border-bottom: none 0px;
border-top: none 0px;
border-left: solid #000000 2px;
}
.box-right {
margin:0px;
background: #000000;
border-left: none 0px;
border-bottom: none 0px;
border-top: none 0px;
border-right: solid #000000 2px;
}
.box-bottom {
background:#000000;
border-left: none 0px;
border-right: none 0px;
border-top: none 0px;
border-bottom: solid #000000 2px;
}
.box-topLeft {
padding-left:20px;
background:#000000;
}
.box-topRight {
padding:3px;
background:#000000;
}
.box-bottomLeft {
margin:0px;
background:#000000;
}
.box-bottomRight {
padding:0px;
background:#000000;
}
.box-content {
background:#000000;
overflow:hidden;
padding:0px 5px 10px 5px;
border-left: solid #000000 2px;
border-bottom: solid #000000 2px;
border-top: solid #000000 2px;
border-right: solid #000000 2px;
}
.box-content p, .box-content ul{
margin:0px 10px 0px 0px;
padding:0px;
}
.box-content li {
list-style:square;
color:#000000;
margin:3px;
padding:0px;
}
/* Articles */
.article, .articleSeul {
margin-top:0px;
padding:0px;
background:#000000;
color:#F0FFF0;
}
.article p, .articleSeul p {
padding:0px 0px 5px 5px;
margin:0px
}
.Date {
padding:0px 0px 5px 0px;
margin:5px 0px 5px 0px;
border-bottom:1px solid #000000;
width:100%;
}
.Option {
padding:5px 0px 0px 0px;
margin:0px 0px 20px 0px;
border-top:1px dashed #000000;
width:100%;
text-align:right;
font-size:85%;
color:#808080
}
/* Commentaires */
#comment { }
.commentMessage {
padding:5px;
border:1px dotted #98FB98;
background:#000000;
margin:0px;
color:#98FB98;
}
.commentOption {
text-align:right;
font-size:85%;
color:#808080;
margin-bottom:10px
}
/* Trackback */
#addTrackback {
background:#000000;
color: #98FB98;
padding:5px;
border-bottom: solid #000000 2px;
border-right: solid #000000 2px;
border-left: solid #000000 2px;
border-top: solid #000000 2px;
}
/* Calendrier */
.calendarTop1 {
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
font-style: normal;
color:#7CFC00;
font-weight: bold;
background-color:#000000
} /*entete*/
.calendarToday1 {
font-family:Verdana, Arial, Helvetica;
font-size:10px;
font-weight:bold;
color:#000000;
background-color:#FF8F00;
}
/* Aujourd'hui */
.calendarDays1 {
width:40px;
height:15px;
font-family:Verdana, Arial, Helvetica;
font-size:10px;
font-style:normal;
color:#000000;
background-color:#000000;
text-align:center;
}
.calendarHeader1{
font-family:Verdana, Arial, Helvetica;
font-size:10px;
background-color:#7CFC00;
color:#000000;
}
/* lettre de la semaine */
.calendarTable1 {
background-color:#000000;
border:0px solid #7CFC00;
}
/* contour du calendrier */
.alignC {
text-align:center;
}
/* le titre de l'article */
a.titreArticle{
text-decoration:none;
color: #F0FFF0;
}
a.titreArticle:hover {
text-decoration:none;
color:#F0FFF0;
}
.topLien{
text-decoration:none;
}
.topLien:hover {
text-decoration:none;
}
/* Fenetres ajout de commentaire, de trackback, recommander */
#formComment, #divTrackBack, #divRecommander, #divNewsletter {
color: #F0FFF0;
border: 1px 2px #000000;
margin-top: 10px;
}
.newsletter {
margin: 0px;
padding-left: 20px;
}
/*= Specifique ecran =*/
#divRecommander {
width: 650px;
height: 550px;
}
#divNewsletter ul {
text-align: left;
list-style-type: none;
}
#divRecommander fieldset {
border: none 0px;
}
#divRecommander table {
width: auto;
margin: auto;
}
#formComment {
width: 390px;
height: 430px;
}
#divTrackBack {
width: 470px;
height: 470px;
}
#divNewsletter form p {
font-size: 0.8em;
text-align: left;
margin-left: 10px;
margin-right: 10px;
bottom: 10px;
position: relative;
padding: 10px;
}
/*= Titre page =*/
#formComment h2, #divTrackBack h2,
#divRecommander legend, #divNewsletter h2 {
font-family: cursive;
font-size: 16px;
text-decoration: underline;
margin-bottom: 40px;
}
/*= Contenu =*/
#formComment form {
text-align: center;
}
#divTrackBack table {
margin-bottom: 25px;
}
/*= Libelles =*/
#divTrackBack td, #formComment label,
#divRecommander table.txt strong, #divNewsletter label {
position: relative;
font-weight: bold;
font-family: Verdana, Arial, Helvetica;
font-size: 12px;
left: 10px;
}
#formComment label {
float: left;
clear: both;
}
/*= Champs de saisie =*/
#divTrackBack input, #formComment input,
#formComment textarea, #divRecommander input,
#divRecommander textarea, #divNewsletter input {
background: #000000;
border: inset 1px #000000;
padding-bottom: 5px;
color: #F0FFF0;
font-size: 10px;
font-family: Verdana, Arial, Helvetica;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 2px;
}
/* saisie texte */
#formComment input[type="text"], #formComment textarea {
float: right;
margin-right: 30px;
margin-bottom: 1px;
margin-top: 2px;
}
#divNewsletter input {
margin-left: 15px;
}
.txt td {
border: 0px none;
vertical-align: top;
padding-right: 10px
}
/* case a cocher */
#formComment input[type="checkbox"]{
float: left;
margin-left: 20px;
}
/*== boutons ==*/
#divTrackBack input[type="submit"], #formComment input[type="submit"],
#divRecommander input.submit {
background: #000000;
color:#F0FFF0;
border: 1px outset ;
}
#divRecommander input.submit {
//position: relative;
float: right;
margin-right: 12px;
right: 30px;
bottom: 15px;
}
/*= Album photos =*/
#generalAlbum {
width: 100%;
}
/* Gallerie d albums */
.AccAlbum {
width: 80%;
position: relative;
margin: 0 auto 0 auto;
}
/* Vignettes d'album*/
.thumbAccAlbum {
position: relative;
float: left;
padding: 5px;
}
/* Pied de page d'album */
#piedAlbum {
clear: both;
text-align: center;
}
/*= Détail d'album =*/
/* Navigation dans l'album, groupe de vignettes, nom de la photo, photo */
.quickNavAlbum, #centrethumbsAlbum, .nomPhotoAlbum, .photoAlbum {
position: relative;
margin: 0 auto 0 auto;
width: 80%;
text-align: center;
}
/* Navigation : Photo suivante */
.suivAlbum { float: right; }
/* Navigation : Photo précédente */
.precAlbum { float: left; }
/* Vignettes */
.thumbAlbum, .thumbCouranteAlbum {
position: relative;
float: left;
margin: 5px;
padding: 2px;
border: dashed 1px;
}
/* Vignette courante */
.thumbCouranteAlbum {
border: solid 1px;
}
/* FIX: bug IE dans le positionnement */
.GcheTexte,.CtreTexte.DrteTexte{
position:relative;
}
Merci encore !!!
Chogami !
En fait, j'ai pris en considération ton avis.
Puis, je voudrais que tu m'aises à enlever le fond blanc de la colonne centrale. Ca me derange !!!
Merci !!!
Bonjour, j'ai tenté avec un de tes design complet le "relookage" de mon blog, je t'invite à me donner ton avis .
Merci!!!
je vois sur ton blog que tu y es arrivé. Il te manquait
#cl_1_2
la 3ème colonne
Bonne soirée Anna
ma baniere mais je n' arrive à rien je ne suis pas un pro du blog et je ne comprend pas grand chose,je viens te demander ton aide si tu veux bien merci d'avance
Je viens de changer le design de mon blog, j'ai choisi le Modern Times Blue. Malheureusement ma bannière ne rentre plus dans l'en tête. Est-il possible d'agrandir cet en tête ?
Merci pour votre aide.
je suis perdue
suis débutante
et ne vois pas ou je dois aller oiur changer les bordures
les couleur
changer ma baniere
pour mettre tt en horizontal en haut de la âge d'accueil.....articles contact flux....
comment mettre les liens de pub comme vous et non pas en pub visuel
ne pas faire défiler comme un blog mais cliquer comme sur un site
j'a vais déjà fais un site et en allant sur admn je savais quoi faire
la je ne sais pas ou allez et je fais n'importe quoi
merci de m'aider
car je sui désespere
merci pour tt vos conseils
pourquoi tt les autres site ressemeble a un blog et pas le votre amlors que je me suis inscrite en premium pour avoit un site et non olus un blog
car il sdisait qu'ils confluait mais je n'ai pas le nom de mon site sur la page d'accuiel mais le nom de mmon blog..
merci de tout ce que vous pouvez m'indiquer
Alors voilà , j'aimerais faire sur mon blog des catégories d'articles avec à l'intérieur tous les articles s'y reportant .c'est-à-dire si je mets ( par rapport à mon blog )activités pâques , activités noël...etc , j'aimerais qu'en cliquant sur ces catégories , mes lecteurs trouvent tous les articles s'y reportant .
Je ne sais pas si je me suis bien exprimé alors , j'attends de tes nouvelles
merci
Tout d'abord, je te remercie pour ces magnifiques designs complets que tu mets si généreusement à notre disposition.
Néanmoins, j'ai essayé de télécharger un ou deux de tes modèles à trois colonnes, et la deuxième colonne se met toujours en bas de la page. Pourrais-tu m'expliquer comment y remédier? Voici l'adresse de mon site si tu veux aller y jeter un coup d'oeil:
http://unetempetedelivres.over-blog.net
Merci d'avance pour ton aide!
Hermione
J'ai un petit souci avec un des design que j'avais pris chez toi .
Il est tout noir aujorud'hui , alors que j'usqu'a présent il était normal .
En plus on me dit dans l'aide d'OB que c'est parce que'il y a un souci avec mon ccs .
Or pourquoi maintenant, jusqu'a present il marchait tres bien ! et je ne touche jamais au ccs.
En plsu j'y vais tres rarement dessus.
Bref j'ai essayé de retrouver le ccs dans ton site mais je ne le retrouve pas .
Peux tu m'aider ???