'Pop up' kopieren

[GerardX]

Ik heb middels HTML en CSS (zie hieronder) weten te realiseren dat er een 'pop up' verschijnt, wanneer met de muis over een bepaalde koppeling daarvoor wordt gegaan. Maar wanneer ik de HTML-code daarvan kopieer in dezelfde pagina (om vervolgens daarna de inhoud daarvan te veranderen voor een tweede 'pop in'), verschijnt er wel een 'pop in' met de titel maar de rest van de 'pop in'-tekst staat gewoon direct na de koppeling in de pagina tekst. Ra, ra, waardoor komt dit en hoe is dit op te lossen?

Onderdeel van die gebruiksvriendelijkheid is, om op deze webstek voortdurend Nederlands te gebruiken waar dat mogelijk en redelijk is, want wat mankeert er aan onze 
<a class="beschikbarePopup">moerstaal
  <span class="toonPopup">Moerstaal
    <span class="toonPopup-tekst">
    <p>
      <ol> <!-- (Geordende) lijst 4 -->                                        
        <li> <!-- 3.4.1 -->                                            
          Nederlands is onze moerstaal en zeer rijk aan begrippen en uitdrukkingen. Zeker in vergelijking met vele andere talen. Daardoor zijn er geen beperkingen voor het gebruik daarvan.                                        
        </li>                                        
        <li> <!-- 3.4.2 -->                                            
          Jargon (het gebruik van specifieke begrippen/woorden door/voor een bepaalde groep specialisten, zoals informatici, medici e.d.) is hinderlijk in de communicatie met niet-specialisten.                                            
         <br>Jargon is ondergeschikt aan talen en is geen taal op zichzelf.                                            
         <br>Voorafgaande controle op de kennis daarvan, is noodzakelijk om misverstanden en hindernissen in de communicatie te voorkomen.  
         <br>Die niet-specialisten gebruiken jargon vaak uit gemakzucht en/of onnodig om, vaak onbewust, de suggestie te wekken dat ze tot een groep specialisten behoren of hun taalkennis is mogelijk (te) gebrekkig.                                        
        </li>                                        
        <li> <!-- 3.4.3 -->                                            
           Een moerstaal (zoals het Nederlands voor ons) is voor iedereen (ook specialisten) te begrijpen die met die taal is groot gebracht.                                        
        </li>                                    
      </ol>                                    
    </p>                                
    </span>                            
  </span>                        
</a>?

CSS-

/* 'Pop-up'-stijlen */

a.beschikbarePopup{
  border-bottom: 1px dotted; /* Gestippelde onderstreping */
  color: #28477a; /* Tekst- en onderstrepingskleur = Blauwgrijs */
  position: relative; /* Dit zorgt dat alles werkt.*/
  text-decoration: none;
}

a.beschikbarePopup:hover{ /* Zorgt voor overlappende 'popup'. */
  color: green;
  font-weight: bold;
}
a.beschikbarePopup span.toonPopup{
  display: none;
}

/* Dit 'popup'-blok wordt alleen getoond, wanneer de aanwijzer boven de koppeling staat. */

a.beschikbarePopup:hover span.toonPopup{
  background-color: Lightyellow; /* Achtergrondkleur = Lichtgeel */
  border: 1px solid green;
  border-radius: 0 15px 15px 15px;
  border-top: 2px solid green; /* Bovenrand van de 'popup' = 2 punten dik en groen. */
  color: #104e8b; /* Tekstkleur kopje = Blauwgroen */
  display: block;
  font-weight: bold;
  left: 30px;
  padding: 10px;
  position: absolute;
/* Plaats van het 'popup'-blok */
  top: 17px; 
/* Vormgeving van het 'Popup'-blok en de inhoud daarvan */
  width: 30em; /* Zou "auto" moeten zijn maar dat werkt niet */
  z-index: 2; /* Positineert het 'popup'-blok bovenop het voetblok. */
}

