Actualité Cinéma Photos Fonds d'écran Vidéos 3B Poèmes Histoires
Séries TV Musique Sondages Citations Blagues Jeux Blogs t'Chat Forums
Rechercher
  • Rechercher

CSS : Quelques possibilitées offertes par la V3

Les tags associés à ce topic : Blog, Blogs, CSS, Personnalisation

le 27/01/2008 à 16h13
Avatar de pimprenelleb
18 ans
Sage
oui pour les images moi j'utilise imageshack ^^

mais il ne gere pas les curseurs (snif)

edit:

hihihi j'ai trouvé finalment, si ca vous interesse...

Voir le lien

désolée pour le dérengement ^.^ et merci a kosmos =D

(Message édité le 27-01-2008 à 16h25 par pimprenelleb)
le 07/05/2008 à 11h04
Avatar de carton-pate
22 ans
Conseillère inactive
Bien le bonjour , voilà j'ai un énorme soucis (comment ça pas si énorme?) hum je me demandais si les favoris pouvaient encore etre mis sous forme de vignettes , car soucis je n'y arrive pas , pourtant cela fait deux jours que je me creuse le cerveau -_-'

Donc si l'on pouvais m'aider ce serai sympathique

Merci d'avance
le 07/05/2008 à 16h05
Avatar de kosmos
25 ans
Sage inactive
Oui, c'est toujours possible.

Quand tu regardes le code source de ton blog (ctrl+U) et que tu vas jeter un oeil sur la section de code concernant les favoris, tu vois ça : (là je te mets le code pour un des favoris de mon blog Happy Berry)

< li class="fav50837 favblox"><a href="Voir le lien .bloxode . com/" title="Baranodreams"><sp an>Baranodreams</span></a> </li >

Tu vois le numéro 50837? chacun de tes favoris a un nombre attribué.
Tu dois commencer par récupérer le nombre correspondant à chacun de tes favoris, car il va le définir dans ta css.

ensuite tu mets dans ton code, ou tu veux, mais dans le menu de droite si tu veux avoir un code un peu organisé, vu que les favs sont dans le menu de droite : (reprise du tuto de la Missrayée ^^)

li.favblox {
height:40px;
width:40px;
margin:2px;
float:left;
}

