rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

CSS positionnement image

Posté par Jérémy, le vendredi 23 novembre 2007 à 16:52:00
Bonjour,

Je souhaite positionner une image contourner par du texte dans un calque.
J'arrive grâce à l'attribut "float" à la positionner en haut à droite ou à gauche.

En revanche je n'arrive pas à la positionner en bas du calque.
C'est à dire que mon image soit "posée" sur la bordure inférieure du calque.

Merci de votre aide précieuse...
Jérémy Martin
Configuration: Windows XP
Firefox 2.0.0.9
Répondre à Jérémy  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
pashmina, le vendredi 23 novembre 2007 à 17:45:51
t'as essayer avec position:absolute et position:relative?
Qui vole un boeuf est vachement costaud
   
Répondre à pashmina

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le vendredi 23 novembre 2007 à 19:16:36
Bonjour,

Montre-nous comment tu fais.
L'adresse d'une page ?
Un peu de code ?

--
   
Répondre à Gihef

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Jérémy, le vendredi 23 novembre 2007 à 20:07:19
<div id="texte">
<%=sTexte%> /* texte issu de la base de données qui comprend une vingtaine de lignes */
<img style="float:left; margin:5px" src="mon_image.jpg">
</div>

Ce qui à pour effet de placer une image en haut à gauche du calque (div) le texte s'inscrivant sur la droite de l'image puis en dessous.

Je souhaiterais trouver le code qui me permettra d'afficher mon image en bas à gauche du calque, le texte s'inscrivant d'abord au dessus de l'image puis se poursuivant sur sa droite.
   
Répondre à Jérémy

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Abstranik, le vendredi 23 novembre 2007 à 21:47:34
Aucune idee, je peux te dire ce qui ne marcherait pas ^^

le fait que tu utilises un float left, ca place ton image en haut a gauche, si tu utilisais un float right, il te la placerait en haut a droite.
ca c'est les deux altenatives qui fonctionnent.

Par contre le fait d'utiliser des absolutes, ca ne fonctionnerait pas plus car le texte ne saurait pas qu'il doit s'appuyer sur l'image.

donc en ce qui conerne le bas... aucune idee desole.
   
Répondre à Abstranik

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le vendredi 23 novembre 2007 à 22:48:57
Bon, ça on sait pas faire.

