Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Je voudrais mettre une image de chaque côté des mots dans les blocs dans la partie BARRE svp
Edlitolc & Amme

Hello tout le monde !!!!!
Je suis un peu perdu !
J'aimerai pouvoir mettre des images (une rose blanche) de chaque côté des mots ARTICLES ACCUEIL PHOTOS FORUM dans les blocs de la partie BARRE mais je ne sais pas comment faire regardez cette image qui vous montre se que je cherche à faire ET se que je n'arrive pas à faire justement :



Merci !!!!!


128 appréciations
Hors-ligne
:b0:
Il faut que tu crées une image de fond pour les liens de la barre.
Comme dimensions par exemple :
largeur >>> 150px
hauteur >>> 30px

composée d'une rose à gauche et l'autre à droite

tu héberges cette image dans ta boîte à fichiers

cette image tu la mettras comme fond des liens de la barre, en CSS direct :
#barre a
{
background : #004000;
background-image : url( adresse de l'image );
...


:ct:



Edlitolc & Amme

Merci beaucoup UNE FOIS DE PLUS !

:b2: :b2: :b2: :b2: :b2: :b2: :b2: :b2: :b2: :b2: :b2: :b2:

Bizzzzz


c'est Corrigé Simon

4037 appréciations
Hors-ligne
C' EST NOËL ! :n8:





#barre a
{
background : # ;
background-image : url(http://img15.hostingpics.net/pics/284510rosebarre.png);
color : #EEF4E2;
text-decoration : none;
width : 150px;
height : 23px;
margin-left : 40px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}


Il faudra voir pour la centrer.....................


4037 appréciations
Hors-ligne
Edlitolc & Amme

Merci beaucoup Simon pour la photo qui m'a permis de visualisé un peu plus !
Merci beaucoup !!!
J'ai oublier de vous demandez : Comment trouvez-vous notre blog (même si il n'est pas fini) ???

Kisss

4037 appréciations
Hors-ligne
:b0:
Comment trouvez-vous notre blog (même si il n'est pas fini) ???


beaucoup de gout !

il faudrait jouer sur le hover de la barre et du menu .voir centrer la barre en ecartant les modules ( barre à 600px)
puis margin-left à 20px dans barre a .

mettre line-height: 45px; dans #menu H2

Des petits plus qui sont sympas

:col: :n10:

Edlitolc & Amme

Dac Simon !
Merci beaucoup pour ces astuces !!!!!!!

Kisss
Edlitolc & Amme

Mais quand tu dis : Barre à 600px .
C'est où que je dois taper 600 px ??????

Kiss

4037 appréciations
Hors-ligne
Mais quand tu dis : Barre à 600px .
C'est où que je dois taper 600 px ??????


Dans le CSS :flech: #barre

J'ai essayé 710px puis j'ai mis une bordure blanche.

Il faut étudier ces réglages en comparant avec le css de ton blog.

Une fois ces réglages en place il faudra descendre le #menu et le #contenu en essayant : margin-top: 40px;..



#barre
{
width : 710px;
height : 40px;
padding-left : 250px;
padding-top: 15px;
margin-top : 2px;
border-width : 3px;
border-style : solid;
border-color : #fff;
}




:n7:

Edlitolc & Amme

Dac, je vais essayer !
Merci Simon !
Je te tiens au courant !!!!!

Kissss

4037 appréciations
Hors-ligne
OK

Je ne te donne pas la bonne méthode:

Pour le vrai centrage de la barre il faut aller là :flech: [lien]

Ta partie #barre doit être à 100%.

#barre
{
width : 100%;
height : 45px;

}
#barre ul
{
list-style-type : none;
margin-left : auto;
margin-right : auto;
width: 682px;
}
#barre li
{
float : left;
}
#barre a
{
background : #4D2D24;
margin-left : 50px;
background-image : url(https://static.blog4ever.com/2012/11/720344/partie-barre-normal.PNG);
color : #F0F0F0;
text-decoration : none;
width : 104px;
height : 23px;
border-width : 2px;
border-style : solid;
border-color : #fff;
text-align : center;
display : block;
}
#barre a:hover
{
background : #4D2D24;
background-image : url(https://static.blog4ever.com/2012/11/720344/partie-barre-normal.PNG);
border : 2px solid #004000;
}


:am:




Edlitolc & Amme

Re Simon !
Décidément, je n'y arrive vraiment pas à centrer cette fichu barre ! mdr :pap:
Pourrais-tu me rendre un petit service ???
Est ce que tu pourrais prendre en photo ou me copier tout se qu'il faut écrire dans le CSS pour que ma barre soit PARFAITEMENT centrer, que les blocs soit BIEN écarter les uns des autres, pour que les blocs ne soit pas trop longs non plus mais qu'ils soient suffisamment large pour que ça évite de faire comme ils sont actuellement ...
Si tu pouvez faire cela se serai vraiment bien (quand tu auras le temps biensure !!!) !

Kiss et un grand merci d'avance !!!
Edlitolc & Amme

Ah oupss dsl simon !
Je n'avais pas vu que tu l'avais déjà marquer oubli mon précédent message puisque tu la déjà fait !

Kiss

4037 appréciations
Hors-ligne
Voici comment ça fonctionne. d'après les conseils de



Edlitolc & Amme

Ok merci Simon !!!!!
Mais le problème, c'est que si j'agrandis en largeur les blocs, j'ai peur que se ne soit plus centrer ...
Est ce que ça restera centré ou est ce qu'il y aura un changement si je les agrandit en largeur ????????

Kissss :ct: :ct:

4037 appréciations
Hors-ligne
Si on agrandit en largeur il faudra changer les réglages.

par exemple en mettant le module à 124 il faut ajouter 20px entre les modules ce qui ferait 762px et il faudra mettre background-repeat: no-repeat; sinon l'espace est plus grand donc l'image sera répétée.

Il faut mettre background-repeat: no-repeat; également dans le #barre hover. et effacer la couleur.

Comme l'image sera décalée il faudra la centrer donc : background: center;


Regardes bien le CSS et essaies de comprendre que si tu agrandis le bloc, ton image de roses ne sera pas centrer et se repètera. les blocs prendront plus de place donc il faut changer la largeur (donc 762 )


J'ai mis 2px pour que tu voies les bordures des blocs


#barre
{
width : 100%;
height : 45px;
}
#barre ul
{
list-style-type : none;
margin-left : auto;
margin-right : auto;
width : 762px;
}
#barre li
{
float : left;
}
#barre a{
background-image: #;
background: center;
margin-left : 50px;
background-image : url(https://static.blog4ever.com/2012/11/720344/partie-barre-normal.PNG);
background-repeat: no-repeat; /* très important*/
color : #F0F0F0;
text-decoration : none;
width : 124px;
height : 23px;
border-width : 2px;
border-style : solid;
border-color : #fff;
text-align : center;
display : block;
}
#barre a:hover
{
background : #;
background-image : url(https://static.blog4ever.com/2012/11/720344/partie-barre-normal.PNG);
background-repeat: no-repeat;
border : 2px solid #004000;
}

Edlitolc & Amme

Et si je met comme largeur à 110px combien cela me fera-t-il pour tout se qui est espace entre les modules, ...
Enfin bref, tout les changements quoi ?

Kisss

4037 appréciations
Hors-ligne
110+50 =160
160x4=640
640+50=690px

sans bordures mettre 690px dans #menu ul.

Attention si c'est plus large: mettre les background-image en background-repeat: no-repeat;

Avec une bordure de 2px c'est:
110+50+4 (2x2)= 164 /* on multiplie 2 fois la bordure donc 4)*/
164x4=656 /*multiplié par 4 modules */
656+50= 706px /* on ajoute un espace donc 50px )

Si tu as compris tu devrais pourvoir me dire : combien ça fait si j'ai 3 modules de 140px bordures 2 px espace 50px :ptdr:



CALCUL CENTRAGE BARRE

Edlitolc & Amme

Euh ... lol je sais pas trop mais je vais essayer d'y réfléchir promis lol :ptdr: :ptdr: :ptdr:
Edlitolc & Amme

Euh j'ai pas trop compris à ton truc ...
Actuellement en largeur nous avons 104px, nous aimerions mettre 110px à la place, pourrais-tu m'indiquer EXACTEMENT comme ici
, je sais que je suis l'ambeteuse de service mais bon je suis pas bonne en math ... lol :ptdr: :ptdr: :ptdr:

4037 appréciations
Hors-ligne
110+50=160x4=640+50= 690px

Il n'y a pas de bordures mais si tu mets 2px de bordure cela fera: 706px




#barre
{
width : 100%;
height : 45px;
}
#barre ul
{
list-style-type : none;
margin-left : auto;
margin-right : auto;
width : 690px; /*centrage de la barre */
}
#barre li
{
float : left;
}
#barre a{
background-image: #; /* mettre une couleur si on enlève l'image*/
background: center; /* place l'image au centre du bloc*/
margin-left : 50px;
background-image : url(https://static.blog4ever.com/2012/11/720344/partie-barre-normal.PNG);
background-repeat: no-repeat; /* très important*/
color : #F0F0F0;
text-decoration : none;
width : 110px;
height : 23px;
border-width : 0px;
border-style : solid;
border-color : #fff;
text-align : center;
display : block;
}
#barre a:hover
{
background : #; /* mettre une couleur si on enlève l'image*/
background-image : url(https://static.blog4ever.com/2012/11/720344/partie-barre-normal.PNG);
background-repeat: no-repeat;
border : 0px solid #004000;
}


4037 appréciations
Hors-ligne

Je vois que tout va bien puisque tu as corrigé.

Mais tu aurais dû le dire pour que je puisse fermer le post.



Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Année 2012.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6061 autres membres