(ça permet d'avoir des éléments de liste de la taille des miniatures, et en flottants. Le margin est là pour séparer les miniatures)

li.favblox a {
display:block;
height:40px;
width:40px;
}

(ça, ça permet d'avoir des miniatures cliquables sur l'ensemble de leur surface. Pour ceux que ça intéresse, le display:block permet de spécifier la hauteur et la largeur du lien, alors qu'à la base il s'agit d'une balise de type inline ^^)

li.favblox span { visibility:hidden; }
(ça, ça évite d'avoir le texte du lien en visible )

h3.cpth3 {
clear:both;
}

ensuite, on en vient au numéros qu'on a pris dans le code source. ^^

Exemple pour le 50837 par exemple :

li.favli.fav7183 {
background:url(miniature_d e_lapersonne);
}

Et miniature_de_la personne, tu mets en fait le lien d'une image en 40x40px que tu auras faite pour désigner le blog ou la personne en question.


Après, tu répètes l'étape pour chaque favoris, ce qui est donc long. ^^


Bon courage.

le 07/05/2008 à 16h26
Avatar de carton-pate
22 ans
Conseillère inactive
Suis je idiote ou pas?

*se tape la tête contre le mur* y'a un truc que je dois pas bien faire c'est pas possible
le 07/05/2008 à 16h44
Avatar de kosmos
25 ans
Sage inactive
Alors déjà, je suis en partie responsable, j'ai oublié le cas pour les favoris externes (non bloxode et je vois que tu en as).

On a définit le code pour favblox, donc les favoris lexode, mais pas pour les favoris externes, soit : favexterne.

de plus, l'image que tu as utilisée est en 70x70 et non en 40x40, donc elle ne peut évidemment pas s'afficher correctement.

Il faut donc changer ci-dessous les valeurs de 40px en 70px :

li.favblox {
height:40px;
width:40px;
margin:2px;
float:left;
font-size:2px;}



li.favblox a {
display:block;
height:40px;
width:40px;

}

De plus, tu dois créer les mêmes blocs à double, mais avec favexterne au lieu de favblox, histoire que les favoris externes soient également définis dans le code. (en gros, tu prends tous les blocs favblox, tu en fais une copie que tu colles au-dessous de tes favbloxs de base dans ta css, et tu mets favexterne à la place)

Exemple :

li.favexternes {
height:40px;
width:40px;
margin:2px;
float:left;
font-size:2px;}



Si je dis des conneries les gens, arrêtez-moi!
Mais ça me semble assez logique donc je pense pas me gourrer

(Message édité le 07-05-2008 à 16h46 par kosmos)
le 07/05/2008 à 16h49
Avatar de kosmos
25 ans
Sage inactive
En gros, je pense que pour que ça fonctionne, tu dois avoir ça : (je te regroupe favblox et favexterne dans les mêmes groupes, pour un gain de place, la séparation par virgules permet de définir plusieurs éléments du css à la fois, pratique à savoir ^^)
Je vois que tu n'as pas de favoris Lexode, mais si un jour tu veux en mettre, tu as déjà le code comme ça. (et vive Maliki! ^___^)

/*...........FAVORIS...... ......*/
li.favblox a:hover, li.favexterne a:hover {
background:transparent !important;
}


li.favblox, li.favexterne {
height:70px;
width:70px;
margin:2px;
float:left;
font-size:2px;}



li.favblox a, li.favexterne a {
display:block;
height:70px;
width:70px;

}

li.favblox a:hover, li.favexterne a:hover {
background:url() !important;
}

li.favblox span, li.favexterne span { visibility:hidden; }


h3.cpth3 {
clear:both;
margin-top:20px;

}

(Message édité le 07-05-2008 à 16h51 par kosmos)

(Message édité le 07-05-2008 à 16h52 par kosmos)
le 07/05/2008 à 16h51
Avatar de carton-pate
22 ans
Conseillère inactive
C'est dégoutant d'être aussi douée XD

Merci Kos' pfff je suis pas très douée

le 07/05/2008 à 16h52
Avatar de kosmos
25 ans
Sage inactive
Naaaan, pas douée, c'est juste une question d'habitude.


Py tu diras que je suis douée quand ça fonctionnera correctement, ok?
le 07/05/2008 à 16h58
Avatar de carton-pate
22 ans
Conseillère inactive
Mais ça fonctionne me reste a tout faire quoi merci beaucoup

J'ai bien perdue de mon habitude de coder ^_^

Et bravo pour le choix du fav ^_^

le 07/05/2008 à 17h00
Avatar de kosmos
25 ans
Sage inactive
Contente que ça fonctionne. ^^
C'est vrai que quand on code plus pendant un moment, on perd vite la main! XD
le 07/05/2008 à 17h03
Avatar de carton-pate
22 ans
Conseillère inactive
Ouai mais j'entends bien m'y remettre
Aux design aussi
le 03/07/2008 à 17h56
Avatar de sweeneytodd
22 ans
Conseillère
Bonsoir ! Alors voilà mon problème : j'ai voulu créer une mosaïque d'avatars pour les favoris, mais les avatars en question débordent sur le titre du menu du dessous... Pourquoi ?
le 03/07/2008 à 22h49
Avatar de aghanim1987
21 ans
Modérateur
Bonsoir,

L'adresse du blog concerné? Parce-que sur celui de ton compte, je n'ai vu aucune mosaïque.
le 01/08/2008 à 18h54
Avatar de bloody-wendy
18 ans
Conseillère inactive
Hey Hey vous tous
Bon j'avoue, j'ai eut un peu la flemme de lire toooouuuut ce qu'il y avait déjà de marqué sur ce topic pour voir si quelqu'un avait déjà posé la question que j'ai ... donc désolée si c'est déjà le cas =)

Alors ma question existentielle est la suivante : je voudrai pouvoir remplacer, dans le menu de droite, les mots "A propos de moi, publicité, description ..." par une image ! Je sais pas si vous voyez ce que je tente de vous dire mais bon voilà =)

Exemple : au lieu d'avoir marqué " Catégories " il y aurait " Mes catégories" et se serait donc une image ...

Quelqu'un a-t-il réponse à cette petite question ???

Merci d'avance =)
le 01/08/2008 à 23h28
Avatar de aghanim1987
21 ans
Modérateur
Bien sûr, c'est faisable. Il suffit d'attribuer une image de background aux différents h3 (titres), et pour éviter d'avoir des soucis avec l'écriture des catégories, on les réduits en taille.

#menu h3.aboutme
#menu h3.madescription
#menu h3.rubriqueh3
#menu h3.albumsh3
#menu h3.tagsh3
#menu h3.titreplayer
#menu h3.favorish3
#menu h3.cpth3
#menu h3.pubh3
#menu h3.rssh3
le 03/08/2008 à 14h43
Avatar de bloody-wendy
18 ans
Conseillère inactive
Ok
Serait-il possible que tu me donnes un exemple ? parce que je ne vois pas trop où je dois ajouté le background-image en fait XD

Merciiiiii =)
le 03/08/2008 à 17h00
Avatar de aghanim1987
21 ans
Modérateur
Ben je ne vois pas ce qu'il reste de difficile si tu connais un peu la CSS...

#menu h3.aboutme{
background:url();
}
le 04/08/2008 à 09h44
Avatar de bloody-wendy
18 ans
Conseillère inactive
Soit je suis une véritable cruche accomplie, soit je bug XD

C'est où exactement que je dois insérer tous ces codes ?
J'ai quelques notions en CSS mais je ne suis une pro non plus !!!

Merci =)
le 04/08/2008 à 20h36
Avatar de aghanim1987
21 ans
Modérateur
Ben tu le mets ou tu veux, sachant que le navigateur lis du haut vers le bas ta CSS. Après pour une facilité de modifications, il est mieux de les placés de façon à ce que ce soit un ordre logique.

Tu as dans ta CSS à un moment div#menu h3 tu mets le bout de code après ça.

div#menu h3{
code du h3
}
#menu h3.aboutme{
code pour le titre
}

Comme dit précédemment, pour éviter de voir apparaitre l'écriture du titre, il faut la réduire à 0px et appliquer la couleur qui est en fond de menu car sur IE même à 0px, l'écriture peut apparaitre. On mets également le code pour l'image et on oblige à ce que l'image ne se répète pas, sinon ça peut faire très moche. Dans le menu h3 général, il peut-être utile d'indiquer la dimension (en hauteur notamment) afin que l'image puisse apparaitre dans sa totalité.

div#menu h3{
height:20px;
}
#menu h3.aboutme{
background:url(adresse de l'image) no-repeat;
font-size:0px !important;
color:#000000;
}

Reproduire pour chacun des titres en adaptant l'adresse de l'image.

Accès direct

R�pondre

Vous devez ˆtre membre pour répondre à ce topic, inscrivez-vous gratuitement !