Problem z warstwami

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Robi
Posty: 11
Rejestracja: wt cze 10, 2003 12:15 pm
Lokalizacja: Bydgoszcz

Problem z warstwami

Post autor: Robi »

Chciałbym umieścić przyciski na osobnych warstwach. Jak to zrobić żeby w różnych rozdzielczościach nie zmieniały położenia. Oto kod strony bez buttonów.

Kod: Zaznacz cały

<HTML>
<HEAD>
<TITLE>strona_index</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script language="JavaScript"> 
<!-- 
function calcHeight() 
{ 
   var the_height=document.frames['Iframka'].document.body.scrollHeight;//znajduje wysokosc ladowanego do Iframki dokumentu 
   document.getElementById('Iframka').style.height=the_height;//zmienia wysokosc Iframki 
} 
//--> 
</script>
<style type="text/css">
html, body, #nosnik
{
	height:100%;
	width:100%;
	margin:0;
	border:0;
	padding:0;
}

body
{
	display:table;
}

body>#nosnik
{
	display:table-cell;
	vertical-align:middle;
}
* html #nosnik
{
	position:absolute;
	height:auto;
	text-align:center;
	top:expression((x=(document.documentElement.offsetHeight-this.offsetHeight)/2)<0?0:x+'px');
}
.liniag {
background-image:   url(images/linia2g.gif);
	background-repeat: repeat-x;
}
.liniag1 {
background-image:   url(images/linia2d.gif);
	background-repeat: repeat-x;
}
div#logo {
position:relative; top:20px; left:270px;
}

