[ -RESOLU- ] Classe pour les images.

Marsh Posté le 17-08-2005 à 16:51:22

Bonjour à tous,

Sémantiquement, je pense que je vais me faire déflagrer.
Le nom des classes CSS sera image_a_gauche et image_a_droite : je sais que le gauche/droite c'pas bien.

Mais je dois créer des classes pour qu'elles soient utilisées par des gens qui ne sont pas des "pros" du web (et c'est un euphémisme). L'image à gauche aura automatiquement (en plus d'un "border" etc) un "margin" à droite et inversement pour l'image à droite ; ce, pour que le texte ne "colle" pas à l'image. On pourrait faire un "margin" à gauche et à droite pour toutes les images mais s'il n'y en a pas besoin d'un côté, alors pourquoi le mettre (et en plus c'est pas très joli, décalage par rapport au texte).

Bon, si ça passe, ma question.
En fait, la question tient tjrs même si le droite/gauche disparaît.

Est-il possible, via CSS, de spécifier le fait qu'un texte doit continuer en dessous de l'image et pas à côté ?

En fait je voudrais que la 2ème image à gauche ainsi que son texte (commençant par "in 2003" ), passe "dessous" l'image à droite. Vous me suivez ?

Je vous colle le bout de HTML (la CSS n'a rien d'intéressant, un border et des margin).

Code :

<div id="grande_colonne">
<a name="suc"></a>
<h2>Standards : Success stories.</h2>
<img src="images/visage.jpg" class="images_illustratives_a_gauche" alt="succes stories - the man listening" width="295" height="178">
<p>The Global System for Mobile Communications (GSM) is the European digital standard for mobile communications: now, with about 70% of the world's market, it's the dominant mobile phone system worldwide. The first GSM specification was completed by ETSI (the European Telecommunications Standards Institute) in 1990. Thanks to roaming agreements between mobile phone operators, GSM phones are used by over a billion people across more than 200 countries. The success of GSM goes well beyond Europe's frontiers, and it is estimated that this has generated tens of thousands of jobs.</p>
<img src="images/airbus.bmp" class="images_illustratives_a_droite" alt="airbus cargo" width="120" height="109">
<p>When the new Airbus A 380 took off for its maiden flight on 27 April 2005, over 350 different European Standards were on board. Over 10,000 parts of the Superjumbo comply to European Standards: valves, rivets, screws, nuts and bolts, doors, landing gear, electronic parts etc...</p>
<img src="images/disables5.jpg" class="images_illustratives_a_gauche" alt="blind man at work" width="300" height="203">
<p>In 2003 (European year of people with disabilities) all three European standards organisations fully supported the 'Accessibility for All' campaign and published standards which take into account the needs of people with disabilities (Technical aids for disabled persons, Safety rules for the construction and installations of lifts, Adjustable beds and hoists for the transfer of disabled persons).</p>
</div>

Si vous avez une idée, merci.

Message édité par Beral2 le 17-08-2005 à 17:44:22

Reply

Marsh Posté le 17-08-2005 à 16:51:22

Reply

Marsh Posté le 17-08-2005 à 16:54:28

ben normalement il suffit de flotter les images (à droite ou à gauche) sans leur mettre de "clear" [:petrus75]

C'est le rôle initial des floats en fait, permettre ce genre de trucs avec les images, ce n'est qu'ensuite que ça a été détourné pour mettre en place des éléments plus complexes (menus, citations, ...)

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 17-08-2005 à 17:13:23

Désolé mais je ne m'en sors pas.

CSS

Code :

.images_illustratives_a_gauche
{
margin: 4px 8px 4px 0px;
border: 1px solid #96B1D8;
float: left;
}
.images_illustratives_a_droite
{
margin: 4px 0px 4px 8px;
border: 1px solid #96B1D8;
float: right;
}

Les float "alignent" mes images. A part cela, aucun effet sur le texte.

Reply

Marsh Posté le 17-08-2005 à 17:21:52

Et en incluant les images dans les paragraphes?

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 17-08-2005 à 17:24:44

J'avais essayé mais je viens de le refaire (par acquis de conscience), rien du tout.

Reply

Marsh Posté le 17-08-2005 à 17:33:02

Ok, j'ai trouvé :

1. Il faut effectivement mettre les images dans les paragraphes (sinon aucun texte n'est "à côté des images" ).
2. Il faut mettre un "clear: both" dans la balise <p> (pour le cas ici il suffit d'un "clear:right" mais pour que cela marche tt le temps...)

Et hop !

Merci à toi.

Message édité par Beral2 le 17-08-2005 à 17:40:36

Reply

[ -RESOLU- ] Classe pour les images.

Sujets relatifs:

Leave a Replay