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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] plaçer une image en bas à gauche d'une div ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] plaçer une image en bas à gauche d'une div ?

n°520442
Gnub
Posté le 22-09-2003 à 15:33:51  profilanswer
 

Bonjour !
 
Excusez ma newbitude, j'ai du mal à intégrer le positionnement en css :/
 
J'ai doc une div, dont la hauteur varie en fonction du texte qu'elle contient ;  et j'aimerai qu'une image vienne se coller à l'extérieur de cette div, en bas à gauche.  
 

Code :
  1. ________
  2.         |bla   |
  3.         |bla   |
  4.         |bla   |
  5.         |bla   |
  6.      ___|bla   |
  7.     |img|bla   |
  8.     |___|______|


 
mon problème c'est que je n'arrive pas à faire en sorte que la div de gauche adopte la même hauteur que celle de droite. Avec mon code la div de gauche prends la hauteur de mon image... que dois-je modifier pour arranger ça ? voici mon code :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.   <title>Test</title>
  6.   <style>
  7.   div.conteneur {
  8.   width : 100%;
  9.   }
  10.   div.gauche {
  11.    position : absolute;
  12.    left : 0px;
  13.    width : 20%;
  14.    height : 100%;
  15.    background-color : #EEAA22;
  16.    vertical-align : bottom;
  17.   }
  18.   div.droite {
  19.    position : absolute;
  20.    left : 20%;
  21.    width : 40%;
  22.    background-color : #CCEEBB;
  23.   }
  24.  
  25.   img.icon {
  26.    float : right;
  27.    height : 50px;
  28.    width : 50px;
  29.   }
  30.   </style>
  31. </head>
  32. <body>
  33.   <div class="conteneur">
  34.    <div class="gauche">
  35.     <img class="icon" src="icon.gif" alt="icone" />
  36.    </div>
  37.    <div class="droite">
  38.    bla bla bla <br />
  39.    bla bla bla <br />
  40.    bla bla bla <br />
  41.    bla bla bla <br />
  42.    bla bla bla <br />
  43.    bla bla bla
  44.    </div>
  45.   </div>
  46. </body>
  47. </html>


 
Merci de votre aide :)


Message édité par Gnub le 22-09-2003 à 15:49:35
mood
Publicité
Posté le 22-09-2003 à 15:33:51  profilanswer
 

n°520451
fastclemmy
(re-)Dictateur en plastique
Posté le 22-09-2003 à 15:51:46  profilanswer
 

Moi je mettrais tout dans le même <div> avec un backround position en bottom left
http://www.w3schools.com/css/pr_ba [...] sition.asp
 
Un petit coup de padding-left pour que ton texte ne bouffe pas sur le background.

n°520470
Gnub
Posté le 22-09-2003 à 16:08:08  profilanswer
 

merci beaucoup, ça marche parfaitement !
le seul inconvénient, c'est que je n'ai pas la bordure de la div entre l'image et le texte, mais ce n'est pas très grave.
 
Un grand merci ! :)


Message édité par Gnub le 22-09-2003 à 16:08:25

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

  [CSS] plaçer une image en bas à gauche d'une div ?

 

Sujets relatifs
[CSS ] :: Mise en page pour l'impression[HTML] je m'arrache les cheveux avec une CSS !!
Hack CSS pour @import ?Passer mon site en XHTML + CSS : Petits problèmes
[CSS] trois colonnes dont une avec des borduresRollover sur une seule image (avec effet d'ombre)
Un rollover mais avec une seule image (ajout de l'ombre)[PHP] insérer une image dans MySql
[RÉSOLU] Récupérer attributs définis par CSS externe via JavaScript ?[ PHP ] PHP et Feuille de Style CSS
Plus de sujets relatifs à : [CSS] plaçer une image en bas à gauche d'une div ?


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