28172 sujets

CSS et mise en forme, CSS3

[résolu] Cadres en css : au secours !

Bonjour

Je cherche à faire un truc peut-être assez compliqué mais qui marche "presque" :
j'ai des images de mêmes dimensions (certaines horizontales et d'autres verticales) que je veux entourer par un cadre "effet polaroid". Cet effet a été fait avec photoshop donc pour mon cas précis j'ai des images de cadres d'une dimension précise.

J'ai un javascript qui va regarder mes images et qui, si elles sont de cette dimension, va leur appliquer une classe CSS pour leur mettre le fameux cadre.

Ca marche, mais le problème c'est que mon texte autour de ces images part en vrille.

Je suis complètement paumé, j'ai besoin d'aide svp...

Voici à quoi ressemble ma page :
upload/24471-test.jpg

mon texte est structuré de la forme :

<p><a href="#" class="imagevp"><img src="xxx"/></a><br/>
Lorem Ipsum</p>
<p><a href="#" class="imagehp"><img src="xxx"/></a><br/>
Lorem Ipsum</p>


les classes sont donc appliquée en javascript, imagevp veut dire image verticale et imagehp horizontale, et ma feuille de style concernant ces 2 calques est :

.imagehp {
background:url('images/cadreh400x267.png') no-repeat scroll left top;
float:left;
width:451px;
height:311px;
padding-left:25px;
padding-top:15px;
}
.imagevp {
background:transparent url(images/cadrevp.png) no-repeat scroll left top;
float:left;
width:335px;
height:462px;
padding-left:38px;
padding-top:27px;
}


Mon problème crucial c'est que j'ai galéré à trouver les trucs à mettre dans les css pour que ca marche, et que dès que je modifie un truc plus rien ne va (le float, les padding, etc).

Merci de votre aide... Smiley confus
Modifié par laurent92 (20 Oct 2009 - 08:50)
j'ai du mal à l'expliquer avec des mots, c'est pour ca que j'ai mis une petite capture d'écran : il apparaît à côté de la première image, déborde à la fin sans revenir à la ligne, le texte qui est après la 2ème image commence au-dessus puis continue en-dessous, enfin c'est très bizarre.
Bonjour,

Si ton texte est sencé être sous les image uniquement (ce que le <br> semble indiqué) le float:left qui est appliqué aux liens est innutile et fait que le texte se met à côté de l'image.

Si le texte doit être à côté de l'image, il manque les CSS appliqués aux autres éléments pour pouvoir juger (peut-être regarder du côté du dépassement des flottants pour <p>).
Bonjour,

