ugrás a tartalomhoz

Táblázat cellájába Több- Div egyhelyre pozicionálása.

kov · 2009. Már. 24. (K), 14.11
Sziasztok!

Van egy 3 soros, 3 oszlopos táblázatom. Ebből az első, és harmadik sort egyesítettem. A második sorban helyzkedik el a 3 db menüpont. A Ha rákattintok az egyik menüpontra akkor a harmadik sorban megjelenik a tartalom egy div-ben. Ha rákattintok a másik menüpontra akkor szintén megjelenik egy div-ben a tartalom a harmadik sorban. Azomban a problémám az, hogy nem az előző div poziciójában jelenik meg, hanem alatta. És így szépen megnyúlik a harmadik sorom, és egymás alá pakolgatja be a táblázat harmadik sorába a diveket. Hogyan lehetne ugyanoda pozicionálni egy táblázat cellájába több divet? Azért kellett táblázaton belül divet használnom mert ha csak divekkel építettem fel az oldalt akkor különböző képernyőfelbontásoknál elmásztak a divek. A táblázat meg fixen tartja.
  1. <html>  
  2.   
  3. <head>  
  4. <meta http-equiv="Content-Language" content="hu">  
  5. <meta name="GENERATOR" content="Microsoft FrontPage 5.0">  
  6. <meta name="ProgId" content="FrontPage.Editor.Document">  
  7. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">  
  8.   
  9. <title>Valami</title>  
  10.   
  11. <link rel="StyleSheet" type="text/css" href="stil.css">  
  12.   
  13.   
  14. <script language="javascript" type="text/javascript">  
  15. // adott 'id'-jű szakasz (div) láthatóvá tétele  
  16. function showdiv(id)  
  17. {  
  18.     // title="divs" attribútumú <div> mezők elrejtése  
  19.   var elems = document.getElementsByTagName("div");   // DOM összen <div> tagje az elems tömbben  
  20.   for (var i=0; i<elems.length; i++)  
  21.   {  
  22.     if(elems[i].title == "divs")                        // <div title="divs"> mezők esetén 'hidden' stílus beállítása  
  23.     elems[i].style.visibility = "hidden";  
  24.   }  
  25.   // id azonosítójú <div> mező megjelenítése 'visible'stílussal  
  26.   document.getElementById(id).style.visibility="visible";  
  27.   
  28. }  
  29. // kezdeti <div> mező megjelenítése  
  30. function init()  
  31. {  
  32.   showdiv("div01");  
  33. }  
  34.   
  35. </script>  
  36.   
  37. </head>  
  38.   
  39. <body onLoad="init()">  
  40.   
  41.   
  42.   <table class="tablakeret" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" align="center" >  
  43.     <tr>  
  44.       <td colspan="3" bgcolor="#FFFF99">&nbsp;<p>&nbsp;</p>  
  45.       <p>&nbsp;</td>  
  46.     </tr>  
  47.       
  48.     <tr>  
  49.       
  50.  <div class="menu">  
  51.    
  52.     <td width="266" height="0" bgcolor="#FFFFCC">  
  53.             <p align="center"><a href="#" onClick="showdiv('div01')" style= "text-decoration: none; hover background: #66ff66">Főlap</a></p>  
  54.     </td>  
  55.       
  56.     <td width="266" height="0" bgcolor="#FFFFCC">  
  57.             <p align="center"><a href="#" onClick="showdiv('div02')" style="text-decoration: none">Galéria</a></p>  
  58.       
  59.     </td>  
  60.               
  61.       <td width="266" height="0" bgcolor="#FFFFCC">  
  62.             <p align="center"><a href="#" onClick="showdiv('div03')" style="text-decoration: none">Kapcsolat</a></p>  
  63.       </td>  
  64.  </div>  
  65.         
  66.     </tr>  
  67.      
  68.      
  69.     <tr>  
  70.         
  71.       <td colspan="3" bgcolor="#FFFF99">&nbsp;  
  72.       
  73.       <div class="container" id="div01" title="divs"> <h1><i>Cím</i> </h1>  
  74.     <p>Nyitólap</p>  
  75.     <p>Nyitólap</p>  
  76.     </div>  
  77.        
  78.      <div class="container" id="div02" title="divs"> <h1><i>Cím</i> </h1>  
  79.     <p>Galéria</p>  
  80.     <p>Galéria</p>  
  81.     </div>  
  82.        
  83.      <div class="container" id="div03" title="divs"> <h1><i>Cím</i> </h1>  
  84.     <p>Kapcsolat</p>  
  85.     <p>Kapcsolat</p>  
  86.     </div>  
  87.        
  88.       </td>  
  89.        
  90.        
  91.     </tr>  
  92.         
  93.   </table>  
  94.   
  95.   
  96.  <p></p>  
  97. &nbsp;  
  98.   
  99.   
  100.   
  101.   <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100"   
  102.   align=center>  
  103.     <tr>  
  104.       <td>  
  105.       <p align="center">Számláló</td>  
  106.     </tr>  
  107.   </table>  
  108.    
  109.   
  110.   
  111. </body>  
  112.   
  113. </html>  
És a hozzá tartozó CSS
  1. @charset "utf-8";  
  2. /* CSS Document */  
  3.   
  4. body   
  5.     {  
  6.     background: #FFCC66;  
  7.     }  
  8.   
  9.   
  10. .tablakeret {border-style: dashed; border-color:blue;   
  11.             margin: 20px auto 0 auto; padding: 0 0 0 0;  
  12.             border:1px solid #000000;  
  13.         }  
  14.               
  15.   
  16. .container  
  17.     {  
  18.     width:  300px;  
  19.     height: 300px;  
  20.     background: #333399;  
  21.     color: #ffffff;  
  22.     margin: 0 auto 0 auto;  
  23.         /*position: static;*/  
  24.   
  25.     }  
  26.   
  27. .menu a {link color: #ff0000; visited color: #0000ff; background: #66ff66}  
‹ UTF-8 kódolás Dreamweaverben div megjelenites/eltuntetes js-tel ›
 ■
1

Visibility

Poetro · 2009. Már. 24. (K), 14.55
Ne visiblity-t használj hanem display: none / block-ot.
2

Display

kov · 2009. Már. 25. (Sze), 09.29
Köszönöm a segítséget "display-el" tökéletesen működik.
  1. <script language="javascript" type="text/javascript">  
  2. function showdiv(id)  
  3. {  
  4.   var elems = document.getElementsByTagName("div");     
  5.   for (var i=0; i<elems.length; i++)  
  6.   {  
  7.     if(elems[i].title == "divs")                          
  8.     elems[i].style.display = "none";  
  9.   }  
  10.   document.getElementById(id).style.display="block";  
  11. }  
  12.  function init()  
  13.  {  
  14.   showdiv("div01");  
  15.  }  
  16.   
  17. </script>