Problem avec position absolute + spoiler.

Résolu
nefty -  
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   -
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!
A voir également:

11 réponses

Réponse 1 / 11
macgawel Messages postés 664 Date d'inscription   Statut Membre Dernière intervention   89
 
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>
2
Réponse 2 / 11
moi
 
je ne sais pas^^^^
0
Réponse 3 / 11
nefty
 
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..
0
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   6
 
Salut!
Je ne sais pas non plus.
Mais si tu nous donnais ton code source, nous pourrions ptr t'aider.
A + j'espère!
0
Réponse 4 / 11
nefty
 
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="https://cv-suspension-dd24.key-systems.net/" 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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
nefty
 
?:D
0
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   6
 
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?
0
[o.o]REplay Messages postés 357 Date d'inscription   Statut Membre Dernière intervention   28 > beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention  
 
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é :)

++
0
Réponse 6 / 11
nefty
 
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à: https://cv-suspension-dd24.key-systems.net/

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>
0
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   6
 
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?
0
Réponse 7 / 11
nefty
 
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="https://cv-suspension-dd24.key-systems.net/" 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>
0
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   6
 
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!
0
Réponse 8 / 11
nefty
 
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..
0
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   6
 
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!
0
Réponse 9 / 11
nefty
 
merci!
par contre l'espace blanc en bas est toujours là tu saurai pas comment l'enlever? :)
0
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   6
 
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?
0
Réponse 10 / 11
nefty
 
non ça à pas marché.
c'est bizard que rien marche facilement chez moi =__="
0
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   6
 
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.
0
Réponse 11 / 11
nefty
 
=D ca marche!

merci beaucoup beate c'était bien sympa de m'aider, je vais tacher d'apprendre encore plus le html maintenant :D
0
beate Messages postés 166 Date d'inscription   Statut Membre Dernière intervention   6
 
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!
0

Discussions similaires

Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Caler une adresse au niveau de la fenêtre d'une enveloppe
®omain -
kent -

15 réponses