[ -RESOLU- ] Classe pour les images.

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [ -RESOLU- ] Classe pour les images.

Beral2

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

Publicité

masklinn

í dag viðrar vel til loftárása

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

Beral2

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.

masklinn

í dag viðrar vel til loftárása

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

Beral2

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

Beral2

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

FORUM HardWare.fr

Programmation

HTML/CSS

[ -RESOLU- ] Classe pour les images.

Sujets relatifs
[VB.NET] [ Resolu ]COnvertir Dataview en string	Comment récuperer $_GET['machin'] en $machin ? [résolu]
[résolu]probleme avec $_FILES lors d'un upload	[résolu]Overflow et firefox
[resolu][html]input type=file different entre ie et firefox !!	probleme avec sort [resolu]
[résolu]post ne s'affiche qu'apres en avoir posté un autre...	GD2 sur OVH et images noires
[Résolu] Séparateur de champ format CSV	[PHP] Répartir des petites images sur la largeur de l'écran
Plus de sujets relatifs à : [ -RESOLU- ] Classe pour les images.

Page générée en 0.046 secondes