float, clear, affichage du taxte a droite des images et superposition (Créer un compte)

  • Statut : non résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • #449802
    ecostyle
    Participant
    Initié WordPress
    15 contributions

    Bonjour,

    j’utilise la derniere version de WP disponible en téléchargement sur ce site, donc la 2.xx

    j’espere ne pas me tromper de catégorie pour poster !

    voic mon sitte:

    http://www.ecostyle.fr

    voici mon probleme :

    1. je veux que mon texte apparaisse a droite de mes images. ca c’est ok, j’ai mis la balise float:left dans mon CSS mais je suis un débutant alors : l’ai-je bien placé ? (je l’ai mis au début de mon css (partie général, dans la partie « page » et aussi apres « content » bref un peu partout pour etre sur qu’elle sera pris en comtpe !!!)

    pouvez-vous me dire ou ce place la balise float ? (dans la feuille de style évidement MAIS OU , A QUELLE LIGNE ?

    2. j’ai tuiliser la fonction CLEAR pour que, sur ma première page, les post ce suivent correctement, ca ok, probleme: quand on lis la suite d’un post (en cliquant sur les trois petit point , read more) la fonction CLEAR ne joue plus sont role… faudrait-il que je la mette dans mon fichier page.php ? si oui comment ? pourriez vous me dire exactement ce qu’il faut que j’écrive et a quelle ligne ?

    3. il arrive que les images de la fin d’un post dépassent sur le menu du bas. quelle balise me permettra de résoudre ce probleme ?

    mercid ‘avance puor votre aide ! je commence par faire un overdose de modif, upload sur ftp, rechargement de page, constatation que ca par en coui… !

    a tres bientot

    #587053
    Oo
    Membre
    Maître WordPress
    2484 contributions

    Bonjour Ecostyle,

    Concernant le 1 : Veux tu que le texte soit affiché comme ceci ? Le texte sur le coté des images ?

    Pour cela, c’est du CSS. Tu peux créer des classes ou bien modifier une existante, comme ceci :

    .imgLeft { float : left; border : 1px solid #363430; padding: 5px; margin: 10px}
    .imgRight { float : right; border : 1px solid #363430; padding: 5px; margin: 10px}
    .imgCenter { text-align: center; display: block; border : 1px solid #363430; padding: 5px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;}

    Il te suffira ensuite d’appeller cette balise en entrant :

    <img class="imgRight" alt="Titredelaphoto" src="http://URLdetonimage.jpg">

    Concernant le 2 : Malheureusement, je ne peux t’aider !

    Concernant le 3 : Pour cela, 2 astuces ! Soit tu as un texte plus long ! Soit tu reduit la taille de la photo et tu utilises le plug-in LightboxJS

    Tu auras le même rendu que sur mon site ! Quand tu clique la photo s’ouvre !

    Oo

    #587054
    Rod
    Membre
    Maître WordPress
    744 contributions

    Pour 2, il y a une astuce …. mais avant, corrige ton code.

    p align=justify …. ouh la mais on utilisait ca a l’epoque de IE4 !!!

    ne plus utiliser align= dans son code xhtml … c mieux 🙂

    et pour l’astuce, la voici, que j’ai adaptée à ton code

    .entry p { content: « . »; display: block; height: 0; clear: both; visibility: hidden; }
    /* Hack IE-mac */ * html .entry p {height: 1%;} .entry p { display: block; } /* End Hack IE-mac */

    #587055
    ecostyle
    Participant
    Initié WordPress
    15 contributions

    merci, lightbos et exactement ce que je cherchais !
    juste une petite question dont je pense connaitre la réponse :

    toutes les images que j’ai déja mis sur mon site ne s’ouvriront pas de la sorte je supppose, il faut que je les remette dans chacun de mes post en utilisant lightbox ? je suppose que oui !

    la solution que tu m’a apporté a la question 2 est déja mieux que ce que j’ai pu faire jusq’uà présent mais quand je regarde le post en entier, apres avoir cliquer sur ‘readmore’ (les trois petit point chez moi) il y a toujours un décalage, c’est a dire que le flux continu sous le texte aligner a droite… je suppose donc plusieurs chose :

    il me manque une balise quelque part indiquer que le texte qui suit est un paragraphe (mais est-ce vraiment un probleme, je crois pas)

    il faudrait que je modifier le fichier « page.php » ? en y mettant les .imagLeft que tu me propose ?

    j’essaie lighbox de suite,

    encore millemerci pour ta réponse si rapide !

    (luigi)

    #587056
    ecostyle
    Participant
    Initié WordPress
    15 contributions

    petite rmarque, pour lightbox, j’ai vu qu’il me suffit d’insérer rel= »lightbox » dans chacun des liens de mes images.

    #587057
    ecostyle
    Participant
    Initié WordPress
    15 contributions

    je crois que je vais laisser tomber la balise float car elle me pose trop de problemesssss !

    je vais contourner le probleme par l’utilisation de tableaux !

    connaitrais tu la fonction a mettre dans le fichier php de l’éditeur de texte : advanced-wysiwyg.php pour insérer des tableau dans un post, changer la taille des cellules et enlever les amrge (enf ait pour que le tableau soit transparent !!!

    mercid ‘avance

    #587058
    xavier
    Participant
    Maître WordPress
    2124 contributions

    Quels sont les problèmes provoqués par float ?

    P’tet que si tu faisais en sorte que ton code HTML valide, tu y verrais plus clair…
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fecolyfe.clicksite.fr%2F

    #587059
    Oo
    Membre
    Maître WordPress
    2484 contributions

    Pour le lightbox, j’utilise une miniature et une photo normal et voici le code !

    <a rel="lightbox" title="TITREDETAPHOTO" href="URL DE LA PHOTO TAILLE NORMAL"><img class="imgCenter" alt="TITREDETAPHOTO" src="URL DE LA MINIATURE"></a>

    Et voila tu obtiens cela : http://www.leblog2bubu.info/2006/12/20/jeu-des-1oo1-photos-80e-edition/

    Oo

    #587060
    ecostyle
    Participant
    Initié WordPress
    15 contributions

    pour répondre a xavier, le float me fait tou partir en cui.. enfin, je le manie mal et je ne veux plus faire l’apprentis sorcier.

    QUESTION : (pour ne pas dire probleme !)

    j’ai résolu mon probleme en utilisant un tableau que je créer sous frontpage et dont je modifie les caractérisque (largeur de colonne sous IE) hérésie !!!!me direz vous ! oui, mais c’est une solution ! MAIS (comme toujours !)

    pour info, mes tableau sont structuré comme suit :

    je cosntruit un tableau en deux colonnes, a droite, le texte et a gauche les images. pour que les images ne se collent pas toutes les unes aux autres, je divise cette collonne en plusieurs ligne, ce qui me permet de créer un espace entre les images. comme dis plus bas, j’insert la fonction read dans la cellulle du texte

    bien que mes posts soient comme je le souhaite (aller sur http://www.ecostyle.fr et cliquer sur red more (les trois petit points) la première page, comme vous pourrez le constater n’est pas tout a fait (hum hum, carrément pas !) comme je le souhaite, c’est a dire que (sur mon IE en tout cas) la page d’accueil fait environ 14000px et je ne me souviens pas du tout avoir modifer un valeur de la sorte ! kezako ? il se passe quoi ? c’est la fonction read qui coupe mon tableau ? (j’insert cette fonction dans la cellule du texte )

    cette immense largeur de page est apparue quand j’ai commencé à utiliser les tableaux…
    je reglerait leur alignement apres, je souhaite d’abord me concentrer sur cette largeur exésive. (ou bien est-ce un probleme plus global, l’alinement des tableaux ayant un lilen avec la largeur de page et vise versa ???)

    pour résumer, je nage avec une paralysie partielle (pas de connaissance) donc, je tourne en rond !

    j’espere que ce post, un peu long, vous donneera toutes les données pour m’aider, et comme beaucoup de personnes sont intéressées par ce skin, a ce que j’ai pu lire sur le site du créateur, et que vous etes intéressés de l’avoir, mais a ma sauce, ca peut s’arranger… (tout ce paie !)

    alors BANZAÏ et méfiez vous des …

    #587061
    ecostyle
    Participant
    Initié WordPress
    15 contributions

    je crois comprendre d’ou vient le probleme !

    j’ai regardé tout en bas a droite de ma page, c’est a dire a des kilometres de ma page ! j’y ai retrouvé les deux boutons (comment) , isolé, comme deux con, l’un sur l’autres….

    je bosse dessus

    #587062
    ecostyle
    Participant
    Initié WordPress
    15 contributions

    heu, dans mon style .css, je ne vois pas bien ce qui permet de dire a ces deux foutu bouton, tu te pose la, et pas ailleur !

    voici la partie css, qui concerne le positionnement (enfin je coirs de « entry » (donc des commentaires, a moins que je fasse une erreur de traduction!)

    .entrycomments {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0.9em;
    letter-spacing: -1px;
    }

    .entrycomments a {
    text-align: center;
    display: block;
    padding: 0.3em;
    line-height: 1.2em;
    outline: none;
    }

    .entrycomments a:link, .entrycomments a:visited {
    color: #4f4f4f;
    border: 1px solid #4f4f4f;
    }

    .entrycomments a:hover, .entrycomments a:active {
    color: #95A566;
    border: 1px solid #5f5f5f;
    }

    .entry {
    padding-bottom: 1em;
    }

    .entry a:link, .entry a:active, .entry a:visited {
    color: #B2C977;
    }

    .entry a:hover {
    color: #73804E;
    }

    .entry h3 {
    padding-left: 1.6em;
    background: url(‘images/entryleaf.gif’) no-repeat top left;
    margin-top: 1.5em
    }

    .entry ul {
    list-style-type: none;
    }

    .entry li {
    width: 34.5em;
    }

    .entry ul li {
    background: url(‘images/li.gif’) no-repeat 0 0.4em;
    padding-left: 1.3em;
    margin-left: 3em;
    background-position-x:0; background-position-y:0.4em
    }

    .entry ol {
    margin: 0 0 0 5.5em;
    }

    .entry blockquote p {
    margin-left: 3em;
    width: 34em;
    color: #9f9f9f;
    }

    .entrymeta {
    font-size: 0.9em;
    margin: -2.2em 0 2.6em 0;
    text-transform: lowercase;
    }

    /* =comments

    MERCI !!!!!

    #587063
    bendydan
    Participant
    Initié WordPress
    29 contributions

    Salut,

    Un truc pas mal pour automatiser l’affichage des photos de style LightBox, c’est LightBox+. Je l’ai essayé, ça fonctionne très bien.

12 sujets de 1 à 12 (sur un total de 12)
  • Vous devez être connecté pour répondre à ce sujet.