</style>
</HEAD>
<BODY bgcolor="#D3DCF3" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id="nosnik"> 
   <table width="750" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td width="10" height="7"><img src="images/linia1g.gif" width="10" height="7"></td>
      <td class="liniag"><img src="images/linia2g.gif" width="1" height="7"></td>
      <td width="10" height="7"><img src="images/linia3g.gif" width="10" height="7"></td>
    </tr>
  </table>
  <table bgcolor="#2B257B" width="750" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td width="312"><table width=255 border=0 cellpadding=0 cellspacing=0>
          <tr> 
            <td colspan=2> <img src="images/strona_index_01.jpg" width=60 height=29 alt=""></td>
            <td> <img src="images/strona_index_02.jpg" width=54 height=29 alt=""></td>
            <td colspan=3> <img src="images/strona_index_03.jpg" width=59 height=29 alt=""></td>
            <td> <img src="images/strona_index_04.jpg" width=82 height=29 alt=""></td>
          </tr>
          <tr> 
            <td colspan=2> <img src="images/strona_index_05.jpg" width=60 height=32 alt=""></td>
            <td colspan=3> <img src="images/strona_index_06.jpg" width=82 height=32 alt=""></td>
            <td> <img src="images/strona_index_07.jpg" width=31 height=32 alt=""></td>
            <td> <img src="images/strona_index_08.jpg" width=82 height=32 alt=""></td>
          </tr>
          <tr> 
            <td colspan=2> <img src="images/strona_index_09.jpg" width=60 height=19 alt=""></td>
            <td colspan=3> <img src="images/strona_index_10.jpg" width=82 height=19 alt=""></td>
            <td rowspan=2> <img src="images/strona_index_11.jpg" width=31 height=52 alt=""></td>
            <td> <img src="images/strona_index_12.jpg" width=82 height=19 alt=""></td>
          </tr>
          <tr> 
            <td> <img src="images/strona_index_13.jpg" width=19 height=33 alt=""></td>
            <td colspan=2> <img src="images/strona_index_14.jpg" width=95 height=33 alt=""></td>
            <td colspan=2> <img src="images/strona_index_15.jpg" width=28 height=33 alt=""></td>
            <td><img src="images/strona_index_16.jpg" width=82 height=33 alt=""></td>
          </tr>
          <tr> 
            <td colspan=2> <img src="images/strona_index_17.jpg" width=60 height=24 alt=""></td>
            <td colspan=3> <img src="images/strona_index_18.jpg" width=82 height=24 alt=""></td>
            <td> <img src="images/strona_index_19.jpg" width=31 height=24 alt=""></td>
            <td> <img src="images/strona_index_20.jpg" width=82 height=24 alt=""></td>
          </tr>
          <tr> 
            <td> <img src="images/strona_index_21.jpg" width=19 height=53 alt=""></td>
            <td colspan=3> <img src="images/strona_index_22.jpg" width=106 height=53 alt=""></td>
            <td> <img src="images/strona_index_23.jpg" width=17 height=53 alt=""></td>
            <td> <img src="images/strona_index_24.jpg" width=31 height=53 alt=""></td>
            <td> <img src="images/strona_index_25.jpg" width=82 height=53 alt=""></td>
          </tr>
          <tr> 
            <td colspan=2> <img src="images/strona_index_26.jpg" width=60 height=22 alt=""></td>
            <td colspan=3> <img src="images/strona_index_27.jpg" width=82 height=22 alt=""></td>
            <td> <img src="images/strona_index_28.jpg" width=31 height=22 alt=""></td>
            <td> <img src="images/strona_index_29.jpg" width=82 height=22 alt=""></td>
          </tr>
          <tr> 
            <td> <img src="images/strona_index_30.jpg" width=19 height=51 alt=""></td>
            <td colspan=4> <img src="images/strona_index_31.jpg" width=123 height=51 alt=""></td>
            <td> <img src="images/strona_index_32.jpg" width=31 height=51 alt=""></td>
            <td> <img src="images/strona_index_33.jpg" width=82 height=51 alt=""></td>
          </tr>
          <tr> 
            <td colspan=2> <img src="images/strona_index_34.jpg" width=60 height=27 alt=""></td>
            <td colspan=3> <img src="images/strona_index_35.jpg" width=82 height=27 alt=""></td>
            <td> <img src="images/strona_index_36.jpg" width=31 height=27 alt=""></td>
            <td> <img src="images/strona_index_37.jpg" width=82 height=27 alt=""></td>
          </tr>
          <tr> 
            <td> <img src="images/strona_index_38.jpg" width=19 height=51 alt=""></td>
            <td colspan=3> <img src="images/strona_index_39.jpg" width=106 height=51 alt=""></td>
            <td> <img src="images/strona_index_40.jpg" width=17 height=51 alt=""></td>
            <td> <img src="images/strona_index_41.jpg" width=31 height=51 alt=""></td>
            <td> <img src="images/strona_index_42.jpg" width=82 height=51 alt=""></td>
          </tr>
          <tr> 
            <td colspan=2> <img src="images/strona_index_43.jpg" width=60 height=19 alt=""></td>
            <td colspan=3> <img src="images/strona_index_44.jpg" width=82 height=19 alt=""></td>
            <td> <img src="images/strona_index_45.jpg" width=31 height=19 alt=""></td>
            <td> <img src="images/strona_index_46.jpg" width=82 height=19 alt=""></td>
          </tr>
          <tr> 
            <td> <img src="images/strona_index_47.jpg" width=19 height=49 alt=""></td>
            <td colspan=3> <img src="images/strona_index_48.jpg" width=106 height=49 alt=""></td>
            <td> <img src="images/strona_index_49.jpg" width=17 height=49 alt=""></td>
            <td> <img src="images/strona_index_50.jpg" width=31 height=49 alt=""></td>
            <td> <img src="images/strona_index_51.jpg" width=82 height=49 alt=""></td>
          </tr>
          <tr> 
            <td colspan=2> <img src="images/strona_index_52.jpg" width=60 height=46 alt=""></td>
            <td colspan=3> <img src="images/strona_index_53.jpg" width=82 height=46 alt=""></td>
            <td> <img src="images/strona_index_54.jpg" width=31 height=46 alt=""></td>
            <td> <img src="images/strona_index_55.jpg" width=82 height=46 alt=""></td>
          </tr>
          <tr> 
            <td> <img src="images/spacer.gif" width=19 height=1 alt=""></td>
            <td> <img src="images/spacer.gif" width=41 height=1 alt=""></td>
            <td> <img src="images/spacer.gif" width=54 height=1 alt=""></td>
            <td> <img src="images/spacer.gif" width=11 height=1 alt=""></td>
            <td> <img src="images/spacer.gif" width=17 height=1 alt=""></td>
            <td> <img src="images/spacer.gif" width=31 height=1 alt=""></td>
            <td> <img src="images/spacer.gif" width=82 height=1 alt=""></td>
          </tr>
        </table></td>
      <td width="438" valign="top"> <div id="logo"><img src="images/logo.jpg"></div>
        <div style="position:relative; top:40px; left:0px;"> 
          <iframe width ="300" id="Iframka" onload="calcHeight();" src="o_firmie.htm" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" border="0"></iframe>
        </div></td>
    </tr>
  </table>
  <table width="750" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td width="10" height="7"><img src="images/linia1d.gif"></td>
      <td class="liniag1"><img src="images/linia2d.gif"></td>
      <td width="10" height="7"><img src="images/linia3d.gif"></td>
    </tr>
  </table>
</div>
</BODY>
</HTML>
ODPOWIEDZ