CSS : positionner une image ou un bloc en bas d'un autre bloc

CSS : positionner une image ou un bloc en bas d'un autre bloc - HTML/CSS - Programmation

Marsh Posté le 30-09-2005 à 12:10:14    

Décidement.. j'ai toujours du mal avec les CSS... je comprends pas !!! ya toujours un truc qui cloche !
 
j'ai des blocs imbriqués...
 
<div id="conteneur">
   <div id="outils1">
      <div id="bouton_option"><img src="otpion.gif" /></div>
   </div>
</div>
 
(à peu de chose près)
 
je voudrais que mon bloc "bouton_option" se place en bas de mon bloc "outils" que j'ai fixé à height:150px...
 
je fais donc :
 
#bouton_options    {
 position:absolute;
             float:left;
             bottom:0;
}
 
 
... le probleme c'est que le btn option se place tout en bas de "conteneur" et pas de son parent "outils"
 
... relou les CSS !!!!


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 12:10:14   

Reply

Marsh Posté le 30-09-2005 à 12:49:40    

Mais nan pas relou. Si t'y arrives pas, c'est que tu n'as pas appris ta leçon :o
 
Un élément, en position absolue, se positionne par rapport au premier ancêtre qui est en position absolue, relative ou fixed.
 
Et comme ton outils1 est en position static, alors forcément bouton_option ne va pas se positionner par rapport à outils1.
 
solution :

#outils1 {
  position: relative;
}

Reply

Marsh Posté le 30-09-2005 à 12:50:19    

Ensuite, float: left et position absolue, je sais pas si ça fait un bon mélange [:johneh]

Reply

Marsh Posté le 30-09-2005 à 13:02:17    

werk !!! un jour je comprendrai comment ça marche ! lol !
j'avoue que les CSS me posent encore des gros problemes!


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 13:30:04    

Probleme suivant...
 
j'ai donc ajouté un autre div que je voudrais mettre en dessous du conteneur
 
<div id="conteneur">  
   <div id="outils1">  
      <div id="bouton_option"><img src="otpion.gif" /></div>  
   </div>  
</div>
<div id="options" class="menu">...</div>
 
... le probleme c'est que tout se superpose
 

Code :
  1. *.menu    {
  2. background-color: #71AFC7;
  3. color: #FFFFFF;
  4. position:relative;
  5. border: 2px solid #71AFC7;
  6. }


 
 :sweat:


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 13:43:12    

Si tu pouvais mettre ta page quelque part d'accessible, histoire de voir...

Reply

Marsh Posté le 30-09-2005 à 14:21:50    

je vais faire une page temporaire pour montrer le code...


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 14:28:29    

voila :
 
http://clonecopy.net/php/temp/


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 14:29:54    

Où est le bug ?

Reply

Marsh Posté le 30-09-2005 à 14:32:54    

avant d'ajouter des DIV a droite et a gauche (donc penser CSS) pense d'abord a faire du nettoyage dans ton code, c'est un bordel monstrueux

Reply

Marsh Posté le 30-09-2005 à 14:32:54   

Reply

Marsh Posté le 30-09-2005 à 14:36:22    

quand tu cliques sur l'onglet "options" en bas


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 14:41:22    

gatsusat a écrit :

avant d'ajouter des DIV a droite et a gauche (donc penser CSS) pense d'abord a faire du nettoyage dans ton code, c'est un bordel monstrueux


bah là deja j'ai abregé une page.. donc ya peut etre des cases en trop... (ce n'est pas la page d'origine)
 d'autre part je m'efforce à soigner le code PHP.. mais quand s'est interpreté... ya souvent des blancs qui s'interposent dans le code HTML...  donc ça mets un peu de desordre !


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 14:52:29    

j'ai nettoyé un peu le code là...


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 15:36:53    

Alors j'ai trouvé mon probleme... maintenant j'en ai d'autres (ça continue)...  
 
sur FF les champs select se chevauchent...
http://www.clonecopy.net/freed/screen_ff.jpg
 
sur IE... c'est n'importe quoi...
http://www.clonecopy.net/freed/screen_ie.jpg
 
 :sweat:  :sweat:  :sweat:


---------------
Freed102
Reply

Marsh Posté le 30-09-2005 à 15:40:19    

T'aurais pas mis des floats ou des trucs comme ça ?

Reply

Marsh Posté le 30-09-2005 à 16:27:47    

bah j'en avais mis avec le tag label.. mais bon.. enfin j'ai corrigé ça a peu pres...
 
maintenant ya un truc que j'ai pas capté... comment on fait pour qu'un bloc prenne toute la ligne sans se poser par dessus ou en dessous d'autres éléments ? j'ai mis des display:block .. mais j'ai toujours des trucs qui viennent se mettre en dessous
http://www.clonecopy.net/freed/screen2_ff.jpg


Message édité par freed102 le 30-09-2005 à 16:29:34

---------------
Freed102
Reply

Marsh Posté le 03-10-2005 à 16:55:28    

toujours pas d'idée par rapport à mes div qui se chevauchent ?


---------------
Freed102
Reply

Marsh Posté le 05-10-2005 à 11:28:30    

bon j'ai reussi à regler ce probleme de chevauchement de blocs en mettant un des div parents en taille fixée (en hauteur).. le problem c que quand son contenu est moins important... bah ça fait du blanc !! (je comprends pas pourquoi un div ne s'agrandit pas toujours en fonction de son contenu... j'ai du encore louper un épisode !!!!)
 
deuxieme point pas tres clair... j'ai voulu changer le DTD de ma page (passer de XHTML Strict à XHTML transitional) et là ça me change ma mise en page !... c'est normal ?
 
dernier truc.. c 'est concernant le sujet principal de ce topic.. j'ai toujours des problemes à caler mon image en bas d'un bloc... comment je peux faire ça ??? http://clonecopy.net/php/temp/index.php
 


---------------
Freed102
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed