Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
648 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [ -RESOLU- ] Classe pour les images.

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[ -RESOLU- ] Classe pour les images.

n°1178085
Beral2
Posté le 17-08-2005 à 16:51:22  profilanswer
 

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é ?
 
http://img247.imageshack.us/img247/6046/alignementimages4kz.jpg
 
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 :
  1. <div id="grande_colonne">
  2.                 <a name="suc"></a>
  3.                 <h2>Standards : Success stories.</h2>
  4.                 <img src="images/visage.jpg" class="images_illustratives_a_gauche" alt="succes stories - the man listening" width="295" height="178">
  5.                 <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>
  6.                 <img src="images/airbus.bmp" class="images_illustratives_a_droite" alt="airbus cargo" width="120" height="109">
  7.                 <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>
  8.                 <img src="images/disables5.jpg" class="images_illustratives_a_gauche" alt="blind man at work" width="300" height="203">
  9.                 <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>
  10. </div>


 
 
Si vous avez une idée, merci.


Message édité par Beral2 le 17-08-2005 à 17:44:22
mood
Publicité
Posté le 17-08-2005 à 16:51:22  profilanswer
 

n°1178090
masklinn
í dag viðrar vel til loftárása
Posté le 17-08-2005 à 16:54:28  profilanswer
 

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, ...)


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1178115
Beral2
Posté le 17-08-2005 à 17:13:23  profilanswer
 

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

Code :
  1. .images_illustratives_a_gauche
  2. {
  3. margin: 4px 8px 4px 0px;
  4. border: 1px solid #96B1D8;
  5. float: left;
  6. }
  7. .images_illustratives_a_droite
  8. {
  9. margin: 4px 0px 4px 8px;
  10. border: 1px solid #96B1D8;
  11. float: right;
  12. }


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

n°1178124
masklinn
í dag viðrar vel til loftárása
Posté le 17-08-2005 à 17:21:52  profilanswer
 

Et en incluant les images dans les paragraphes?


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1178129
Beral2
Posté le 17-08-2005 à 17:24:44  profilanswer
 

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

n°1178133
Beral2
Posté le 17-08-2005 à 17:33:02  profilanswer
 

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 !
http://img141.imageshack.us/img141/3999/alignementimages21cc.jpg
 
Merci à toi.


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [ -RESOLU- ] Classe pour les images.

 

Sujets relatifs
[VB.NET] [ Resolu ]COnvertir Dataview en stringComment 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.


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR