barre d'outills

barre d'outills - HTML/CSS - Programmation

Marsh Posté le 06-06-2006 à 14:58:06    

Bonjour
Je voudrais faire une barre d'outils flottantes pour une page web. Mais la, plusieurs problemes apparaissent:
Comment faire un drag and drop de cette barre?
Et pour une rasion inconnue, ma barre, un div contenant 3 autres div, faitun retour a la ligne apres le 1° div:

Code :
  1. <div id="toolbar1" class="float_toolbar"> 
  2.             <div>
  3.                 <img src="tb_left.gif" alt="bord gauche" width="11" height="26">
  4.             </div>
  5.             <div id="icones1" class="menu_icone">
  6.                 <A href='javascript:ThemeWiz()' class="onrollover"><img src="adduser.png" alt="images1" title="image test 1" width="26" height="26"></A>
  7.                 <A href='javascript:ThemeWiz()' class="onrollover"><img src="filter2.png" alt="images2" title="image test 2" width="26" height="26"></A>
  8.                 <A href='javascript:ThemeWiz()' class="onrollover"><img src="layerbtn.png" alt="images3" title="image test 3" width="26" height="26"></A>
  9.             </div>
  10.             <div>
  11.                 <img src="tb_right.gif" alt="bord droit" width="11" height="26">
  12.             </div>
  13.                
  14.         </div>


 
Vous voyez pourquoi? merci d avance !!

Reply

Marsh Posté le 06-06-2006 à 14:58:06   

Reply

Marsh Posté le 06-06-2006 à 14:59:37    

Le div est par nature et par défaut un "block", donc il induit un retour à la ligne après lui.


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 06-06-2006 à 15:01:46    

Ben oui mais pourquoi uniquement apres le 1°, dans ce cas? Et puis j ai essayé en remplacant les div par des span, le resultats pas top non plus: les 1° et 3° div sont sur la meme ligne, la2° en dessous...

Reply

Marsh Posté le 06-06-2006 à 15:03:03    

Code :
  1. <div id="toolbar1" class="float_toolbar"> 
  2.                 <img src="tb_left.gif" alt="bord gauche" width="11" height="26" />
  3.                <ul id="icones1" class="menu_icone">
  4.                    <li><a href='javascript:ThemeWiz()' class="onrollover"><img src="adduser.png" alt="images1" title="image test 1" width="26" height="26"></a></li>
  5.                    <li><a href='javascript:ThemeWiz()' class="onrollover"><img src="filter2.png" alt="images2" title="image test 2" width="26" height="26"></a></li>
  6.                    <li><a href='javascript:ThemeWiz()' class="onrollover"><img src="layerbtn.png" alt="images3" title="image test 3" width="26" height="26"></a></li>
  7.                </ul>
  8.                <img src="tb_right.gif" alt="bord droit" width="11" height="26" />                 
  9.            </div>


 
Comme ça c'est mieux :D
 
 
Et met des float pour forcer à se caller :D
 
Sion pour le drag and drop google est ton ami :o
 
Mais c'est pas si facile ;) trouve une bonne biblio et op


Message édité par xtof_83 le 06-06-2006 à 15:03:47
Reply

Marsh Posté le 06-06-2006 à 15:04:41    

freddypap a écrit :

Ben oui mais pourquoi uniquement apres le 1°, dans ce cas? Et puis j ai essayé en remplacant les div par des span, le resultats pas top non plus: les 1° et 3° div sont sur la meme ligne, la2° en dessous...


Parce que la class du div 2(menu_icone) doit lui dire de se comporter autrement ...
 
Pour le reste, comme xtof, je pense pas que tu vas trouver cela aisé. Je te conseillerais donc d'approfondir tes connaissances html/css avant de te lancer dans le js...

Reply

Marsh Posté le 06-06-2006 à 15:07:26    

euh non, pas vraiment mieux, mes icones sont les une sous les autres (et décalé les une par rapport aux autres....mais comment t as fait ca lol !!!!) alors que je les voudrais sur la meme ligne...
En revanche, pour la suite, google est effectivement mon ami, je m'y met...

Reply

Marsh Posté le 06-06-2006 à 15:09:01    

Mon edit avait pas marché:
 
Donc met un float sur le premier :D, pour forcer les autres à ce placer sur sa ligne ;)

Reply

Sujets relatifs:

Leave a Replay

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