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.


<html>

<head>
<meta http-equiv="Content-Language" content="hu">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<title>Valami</title>

<link rel="StyleSheet" type="text/css" href="stil.css">


<script language="javascript" type="text/javascript">
// adott 'id'-jű szakasz (div) láthatóvá tétele
function showdiv(id)
{
	// title="divs" attribútumú <div> mezők elrejtése
  var elems = document.getElementsByTagName("div");   // DOM összen <div> tagje az elems tömbben
  for (var i=0; i<elems.length; i++)
  {
  	if(elems[i].title == "divs")						// <div title="divs"> mezők esetén 'hidden' stílus beállítása
    elems[i].style.visibility = "hidden";
  }
  // id azonosítójú <div> mező megjelenítése 'visible'stílussal
  document.getElementById(id).style.visibility="visible";

}
// kezdeti <div> mező megjelenítése
function init()
{
  showdiv("div01");
}

</script>

</head>

<body onLoad="init()">


  <table class="tablakeret" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" align="center" >
    <tr>
      <td colspan="3" bgcolor="#FFFF99">&nbsp;<p>&nbsp;</p>
      <p>&nbsp;</td>
    </tr>
    
    <tr>
    
 <div class="menu">
 
    <td width="266" height="0" bgcolor="#FFFFCC">
        	<p align="center"><a href="#" onClick="showdiv('div01')" style= "text-decoration: none; hover background: #66ff66">Főlap</a></p>
    </td>
	
    <td width="266" height="0" bgcolor="#FFFFCC">
    		<p align="center"><a href="#" onClick="showdiv('div02')" style="text-decoration: none">Galéria</a></p>
    
    </td>
            
      <td width="266" height="0" bgcolor="#FFFFCC">
      		<p align="center"><a href="#" onClick="showdiv('div03')" style="text-decoration: none">Kapcsolat</a></p>
      </td>
 </div>
      
    </tr>
   
   
    <tr>
      
      <td colspan="3" bgcolor="#FFFF99">&nbsp;
    
      <div class="container" id="div01" title="divs"> <h1><i>Cím</i> </h1>
	<p>Nyitólap</p>
	<p>Nyitólap</p>
	</div>
     
     <div class="container" id="div02" title="divs"> <h1><i>Cím</i> </h1>
	<p>Galéria</p>
	<p>Galéria</p>
	</div>
     
     <div class="container" id="div03" title="divs"> <h1><i>Cím</i> </h1>
	<p>Kapcsolat</p>
	<p>Kapcsolat</p>
	</div>
     
      </td>
     
     
    </tr>
      
  </table>


 <p></p>
&nbsp;



  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100" 
  align=center>
    <tr>
      <td>
      <p align="center">Számláló</td>
    </tr>
  </table>
 


</body>

</html>
És a hozzá tartozó CSS


@charset "utf-8";
/* CSS Document */

body 
	{
	background: #FFCC66;
	}


.tablakeret {border-style: dashed; border-color:blue; 
			margin: 20px auto 0 auto; padding: 0 0 0 0;
			border:1px solid #000000;
	    }
			

.container
	{
	width:  300px;
	height: 300px;
	background: #333399;
	color: #ffffff;
	margin: 0 auto 0 auto;
        /*position: static;*/

	}

.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.


<script language="javascript" type="text/javascript">
function showdiv(id)
{
  var elems = document.getElementsByTagName("div");   
  for (var i=0; i<elems.length; i++)
  {
  	if(elems[i].title == "divs")						
    elems[i].style.display = "none";
  }
  document.getElementById(id).style.display="block";
}
 function init()
 {
  showdiv("div01");
 }

</script>