En fait oui il est sensé être sous les images mais bon s'il ne l'est pas, à la rigueur... Smiley smile
Le problème aussi c'est que si je vire mon float:left toute ma mise en page fout le camp (bon je vais essayer en virant le float:left).
Ceci dit j'aurais bien (éventuellement) aimé que le texte "entoure" l'image, donc le float le me dérange pas plus que ça (c'est un effet non voulu mais pas indésirable non plus, quoi).

Par contre, le "côté dépassement des flottants pour <p>" m'intrigue ^^
sachant qu'à priori je ne pourrais pas y toucher puisque je ne peux pas les trouver en javascript et que je ne voudrais pas qu'une manip css touche tous les <p> de ma page ? A moins que ce soit "non intrusif" ?

Merci
Une page en ligne nous permettrais de voir le contexte de ton problème, car c'est certainement là qu'est le problème.
essaye dappliquer display:block sur ton image et de virer le float,
Modifié par jayno (16 Oct 2009 - 16:02)
jayno a écrit :
essaye dappliquer display:block sur ton image et de virer le float,


Yes tu as absolument raison ca a marché ! Bon il me reste quelques petits problèmes de mise en page mais je vais régler ça... Merci beaucoup, quand je vois comment je me suis torturé la tête alors que c'était si simple...

Ceci dit, ça c'est la solution "simple" (je ne veux pas être méprisant, hein Smiley smile ), mais c'est vrai que j'aimerais bien quand même que le texte puisse "suivre" l'image donc avec un float...

Bon déjà je peux augmenter la place pour le texte en passant le width à 300, c'est vrai.
(Ca me fait penser que j'espère que vous connaissez tous Firebug pour Firefox, c'est un vrai régal pour changer du html/css directement en live).
laurent92 a écrit :


(Ca me fait penser que j'espère que vous connaissez tous Firebug pour Firefox, c'est un vrai régal pour changer du html/css directement en live).


cest exactement avec ca que jai vu ou était le probleme.

Je comprend pas, tu veux que le texte soit a coté ou sous l'image?
voilà un exemple typique de pourquoi je ne comprends pas pourquoi ca réagit comme ca Smiley smile

ma structure est donc 

<p><img>blabla</p>
<p><img>blabla2</p>
<p><img>blabla3</p>
<p><img>blabla4</p>


comme sur le dernier post ici http://www.leblogdebebe.fr/2009/10/18/post-anniversaire/

si je laisse ma feuille de style par défaut, ca va à peu près (enfin j'ai toujours les mêmes difficultés mais bon).

Si je passe ma classe CSS .imagevp (celle appliquée aux images verticales) avec un width à 300 au lieu de 335px, le texte qui était sous les 2 avant-dernières images n'est plus là : ces 2 images n'ont aucune légende, celles-ci sont passées à côté de l'image au-dessus !
Je ne comprends pas comment c'est possible alors que tout est séparé par des balises <p> ?
Modifié par laurent92 (19 Oct 2009 - 22:14)
laurent92 a écrit :
Ceci dit, ça c'est la solution "simple" (je ne veux pas être méprisant, hein Smiley smile ), mais c'est vrai que j'aimerais bien quand même que le texte puisse "suivre" l'image donc avec un float...

Vu la largeur de ta colonne de contenu, et la largeur de tes images (cadre compris), tu n'as tout simplement pas la place d'avoir ton image d'un côté (gauche ou droite), et le texte qui vient s'enrouler autour. C'est techniquement possible (il reste un cheveux de place), mais en termes de design ce serait juste une bonne grosse connerie.

Même pour tes images en portrait (267px de large), en virant complètement le cadre et en rajoutant un peu de marge entre l'image et le texte, on réquisitionne 280px de large sur 450px disponibles. Reste 170px pour le texte, ce qui fait une colonne très étroite, et donne un rendu catastrophique pour du texte justifié.
(Note en passant: tant que les navigateurs ne peuvent pas réaliser correctement et automatiquement des césures dans le texte en respectant les règles d'usage de la langue cible, le text-align:justify c'est le mal. Qu'on se le dise.)

Si tu avais un design qui se prêtait à la présences d'illustrations flottantes, je donnerais bien quelques conseils techniques à ce sujet. Ce n'est pas le cas, donc pour l'instant je m'en garde bien et mon seul conseil est: ne pas faire flotter ces images.
laurent92 a écrit :
ma structure est donc 
<p><img>blabla</p>
<p><img>blabla2</p>
<p><img>blabla3</p>
<p><img>blabla4</p>

Et il te faut:
<p class="illustration"><img></p>
<p>Du texte qui va bien.</p>
<p class="illustration"><img></p>
<p class="illustration"><img></p>
<p>Du texte qui va bien aussi.</p>
<p>Encore du texte, soyons fous.</p>
Et si le but est d'avoir une image avec une légende ayant une mise en forme particulière, on peut opter pour:
<p class="illus-with-legend">
  <img class="illustration" alt="" src="..." />
  <span class="legend">Ici ma légende</span>
</p>

Ainsi en CSS on peut cibler clairement le texte et lui appliquer un style (positionnement, mise en forme), cibler l'image elle-même, etc.
Si la légende peut être longue, voire sur plusieurs paragraphes, on préfèrera:
<div class="illus-with-legend">
  <img class="illustration" alt="" src="..." />
  <p class="legend">Ici ma légende.</p>
  <p class="legend">Et la suite.</p>
</div>

Problème: WordPress est tout de même limité (et prise de tête) pour la saisie de contenus HTML précis tels que ceux-ci.
c'est absolument clair Smiley smile
je modifie donc mon javascript pour modifier plutôt la structure de manière à avoir, comme tu m'as dit, un 
<p class="image"><img ></p><p>texte</p>
<p class="image"><img ></p><p>texte</p>


merci en tout cas de vos réponses à tous !
Sujet clos
Aller à