|
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
|
|
4088 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.....................
|
|
4088 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
|
|
4088 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
|
|
4088 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
|
|
4088 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%.
: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
|
|
4088 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:
|
|
4088 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
|
|
4088 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:
|
|
4088 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;
}
|
|
4088 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.
|
|
