Táblázat cellájába Több- Div egyhelyre pozicionálása.
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.És a hozzá tartozó CSS
■ 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"> <p> </p>
<p> </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">
<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>
<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>
@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}
Visibility
Display