Wikini

ForumGraphisme

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-44-198-169-83.compute-1.amazonaws.com
:: ForuM :: Si le thème de votre question est obscur, alors utilisez les pages "par niveau utilisateur"
par thème - ForumInstallation - ForumUtilisation - ForumGraphisme - ForumPersonnaliserGraphique - ForumDivers
Par niveau utilisateur: ForumDebutant - ForumIntermediaire - ForumExpert -


Bienvenue dans le FoRum.

Quelques règles:


Comment faire ci ou ça etc.(remplacer le texte)

reponse: blabla


Images et Texte

Lorsque j'insère une image le texte écrit se met en dessous : je voudrai le mettre à côté de l'image... du côté droit ou/et du côté gauche, comment faire ?
Je voudrai aussi savoir comment insérer une image au centre de la page ou même un titre ?

Merci boukou, Clairette le 22/04/2005 20h36 :-))

réponse:Ta question est un peu flou. STP, indique ta version de WikiNi (ainsi que les contributions éventuelles). Et, si possible un Lien-Web pour qu'on puisse VOIR un exemple de ton probleme. Un wiki...C fé pouR :-) --SloYvY

réponse2: Voici mon siti wikini : http://claire.pouteau.free.fr, pour la version je ne suis pas très calée c'est celle installée automatiquement par free pour les pages perso !! pour voir le texte qui se met en dessous allez sur le lien compagnie par exemple ou creation collective. Merci. Clairette :-) le 25 avril 2005 11h49 CET

réponse3: Je ne connais les particularités de la version disponible chez. Alors, parcequ'un petit schéma est mieux qu'un long discours j't'ai fais un exemple/démosntration sur un wiki Disponible ici

bonne réponse ?: En fouinant de droite et de gauche, j'ai trouvé ça :


cela devrait te permettre de déboucher sur qq chose rapidement (Pierre le 15/05/2005)

réponse4: Explique-nous d'abord comment tu fais pour insérer ton image dans la page, la réponse en dépend... -- JmPhilippe

réponse5: pour insérer mes images je les télécharge à la racine avec gFTP puis j'écris à l'emplacement désiré Regard2.jpg par exemple pour l'image 2 de la page principale... j'ai aussi mis des vidéos mais je n'arrive pas à les lire directment du site il faut que je les télécharge sur ma machine avant !!

J'ai essayé les >>>centre<<< pour mes titres et images mais ça marche pas ? faut il que je modifie la source de mon wikini et koi exactement car je suis novice dans l'affaire et faut tout m'expliquer pas à pas !

Merci pour vos conseils. Clairette :-) le 28 mai 2005

