Avatar billede pwn Forsker
11. januar 2006 - 21:40 Der er 6 kommentarer og
1 løsning

låse lag fast til tabel

Jeg har defineret en tabel. Her ovenpå har jeg placeret nogle grafikstykker i layers. Alt efter skærmoplysning flytter grafikken sig. Hvordan låser jeg disse lag til den underliggende tabel, så billedet ser ens ud ved alle skærmoplysninger?
Avatar billede jokkejensen Novice
11. januar 2006 - 21:47 #1
du sætter style="position:Relative;" på cellen dine layers ligger i..

Herefter skal dine koordinater nok lige finpudses for nu ligger den lagene ud fra venstre øverste hjørne af cellen de ligger relativt i.. og ikke ud fra browserens (body)' venstre øverste hjørne.

ex

<td style="position:relative;">
<div style="position:Absolut;">Billede</div>
</td>
Avatar billede jokkejensen Novice
11. januar 2006 - 21:47 #2
du kan også sætte position:relative på hele din tabel..

<table style="position:relative">
Avatar billede pwn Forsker
11. januar 2006 - 22:19 #3
Tak for svaret:-)
Kan du mere præcist sige, hvor jeg evt. skal placere disse tags - efter tabeldefinitionen fx.?
Send også lige et svar.
Avatar billede jokkejensen Novice
11. januar 2006 - 22:43 #4
Når man absolut placere nogle elementer på en hjemmeside placeres de ud fra det nærmeste relativt placeret element..

Altså ligger jeg nogle elementer i et relativt placeret element, skal jeg give koordinater ud fra dette element.

Ligger de ikke i et relativt positioneret element skal man ligge koordinaterne ud fra <body> altså fra øverste venstre hjørne på skærmen.. og dette skaber selvfølgeligt problemer hvis brugerne har forskellige skærmopløsninger og siden ikke er venstre stillet..

Derfor skal elementerne ligge i et element med position:relative;

Har jeg en tabel, giver jeg den "style" attributten med position:relative;

Herefter hvis jeg ligger nogle elementer med absolut positionering inde i tabellen, vil deres koordinater skulle ligge fra tabellen øverste venstre hjørne.


<table style="position:relative">
<tr>
<td>
<div style="position:ansolute;top:0;left:0">Dette lag vil ligge i venstre øverste hjørne på tabellen, uafhængigt at browser størrelse og brugerens opløsning</div>
</td>
</tr>
</table>

Sig til hvis det ikke virker, eller kopier noget af dit kode herind ..

Mvh
Avatar billede pwn Forsker
11. januar 2006 - 23:06 #5
Jeg sender lige et link:-)

http://byport.dk/docs/new10/

mvh
p
Avatar billede jokkejensen Novice
11. januar 2006 - 23:16 #6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.style2 {font-size: 12px}
.style11 {color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style12 {font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style14 {    font-family: "Times New Roman", Times, serif;
    font-size: 32px;
    color: #336666;
}
-->
</style>
</head>

<body>
<p>&nbsp;</p>
<table width="800" height="90%"  border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#3399FF">
  <tr>
    <td align="center" valign="top" bordercolor="#000066"><table width="800" height="100"  border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td><div align="center"><img src="images/logo_navbargif.gif" width="800" height="100" border="0" usemap="#Map" /></div></td>
      </tr>
    </table>
      <table width="800" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="170" style="position:relative;" align="center" valign="top">
<div id="Layer1" style="position:absolute; left:21px; top:100px; width:76px; height:102px; z-index:1"><img src="../images/g1w.gif" width="100" height="143" /></div>
<div id="Layer2" style="position:absolute; left:101px; top:217px; width:2px; height:58px; z-index:2"><img src="../images/g2w.gif" width="100" height="151" /></div>
<div id="Layer3" style="position:absolute; left:186px; top:345px; width:114px; height:61px; z-index:3"><img src="../images/g3w.gif" width="140" height="85" /></div>
<div id="Layer4" style="position:absolute; left:312px; top:249px; width:29px; height:100px; z-index:4"><img src="../images/g4w.gif" width="100" height="154" /></div>
    </td>
          <td width="500">&nbsp;</td>
          <td width="170" valign="top"><div align="center"></div></td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td valign="top">&nbsp;</td>
        </tr>
      </table>
      <div id="Layer5" class="style3" style="position:absolute; left:587px; top:195px; width:228px; height:240px; z-index:5">
        <div align="right"><span class="style14">Professionel genplacering af ledere og medarbejdere p&aring; alle niveauer</span> </div>
        <p>&nbsp;</p>
      </div></td>
  </tr>
</table>
<p>&nbsp;</p>
<map name="Map" id="Map">
  <area shape="rect" coords="168,75,218,94" href="index.htm" />
  <area shape="rect" coords="234,75,321,94" href="1_praesentation/side1.htm" />
  <area shape="rect" coords="334,75,455,94" href="2_sagamanagement/sagamanagement.htm" />
  <area shape="rect" coords="468,76,538,95" href="3_koncept/1_koncept.htm" />
  <area shape="rect" coords="554,75,625,93" href="4_kontakt/1_kontaktos.htm" />
</map>
</body>
</html>



Placer lige selv dem korrekt, havde ikke lige billederne..

Bemærk !!!

Det jeg gjorde var at finde en passende celle at tage udgangspunkt fra.. denne celle giver jeg style="position:relative;" .. herefter smider jeg de ting der skal positioneres ud fra den, ind i cellen.. de vil herefter ligge sig absolut positioneret ud fra den celle og ikke hele browseren.. herefter kan jeg positionere dem som jeg ønsker..

Held og lykke :)

/JJ
Avatar billede pwn Forsker
11. januar 2006 - 23:29 #7
Tak skal du ha' - det fungerer:-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester