High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Problem avec position absolute + spoiler.

Dernière réponse le 6 jui 2008 à 18:06:54 nefty, le 3 jui 2008 à 16:52:46 
 Signaler ce message aux modérateurs

Bonjour tout le monde,

Alors j'ai deux problèmes avec mon site,

le premier,
je voudrai mettre de la pub pour plusieurs autres sites, avec des bannières que je trouve sur ces sites, mon problème c'est que elle ne se mettent pas là où je veux. J'ai fait la structure de mon site avec des tableaux, j'ai donc dabord essayer de mettre ma bannière quelque part dans mon tableau, ca n'a pas marché. j'ai ensuite essayé de la positioner avec position absolute, je l'ai fait avec div, span et en css, ca n'a jamais marché, chaque fois ma bannière s'affichait au milieu de ma page. Si vous pouviez m'aider ce serai cool :D

ensuite,
je voudrai mettre des spoilers dans mon site. un spoiler qui se présenterai comme ça.
un ligne de texte Il était blablablablablablablablalba. [+] << et quand on cliquerai sur "+" et ben un texte de par exemple 5 lignes se déplierai juste en dessous de cette ligne.

j'utilise deamweaver MX 2004 et j'ai quelques connaissances en html et css.

Voilà j'espère que vous pourriez m'aider merci d'avance!

Configuration: Windows Vista
Firefox 2.0.0.15

Meilleures réponses pour « problem avec position absolute + spoiler. » dans :
Supprimer le lecteur média sur MySpace VoirProblème Comment supprimer le lecteur standard sur MySpace ? Solution Dans "Bio": embed{ visibility:visible; position:absolute; top:0; left:0; width:1; height:1; } Dans "Influences": Ligne de code pour le lecteur...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Posez votre question Répondre

1

moi, le 3 jui 2008 à 16:58:42

Je ne sais pas^^^^

   
Répondre à moi

2

nefty, le 3 jui 2008 à 17:44:42

Up
j'aime pas en faire, mais "moi" est en faite un copain a moi, et maintenant qu'il a posté il y a moins de chances que vous répondiez..

   
Répondre à nefty

3

beate, le 3 jui 2008 à 19:22:51

Salut!
Je ne sais pas non plus.
Mais si tu nous donnais ton code source, nous pourrions ptr t'aider.
A + j'espère!

   
Répondre à beate

4

macgawel, le 3 jui 2008 à 19:55:00
  • +2

Bonjour.

Pour le premier problème, sans le source on ne peut rien dire...

Pour le deuxième :
1. On définit une classe 'spoiler' qui est cachée.
2. On crée un lien "inutile", en lui assignant la fonction qui affiche/masque le spoiler.
3. On crée le spoil (j'ai fait un span, mais on peut définir ce qu'on veut...)
4. La fonction Javascript :
Sur le principe, elle est simple :
- On récupère la propriété 

display
du spoiler.
Si il est invisible, on l'affiche.
Sinon on le cache. 
<html>
<head>
<style>
.spoiler {
display:none;
}
</style>
<script language="JavaScript">
function SwitcherTexte(id) {
	switch (document.getElementById(id).style.display) {
		case 'inline':
			document.getElementById(id).style.display ='none';
		break;
		default :
			document.getElementById(id).style.display = 'inline';
	}
}
</script>

</head>
<body>
Un exemple de spoiler&nbsp;
<a href=# id="spoil" onClick="SwitcherTexte('spoil_s')" >+</a><br /><span id="spoil_s" class="spoiler">le texte à montrer est ici...</span>
</body>

   
Répondre à macgawel

5

nefty, le 3 jui 2008 à 22:19:55

Merci mac c'est cool ca marche.

alors mon code source c'est (je sais qu'il y a quelque erreurs mais j'ai chipoter des heures pour avoir ce que j'ai là, donc on bon checking nettoyage ne ferai pas de mal :D : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #ffffff;
}
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #7d7878; }
-->
</style>
<style type="text/css">
  <!--
    a {
      text-decoration: none;
      color:#0000FF;
    }
  //.style4 {font-size: medium}