réponse6: Ok, donc tu écris un truc du genre [[http://claire.pouteau.free.fr/Regard2.jpg Regard2.jpg]] dans le texte, ce qui te génère du code Html de ce genre <img src="http://claire.pouteau.free.fr/Regard2.jpg" alt=" Regard2.jpg" />. Pour modifier la position de l'image par rapport au texte, il te faut modifier les attributs du tag <img .../> du code Html (désolé c'est pas facile de ne pas employer de mots techniques !). Tu as pour cela deux solutions :
  1. entrer directement le code Html dans le texte avec les attributs qui vont bien
  2. modifier les attributs à travers le fichier CSS wakka.css
La première solution te permet de modifier le placement de chaque image séparément, la seconde le fera pour toutes les images du site. Au besoin on peut aussi combiner les deux méthodes si on a un certain nombre d'images (mais pas toutes) à placer de la même manière...

Pour faire passer le texte à droite ou à gauche de l'image, il faut employer l'attribut float avec la valeur left et right respectivement (car c'est l'image qui se retrouve à gauche ou à droite du texte respectivement). Par ailleurs l'attribut clear permet de faire en sorte que deux images float qui se suivent soient l'une sous l'autre plutôt que côte à côte. Pour ce faire, la syntaxe dépend de la solution :
  1. tu écris ""<img style="float: left; clear: left;" src="http://claire.pouteau.free.fr/Regard2.jpg" alt=" Regard2.jpg" />"" dans le texte édité pour placer ton image à gauche
  2. tu ajoute dans le fichier CSS :
  3. img {
    • float: left;
    • clear: left;
  4. }
  5. pour placer toutes les images à gauche du texte
  6. Enfin la solution mixte fait appel à une classe générique (pour laquelle je milite pour que ce soit dans Wikini dès le départ). Dans le fichier CSS tu mets :
  7. .left {
    • float: left;
    • clear: left;
  8. }
  9. .right {
    • float: right;
    • clear: right;
  10. }
  11. Il te faut alors entrer le code Html suivant dans ton texte pour chaque image à placer à côté du texte :
    • ""<img class="left" src="http://claire.pouteau.free.fr/Regard2.jpg" alt=" Regard2.jpg" />""
  12. ou
    • ""<img class="right" src="http://claire.pouteau.free.fr/Regard2.jpg" alt=" Regard2.jpg" />""
  13. L'avantage est que tu peux ajouter facilement d'autres attributs dans le fichier CSS, comme par exemple des marges à droite ou à gauche : margin-left: 1em; ou margin-right: 1em; et cela seulement pour ces images placées à droite ou à gauche du texte...

15/06/2005 -- JmPhilippe

réponse 7 : Cooooooool bon je dois t'avouer que j'obte pour le plus simple : le code Html me va très bien car il permet de placer directement mes images où je veux.... en adaptant le texte (voir sur http://claire.pouteau.free.fr/wikini/wakka.php?wiki=PagePrincipale) euh pourtant des petis soucis se révèlent : comment faire pour centrer une image (j'ai essayé avec center et middle ben ça marche pas on dirait ???), de plus je ne sais pas comment espacer un chouillat mon texte qui cette fois s'adpate et même se colle à mon image ??? (et comment reduire les pixels si tu sais ?)

....enfin si tu as un truc pour pouvoir centrer mes titres en codes Html j'en serai enchantée !!!

Merci boukouuuuuu

Clairette sous le pluie hi ! :-) le 15 juin 2005

réponse 8 : tout le plaisir est pour moi !
Bon pour les titres, facile, du moins si c'est bien ce que je pense... Dans le fichier wakka.css, tu ajoutes :
h1 {
}
Et ça centre tous les plus gros titres (de niveau 1), les autres s'appellent h2, h3, ..., jusqu'à h5, tu vois donc ce qu'il faut faire. Tu peux tous les mettre sur la même ligne si tu veux tous les centrer :
h1, h2, h3, h4, h5 {
}

Pour espacer le texte et les images, ce sont les propriétés margin, margin-left, margin-right, etc. Par exemple pour réserver la largeur d'un caractère sur la gauche d'une image : margin-left: 1em;.

Centrer une image... C'est bien plus compliqué. De mémoire, il faut à la fois mettre un text-align: center; qui doit marcher sur les IE (Internet Explorer) et un margin: 0.5em auto; pour les autres (0.5em étant bien sûr modifiable, mais pas auto). En plus il faut que l'image ne soit plus dans le texte, ce qui se fait avec display: block;.

 Regard2.jpg

Voilà voilà... Bon je vais essayer de transférer ces astuces de mise en page ailleurs dès que j'aurai un peu de temps.

-- JmPhilippe

réponse 9 Merciiiiiiiiiii boukouuuuu, j'ai réussi à centrer mes images, j'ai modifié mon wakka.css, mais ce soir impossible de me connecter avec mon GFTP (je ne sais pas trop pourquoi alors que j'ai toujours réussi avant là il me dit : "Ne peut se connecter à perso50-g.free.fr : Connexion refusée", je ne sais pas trop ce que ça veut dire ??? je retenterai demain.... afin d'essayer mon nouveau wakka.css avec h1 modifié et j'ai ajouté : margin-left: 1em; comme je ne savais pas où je l'ai mis au début avant tout les trucs sur margin ??? on verra.... voilouuuuuu cy tou,t merci encore pour toutes ces petites modifs qui sont les bienvenues,

autres questions : peut-on modifier aussi la taile des images avec ce système d'Html ? et mettre un cadre ?

@ pluuuuuuuuuuuuuch

Clairette du 16 juin, 22h59 :-)

Bon mon gFTP re-marche mes titres h1 sont au centre coooooool ....en revanche le truc des marges ne marche pas ... sans doute ne l'ai-je pas mis où il fallait dans le fichier wakka.css ?? euh comment faire pour ajouter du texte à l'image (genre au dessus et en dessous) lorsqu'elle est à droite par exmple Compagnie (au-dessus de l'image) titre8.jpgThéâtre et Marionnette (en dessous)

Clairette du 17 juin, 13h01 :-?



Commentaires [Cacher commentaires/formulaire]