Mais on peut essayer de trouver des adaptations aléatoires.
L'image dans le texte ou dans un paragraphe délimité.
Il faut de toute façon calculer la taille du texte du bas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #b0c4de;
      }
    .conteneur {
      position: relative;
      margin: 0 auto;
      width: 760px;
      text-align: justify;
      background-color: #f0f8ff;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      }
    .generated {
      clear:left;
      font-size:80%;
      text-align:right;
      margin:1em;
      }
    img {
      float:left;
      margin:5px;
      }
    p {
      margin : 0;
      }
    .code {
      font-family : monospace;
      color : #0b0;
      font-weight : bold;
      }
    </style>
</head>
<body>
  <div class="conteneur">
    <div class="texte"><span class="code"><div></span>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vehicula. Pellentesque elit. Sed lorem velit, fermentum vitae, rhoncus elementum, congue eget, quam. Aliquam erat volutpat. Sed mauris est, mattis sit amet, elementum sit amet, tristique id, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam dui. Cras vestibulum tortor sed tortor. Donec diam.
      <br>
      Curabitur lobortis massa. Etiam dapibus sollicitudin elit. In convallis ante ut justo. In eget sapien eu est iaculis tristique. Integer eu pede. Curabitur porttitor, tellus non feugiat elementum, ligula sapien gravida leo, id accumsan neque ipsum a lacus. <span class="code"><img></span><img src="imgfd.gif" width="100" height="100" alt="img"><span class="code"></img></span>
      Ut nec mi. Aliquam erat volutpat. Nulla semper ultricies tortor. Nulla elit nibh, gravida placerat, venenatis sed, placerat vel, metus. Aliquam facilisis turpis et risus. Maecenas pharetra sem nec turpis. Donec venenatis vulputate turpis. Quisque at pede nec pede consectetuer rhoncus. Sed tortor dolor, cursus sit amet, suscipit tincidunt, aliquet at, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;<span class="code"></div></span>
    </div>
      <p class="generated">Generated 2 paragraphs, 222 words, 1534 bytes of <a href="http://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a></p>
  </div>
<br>
  <div class="conteneur">
    <div class="texte">
      <p><span class="code"><p></span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vehicula. Pellentesque elit. Sed lorem velit, fermentum vitae, rhoncus elementum, congue eget, quam. Aliquam erat volutpat. Sed mauris est, mattis sit amet, elementum sit amet, tristique id, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam dui. Cras vestibulum tortor sed tortor. Donec diam.<span class="code"></p></span>
      </p>
      <p><span class="code"><p></span>
      Curabitur lobortis massa. Etiam dapibus sollicitudin elit. In convallis ante ut justo. In eget sapien eu est iaculis tristique. Integer eu pede. Curabitur porttitor, tellus non feugiat elementum, ligula sapien gravida leo, id accumsan neque ipsum a lacus. Ut nec mi. <span class="code"></p></span>
      </p>
      <p><span class="code"><p></span>
      <span class="code"><img></span><img src="imgfd.gif" width="100" height="100" alt="img"><span class="code"></img></span>
      Aliquam erat volutpat. Nulla semper ultricies tortor. Nulla elit nibh, gravida placerat, venenatis sed, placerat vel, metus. Aliquam facilisis turpis et risus. Maecenas pharetra sem nec turpis. Donec venenatis vulputate turpis. Quisque at pede nec pede consectetuer rhoncus. Sed tortor dolor, cursus sit amet, suscipit tincidunt, aliquet at, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;<span class="code"></p></span>
      </p>
    </div>
      <p class="generated">Generated 2 paragraphs, 222 words, 1534 bytes of <a href="http://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a></p>
  </div>
</body>
</html>

--
   
Répondre à Gihef

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Jérémy, le samedi 24 novembre 2007 à 16:52:42
Pas mal en effet, mais comme tu dis, il faut calculer la taille du texte.

Or mon souci, c'est que ce dernier est variable tout comme la taille de mon image.
En fait ma page est un squelette qui affiche une image contournée par un texte.
Image et texte provenant tous deux de la base de données et donc de tailles variables.

Y'aurait-il alors un moyen de calculer la ligne à partir de laquelle il faut que j'insère mon image ?

Données du problème :
Largeur du calque (div) : 700px
Hauteur et Largeur de l'image variables : à récupérer par une fonction ASP que je ne connais pas
Nombre de caractères du texte : à récupérer par une fonction ASP que je ne connais pas

Problème n°1 : calculer la largeur restante pour le texte : 700 - largeur image
Problème n°2 : calculer le nombre de ligne de texte correspondant à la hauteur de l'image
Problème n°3 : évaluer le nombre de caractères qui va s'inscrire à droite de l'image (on connaît la largeur en pixel et la hauteur en ligne de ce rectangle).

Le tout programmé en ASP !

Si quelqu'un à la solution à mon problème : je suis preneur !
   
Répondre à Jérémy
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Image Resizer 1Image Resizer - Petit utilitaire (PowerToy) basique, très simple, permettant de réduire la taille d'une image, dans le but, notamment, de...Catégorie: Graphisme
Licence: Freeware/gratuit
Télécharger VSO Image Resizer 2.0.1.9VSO Image Resizer - Le logiciel VSO Image Resizer organise vos photos en réduisant leur résolution et en les déplaçant facilement au sein de...Catégorie: Graphisme
Licence: Freeware/gratuit
Télécharger ImageWell 3.5.3ImageWell - ImageWell n'est pas à proprement parler un logiciel de Retouche photo. Il permet plutôt de préparer des images pour le...Catégorie: Retouche photo
Licence: Freeware/gratuit
Télécharger ImagePlay 0.3ImagePlay - Si vous n'êtes pas un pro dans la manipulation des brushes et autres outils de retouche d'images, adoptez ImagePlay et voyez...Catégorie: Retouche photo
Licence: Open Source
Plus de logiciels gratuits sur « [CSS] positionnement d'une image »