span.toonPopup-tekst { /* Inhoudtekst */
    color: #444;
    font-weight: 100;
}

 

[Aar]

Kan je eens op JSfiddle een voorbeeld tonen, Gerard?
Dat maakt het makkelijker om te zien.

 

[GerardX]

Kan je eens op JSfiddle

Wat is "JSfiiddle"? Het lijkt er op, dat dit iets met JavaScript van doen heeft, maar ik gebruik uitsluitend HTML en CSS.

een voorbeeld tonen

Nou dacht ik toch, dat ik al heel erg m'n best gedaan had door de HTML- en CSS-code toe te voegen en hoopte op een reactie van iemand met css in z'n gebruikersnaam (die was ik ergens tegengekomen maar vergeten te noteren).

Dat maakt het makkelijker om te zien.

Als het goed is, moet er hierbij een schermafdruk getoond worden.



En hieronder de html-code voor een andere 'pop up' op diezelfde pagina.

<h2>
  Middelen en werkwijze
</h2>      
<p>  
  Het platform verzamelt informatie in contacten met binnenstadbewoners en gemeente en bespreekt die op vergaderingen.  <br>Per onderwerp bereidt een groepje
 <a class="beschikbarePopup">leden
   <span class="toonPopup">      
     Leden<br>
      <span class="toonPopup-tekst">
         <ul>
           <li>
              Leden zijn binnenstadbewoners die actief bijdragen aan het platform.
          </li>
          <li>
             Het lidmaatschap is gratis en duurt zolang het bovenstaande van kracht is.
          </li>
        </ul>
      </span>
    </span> 
  </a> 
 een advies voor. 
<br>Na goedkeuring op een vergadering, wordt dat advies, al dan niet gevraagd door de gemeente, aan de gemeente toegestuurd met een verzoek om een reactie.
</p>

Maar dit heeft het volgende resultaat. :-(

 

[Aar]

Wat is "JSfiiddle"? Het lijkt er op, dat dit iets met JavaScript van doen heeft, maar ik gebruik uitsluitend HTML en CSS.

We zijn toch niet terug bij af, Gerard?
Dan Google/DuckDuck Go/Altavista je dat toch? En dan zie je dat het een sandbox in waarin je een mock-up kan laten zien.

Ik snap verder het probleem niet zo met betrekking tot je vraag?
Daarom mijn vraag of je in JS Fiddle wat wilt plaatsen. Dat werkt makkelijker.

 

[GerardX]

We zijn toch niet terug bij af, Gerard?

Het lijkt er wel op. I.p.v. dat ik op weg gholpen wordt, wordt ik (weer) verder het bos ingestuurd.

Dan Google/DuckDuck Go/Altavista je dat toch? En dan zie je dat het een sandbox in waarin je een mock-up kan laten zien.

Fijn, dat je DIT allemaal zo goed weet, maar daar heb ik niets aan.

Ik snap verder het probleem niet zo met betrekking tot je vraag?

Daar begon ik al zo'n donkerbruin vermoeden van te krijgen, maar reageer dan gewoon niet. Mogelijk snappen anderen het wel

 

[Aar]

Gerard, laat je zelfredzaamheid eens zien i.p.v. te mopperen? Of bel jij ook tijdens een dropping een taxi?

 

[GerardX]

Gerard, laat je zelfredzaamheid eens zien i.p.v. te mopperen? Of bel jij ook tijdens een dropping een taxi?

Ik dacht dat dit forum "Help mij" heette en niet: "Wat ben jij dom/lui". Wat dacht je van: "Iemand vraagt iets niet voor niets" i.p.v. "Een goede hulp begint bij jezelf"? en "Ik ga er vanuit, dat je zelf ook al wat onderzoek hebt gedaan" i.p.v. wat jij hebt staan. Dus Aar, laat het verder maar zitten.


mod. Tekst aangepast

 

[Aar]

Ik help je op weg.

mod. Tekst aangepast

 

[bron]

Lukt het als je in #3 de <p> en de </p> weghaalt?