Journal probleme CSS

Posté par  .
Étiquettes : aucune
0
30
oct.
2003
Cher journal,
Je souhaite faire un truc pas spécialement compliqué en CSS, mais j'y arrive pas. Je fais donc appel a ta grande connaissance.
Je souhaite avoir une image à gauche et du texte en vis à vis, et en dessous, le contraire, le texte à gauche et l'image en vis à vis. Les tailles des images pouvant varier, je ne peux pas faire des positions définient en pixels, et puis c'est pas terible de toute facon je trouve ..

code xhtml :
< div id="presentation_img1" >
< img src="a.jpg" alt="affiche" / >
< /div >
< div id="presentation_txt1" >
< p >blablaba[...]fig< /p >
< /div >

< div id="presentation_img2" >
<img src="b.jpg" alt="affiche2" / >
< /div >
< div id="presentation_txt2" >
< p >bdsgsdg[...]hdshf< /p >
< /div >

code css :
#presentation_txt1 {
float: right;
}

#presentation_img1 {
float: left;
}

#presentation_txt2 {
}

#presentation_img2 {
float: right;
}



Il suffit que j'ajoute un caractere invalide( #,%,ù,\...) avant #presentation_img2 pour que la presentation soit correcte (sous Mozilla, Konqueror, Epiphany), sinon la derniere image se place tout en bas, le texte de presentation 2 au dessus d'elle.


Merci de votre aide

  • # Re: probleme CSS

    Posté par  . Évalué à 4.

    A mon avis déjà une simplification de la structure:

    <div class="img1" >
    <img src="a.jpg" alt="affiche" />
    <p>blablaba[...]fig</p>
    </div>

    <div class="img2">
    <img src="b.jpg" alt="affiche2"/>
    <p>bdsgsdg[...]hdshf</p>
    </div>

    div { width:200px; background-color: green; margin: 10px; }
    .img1 p { display: inline; }
    .img1 img { float: left; }
    .img2 {text-align: right; }
    .img2 p { display: inline; }
    .img2 img { float: right; }

    • [^] # Re: probleme CSS

      Posté par  . Évalué à 1.

      Merci beaucoup, ca marche.

      Mais bon je ne comprends pas pourquoi le fait de rajouter ou pas un caractere invalide faisait que cela marchait ou pas.

  • # Re: probleme CSS

    Posté par  (site web personnel) . Évalué à 2.

    Peut-être ajouter un truc dans le genre :
    < div id="presentation_img1">
    ...
    </div>
    <hr class="vide" />
    < div id="presentation_img2">
    ...
    </div>

    avec le style suivant pour hr
    hr.vide{
    clear:both;
    visibility:hidden;
    }

    Ca forcera à "séparer" les deux divs (pas de chevauchement).

    ++

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.