Bonjour !

Et oui encore une question !
J'essaye de modifier le fond de mon "quote" en suivant un tutoriel ici, mais mes faible compétences en CSS me bloque ...

Pour le quote voici mon code:

Spoiler:

Donc en faite j'aimerai une image en haut à gauche et une en bas à droite, mais un des 2 bloc l'autre ... Ce qui masque l'une des images ... Et sinon pour ce qui est de l'image en haut à droite elle est masque par le texte et j'aimerai bien décaller ce texte pour qu'on puisse bien voir l'image !

Après pour le code j'aimerai y ajouter un scrolling. Pour éviter que quand je met les balise pour code ça me mette sur toute la page le code...

Voici mon CSS pour le code:

Spoiler:

(Même problème qu'avec le quote au passage !)

J'espère avoir été assez clair. Les modifications se feront toujours sur le même forum de test: http://test-geykho-nikos2.forumactif.com/
Puis ces modifications une fois complètement terminées seront mise en place sur ce forum: www.geykho.com !

Merci !


PS: Vous pouvez avoir un aperçu ici: http://test-geykho-nikos2.forumactif.com/votre-1er-forum-f1/cudder-is-back-t2.htm#2

Bonjour.

Tu as fait pas mal de petites maladresses dans ton code, notamment la répétition de plusieurs propriétés servant à la même chose (comme tu l'as fait avec border) dont certaines n'ont pas les mêmes valeurs (padding par exemple est défini deux fois avec 10 et 20px). Je t'ai corrigé ça, et j'en ai profité pour rassembler ce qui pouvait l'être et gagner en lignes.
Pour l'arrondissement des coins, je ne connais pas la propriété "khtml-border-radius". En revanche -webkit-border-radius serait je pense à rajouter.

Code:

.quote{
   font-family: Georgia;
   font-size: 11px;
   color: #000000;
   line-height: 125%;
   background-color: #9e9e9e;
   background: url('http://img826.imageshack.us/img826/8476/quoteopen.png') no-repeat left top;
   background-image: url('http://img689.imageshack.us/img689/4876/quoteclose.png') no-repeat right bottom;
   border: solid 1px #636363;
   border-radius: 5px;
   -moz-border-radius: 10px 10px 10px 10px;
   khtml-border-radius:  10px 10px 10px 10px;
   padding: 10px;
}

.code{
   font-family: Georgia;
   font-size: 11px;
   color: #214b71;
   line-height: 125%;
   background-color: #9e9e9e;
   background: url('http://img704.imageshack.us/img704/7507/codet.png') no-repeat left top;
   background-image: url('http://img704.imageshack.us/img704/7507/codet.png') no-repeat right bottom;
   border: solid 1px #636363;
   border-radius: 5px;
   -moz-border-radius: 10px;
   khtml-border-radius: 10px;
   padding: 10px;
}

Je ne crois pas qu'il soit possible de placer deux images de fond. en tous cas une seule s'affiche sur les tests que j'ai fait. Peut-être existe-t-il une méthode, mais je ne la connais pas. A vérifier.

Je ne sais pas ce que tu entends par "scrolling". Si tu parles de la barre de défilement, il existe un tutoriel dessus et je te conseille de passer le voir.
Pour le résumer, ajoutes dans ton css les deux propriétés suivantes :

Code:

height: Xpx ;
overflow-y: auto ;

Sans oublier de remplacer mon X par la valeur de ton choix (qui sera exprimée en pixels pour des raisons de simplicité).


Furase

Merci, c'est déjà mieux !
Par contre pour le défilement je pense que je vais aller voir le tutoriel vu que lorsque je rajoute le code que tu m'as passé à mon CSS .code ça n'a rien changé

Avec ce que je t'ai donné la barre de défilement n'apparait que lorsqu'il y a une quantité de texte suffisante pour couvrir la hauteur définie par height. Mais si tu veux plus de détails je pense en effet qu'aller voir le tutoriel est une bonne idée. Je ne vais quand même pas le réécrire ><
Refais signe si tu as as des difficultés, sinon pense à mettre l'icône "résolu" à ton sujet.


Fu'

Bon j'ai un gros soucis là ...
Hier soir j'ai mis ton code et je t'ai dis que ça marchais nickel. En déput d'après midi là je vais sur mon forum de test et puis plus rien ...
L'image en bas à droite n'y est plus, la bordure que je voyais hier n'y est plus non plus...

Pour ce qui est du overflow j'ai bien compris qu'il fallait mettre une certaines valeur pour une certaine hauteur de texte. J'avais mis 70px, l'équivalent environ de la moitié d'une signature moyenne, et pourtant avec tout le texte que j'avais mis pas de barre.
J'ai essayé avec un tutoriel trouvé sur le net de mettre:

Code:

max-height: 70px;

Mais toujours pas de barre ...
Je suis donc complètement perdu là ...

height sert à imposer une hauteur fixe quelle que soit la quantité de texte que tu vas mettre.
max-height permet d'adapter la hauteur au contenu placé si celui-ci est moins "haut" que la taille imposée. On évite ainsi de se retrouver avec un grand espace vide dans le cas où le contenu placé est moins important que prévu.
Dans le cas d'un contenu important, le résultat sera donc le même et ne changera pas le fait qu'il y ait ou non une barre de défilement. On emploi l'un ou l'autre selon la mise en page qu'on veut faire.

En plaçant l'overflow sur auto comme suggéré dans le tutoriel (ce que personnellement je trouve plus esthétique), la barre n'apparaît que si la "hauteur" du contenu dépasse celle imposée.
Un moyen simple de vérifier si le problème vient directement du overflow est de lui donner pour valeur scroll (qui affiche toujours la barre de défilement, indépendamment du contenu).
Tout ce que je peux te dire est de vérifier que tu ais bien placé une hauteur (ou hauteur max), regarder ta syntaxe (point virgule, guillemets dans le html, ou autres, oubliés). Et si tout est correct... je te propose de montrer ton code.

Le problème peut aussi venir du navigateur. Les plus anciens ne connaissent pas la propriété "overflow-y". Pour que ça fonctionne, il faut la remplacer par "overflow". La seule différence entre les deux propriété est que la première permet d'appliquer un style différent sur la hauteur et la largeur (on peut par exemple choisir de mettre une barre de défilement sur la hauteur et de cacher ce qui dépasse dans la largeur), tandis que la seconde s'applique (en théorie) sur les deux côtés.


Fu'