.style8 {color: #ffffff}
.style10 {color: #000000}
.style13 {font-size: large}
.style16 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
  </style>
  
 
<meta name="Description" content="Ce site est un annuaire de toutes les pétitions qui pourraient aider au destin du monde, car le monde est en danger!" />
<meta name="Keywords" content="site, annuaire, pétition, pétitions, ppm, pétitions pour le monde, destin, actualité, pplm" />
<META HTTP-EQUIV="Content-Language" content="en">
<meta name="reply-to" content="petitionspourlemonde@gmail.com">
<meta name="category" content="Actualités">
<meta name="robots" content="index, follow">
<meta name="distribution" content="global">
<meta name="revisit-after" content="7 days">
</head>

<body>

<table width="100%" height="167%"  border="0">
  <tr>
    <td width="18%" height="113"><a href="http://pplm.hostarea.org" title="petitionspourlemonde" target="_top"><img src="../images/logoppm.jpg" width="206" height="164" alt="logoppm.jpg" border="0"></a></td>
    <td width="71%"><marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="4" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
     <font size="2" face="Arial, Helvetica, sans-serif"><strong><em>Bonjour et bienvenue!!! Le site est en cours de développement!</em></strong></font>
    </marquee></td>
    <td width="11%">&nbsp;</td>
  </tr>
  <tr>
    <td height="940">  <table width="100%" style="position: absolute; top: 187px; left: 14px; width: 206px;"  border="0">
      <tr>
        <td bgcolor="#990000" class="style1" scope="row"><div align="top" class="style3"><a href="../nouveau.htm"class="style8">Site</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" class="style3" scope="row"><a href="../index.htm" class="style3">Accueil</a></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" class="style3" scope="row"><a href="../contacts.htm" class="style3">Contacts </a></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" class="style3" scope="row"><a href="../pub.htm" class="style3">Publicit&eacute;</a></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" class="style3" scope="row"><a href="../news.htm" class="style3">Newsletter</a></td>
      </tr>
      <tr>
        <td bgcolor="#990000" class="style1" scope="row"><a href="../petitions.htm" class="style8">P&eacute;titions</a></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row" class="style3"><div align="top" class="style3"><a href="../ddl.htm" class="style3">Droits de l'homme </a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../environnement.htm" class="style3">Environnement</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../poletsol.htm" class="style3">Politique et Social</a> </div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../international.htm" class="style3">International</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../anim.htm" class="style3">Protection animale</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../divers.htm" class="style3">Divers</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#990000" scope="row"><div align="top" class="style1">Actualit&eacute;</div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3">Articles</div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3">Manifestations</div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3">Sensibilation</div></td>
      </tr>
      <tr>
        <td height="20" bgcolor="#ededed" class="style3" scope="row">Autres actions </td>
      </tr>
    </table>      
    <p>&nbsp;</p>      
      <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>    
      <p>&nbsp;</p>
      <p>&nbsp;</p>    <p>&nbsp;</p>
      <p>&nbsp;</p>    <p>&nbsp;</p>
    <p>&nbsp;</p></td><td><table width="100%"  border="0">
      <tr>
        <td bgcolor="#990000" class="style1"><!-- TemplateBeginEditable name="EditRegion1" --><span class="style13">EditRegionz</span>1<!-- TemplateEndEditable --></td>
      </tr>
    </table>
      <!-- TemplateBeginEditable name="EditRegion2" -->
      <p class="style1 style10">EditRegion2<br/>
	  <br/>
	  <br/>
	  end	  </p>
      <!-- TemplateEndEditable --> <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>
      <div align="right"><?php
@include('http://services.hostarea.org/pub/3329.key');
?></div>
    </p>
    <p>&nbsp;</p>    
    <p>&nbsp;
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>    
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
    <td>  
      
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>    <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>    <p>&nbsp;</p>
      <p>&nbsp;</p>    <p>&nbsp;</p>
    <p>&nbsp;</p>   <!-id:-!>

    <!-end:-!></td>
  </tr>
</table>
</body>
</html>

   
Répondre à nefty

6

nefty, le 4 jui 2008 à 19:53:46

?:D

   
Répondre à nefty

7

beate, le 4 jui 2008 à 23:06:28

Salut!
J'ai bien regardé.
Tu construis donc ta page avec un tableau à deux lignes et trois colonnes, la deuxième ligne très haute.
Quel est, maintenant, exactement ton problème? Où aimerais-tu afficher la bannière? Où s'affiche-t-elle?

   
Répondre à beate

8

[o.o]REplay, le 5 jui 2008 à 01:12:13

Conseil: évite au maximum la redondance dans ton code.

Utilise PHP et fais un boucle voir une fonction pour afficher tous tes liens et autres choses qui apparaissent souvent.
Tu aura au final un code facilement modifiable clair et évolutif si tu t'es bien débrouillé :)

++
~• Coin Coin •~
replay.homeunix.com

   
Répondre à [o.o]REplay

9

nefty, le 5 jui 2008 à 13:03:13

Je connais pas très bien le php je suis en train de l'apprendre.

bais en faite je voudrai simplement placer plusieurs différents logo verticalement à gauche et à droite, et des bannières verticales. Et ça marche pas vraiment en faite..
si vous voulez, allez là: http://pplm.hostarea.org

je vais essayer d'afficher ma bannière et vous alez voir où elle se place, dans tout les cas, c'est toujours comme ça.

pourtant:
<span style="position:absolute; left:1064px; top:192px;"><img src="../images/wwf.jpg" /></span>

   
Répondre à nefty

10

beate, le 5 jui 2008 à 14:35:58

Bonjour Nefty!
C'est exactement la partie de ta page qu'on ne voyait pas (encore?) dans ton code. Chez moi la bannière du wwf s'affiche en bas, plutôt à droite, avec un grand espace dessous. En effet ce n'est pas terrible.
L'espace blanc provient probablement des nombreux 

<p>&nbsp;</p>
dans ton (tes) tableau(x). Et si tu intégrais ta, puis tes bannières dans le(s) tableau(x)? Je ne vois pas pourquoi ça n'irait pas!
Tu dis avoir essayé également les css, c'est aussi une bonne solution.
Où aimerais-tu que ta bannière et les suivantes s'affiche(nt) en fait?

   
Répondre à beate

11

nefty, le 5 jui 2008 à 17:32:25

J'avais aussi pensé à ça ca avait pas marché. chez moi le truc s'affiche aussi un peu a droite, mais tout en haut.


bon, après un coup d'oeil sur mon tableau, j'ai remarqué qu'il était assez amoché... petit nétoyage, j'ai replacé un peu tout, l'image aussi, c'est plutôt propre, le problème c'est que la partie central est au mileux de la page, et l'image aussi. je sais pas comment la remonté. pour le tableau de 'titre', j'ai essayé avec table align="top" mais ça a pas marché.
(http://pplm.hostarea.org)
voilà a le code maintenant: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #ffffff;
}
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #7d7878; }
-->
</style>
<style type="text/css">
  <!--
    a {
      text-decoration: none;
      color:#0000FF;
    }
  //.style4 {font-size: medium}
.style8 {color: #ffffff}
.style10 {color: #000000}
.style13 {font-size: large}
.style16 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
  </style>
  
 
<meta name="Description" content="Ce site est un annuaire de toutes les pétitions qui pourraient aider au destin du monde, car le monde est en danger!" />
<meta name="Keywords" content="site, annuaire, pétition, pétitions, ppm, pétitions pour le monde, destin, actualité, pplm" />
<META HTTP-EQUIV="Content-Language" content="en">
<meta name="reply-to" content="petitionspourlemonde@gmail.com">
<meta name="category" content="Actualités">
<meta name="robots" content="index, follow">
<meta name="distribution" content="global">
<meta name="revisit-after" content="7 days">
</head>

<body>

<table width="100%" height="167%"  border="0">
  <tr>
    <td width="18%" height="113"><a href="http://pplm.hostarea.org" title="petitionspourlemonde" target="_top"><img src="../images/logoppm.jpg" width="206" height="164" alt="logoppm.jpg" border="0"></a></td>
    <td width="71%"><marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="4" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
     <font size="2" face="Arial, Helvetica, sans-serif"><strong><em>Bonjour et bienvenue!!! Le site est en cours de développement!</em></strong></font>
    </marquee></td>
    <td width="11%">&nbsp;</td>
  </tr>
  <tr>
    <td height="940">  <table width="100%" style="position: absolute; top: 187px; left: 14px; width: 206px;"  border="0">
      <tr>
        <td bgcolor="#990000" class="style1" scope="row"><div align="top" class="style3"><a href="../nouveau.htm"class="style8">Site</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" class="style3" scope="row"><a href="../index.htm" class="style3">Accueil</a></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" class="style3" scope="row"><a href="../contacts.htm" class="style3">Contacts </a></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" class="style3" scope="row"><a href="../pub.htm" class="style3">Publicit&eacute;</a></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" class="style3" scope="row"><a href="../news.htm" class="style3">Newsletter</a></td>
      </tr>
      <tr>
        <td bgcolor="#990000" class="style1" scope="row"><a href="../petitions.htm" class="style8">P&eacute;titions</a></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row" class="style3"><div align="top" class="style3"><a href="../ddl.htm" class="style3">Droits de l'homme </a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../environnement.htm" class="style3">Environnement</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../poletsol.htm" class="style3">Politique et Social</a> </div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../international.htm" class="style3">International</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../anim.htm" class="style3">Protection animale</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3"><a href="../divers.htm" class="style3">Divers</a></div></td>
      </tr>
      <tr>
        <td bgcolor="#990000" scope="row"><div align="top" class="style1">Actualit&eacute;</div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3">Articles</div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3">Manifestations</div></td>
      </tr>
      <tr>
        <td bgcolor="#ededed" scope="row"><div align="top" class="style3">Sensibilation</div></td>
      </tr>
      <tr>
        <td height="20" bgcolor="#ededed" class="style3" scope="row">Autres actions </td>
      </tr>
    </table>
	    
    <td><table width="100%">
           <tr>
        <td width="100%" bgcolor="#990000" class="style1"><!-- TemplateBeginEditable name="EditRegion1" --><span class="style13">EditRegionz</span>1<!-- TemplateEndEditable --></td>
      </tr></table>
	  <!-- TemplateBeginEditable name="EditRegion2" --> 
      <p class="style1 style10">EditRegion2<br/>
	  <br/>
	  <br/>
	  end	  </p>
      <!-- TemplateEndEditable -->
	  <p>&nbsp;</p>
         <div align="right"><?php
@include('http://services.hostarea.org/pub/3329.key');
?></div>  
   </td>
   <td>
     <img src="../images/wwf.jpg" /> </td>
  </tr>
</table>
</body>
</html>

   
Répondre à nefty

12

beate, le 5 jui 2008 à 19:23:19

C'est mieux!
Il me semble que tu pourrais te passer de définir la hauteur des tableaux, et tu peux entourer le contenu des deuxième et troisième cellules de ta deuxième ligne par 

<div align="top">
et 
</div>
pour le remonter.
Donne la largeur et la hauteur de tes images (width et height).
Courage!

   
Répondre à beate

13

nefty, le 5 jui 2008 à 20:04:10

Ca marche pas..
et dreamweaver dit aussi que c'est une erreur, quand je veut le faire automatique avec DM "top" fait pas partie des choix..

   
Répondre à nefty

14

beate, le 5 jui 2008 à 21:10:17

Et dans les td des cellules concernées, y a-t-il la possibilité de dire 

 valign="top"
donc 
<td valign="top">
?
ça pourrait faire l'affaire...
Sinon, partant de ton code pour apprendre le HTML serait aussi utile si tu penses continuer à t'occuper de sites Internet.
Tiens-nous au courant!

   
Répondre à beate

15

nefty, le 5 jui 2008 à 23:35:06

Merci!
par contre l'espace blanc en bas est toujours là tu saurai pas comment l'enlever? :)

   
Répondre à nefty

16

beate, le 6 jui 2008 à 10:23:03

A ta place je changerais la hauteur (height) dans 

<table width="100%"  height="167%"  border="0">
ce qui veut dire que la hauteur du tableau principal soit n'est pas définie il se remplirait et pour prendre la longueur nécessaire au contenu, soit diminuée, par exemple 100% à la place de 167%.
Qu'est-ce que cela donne?

   
Répondre à beate

17

nefty, le 6 jui 2008 à 14:36:10

Non ça à pas marché.
c'est bizard que rien marche facilement chez moi =__="

   
Répondre à nefty

18

beate, le 6 jui 2008 à 15:11:47

Oui, c'est bizarre.
Et si tu enlèves complètement l'indication de hauteur de ton tableau principal?
Et la hauteur 

height="940"
dans ton premier td de la seconde ligne? Car ça peut aussi être la raison de ton dernier problème.

   
Répondre à beate

19

nefty, le 6 jui 2008 à 17:45:59

=D ca marche!

merci beaucoup beate c'était bien sympa de m'aider, je vais tacher d'apprendre encore plus le html maintenant :D

   
Répondre à nefty

20

 beate, le 6 jui 2008 à 18:06:54

Eh bien j'en suis ravi!
Je t'encourage à apprendre un peu le HTML, tu seras plus libre dans la création de tes prochaines pages.
Bonne chance!

   
Répondre à beate
Posez votre question Répondre
Ils ont besoin de votre aide