Avatar billede want2learn Nybegynder
20. marts 2004 - 21:42 Der er 19 kommentarer og
2 løsninger

Problem med Tabel

Hvis du tager min code og sætter den ind i et HTML dokument, så kan du se, at i venstre side i bunden, har jeg "online og besøg".
Det står et sjovt sted, men da jeg har lavet min tabel til 360PX så står den det rigtige sted, men hvis jeg nu henter en tekst ind i midten, som jeg har gjort. Så vil jeg gerne have at "online og besøg" kommer til at værer i bunden, ca. ud for de sidste 2 linjer i midten.

hvordan gør jeg, så den tabel der er i venstre side, bliver fleksibel så den sættet "online og besøg" i bunden, ligemeget hvor meget tekst der er i midten !?

MIN CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="dan">
<link rel="stylesheet" type="text/css" href="include/one.css" title="one">
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="760px" height="320px" class="tdborder"><tr><td height="86px" colspan="2" class="banner"></td></tr><tr><td height="25px" colspan="2" background="images/menu.gif" valign="middle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="menutext"><b><a class="menu" href="default.asp"><span class="black">site</span><span class="cchanges">Web</span></a> | <a class="menu" href="designer/"><span class="black">Designer</span><span class="cchanges">Web</span></a> | <a class="menu" href="computer"><span class="black">Computer</span><span class="cchanges">Web</span></a> | <a class="menu" href="internet"><span class="black">Internet</span><span class="cchanges">Web</span></a> | <a class="menu" href="tutorials"><span class="black">Tutorials</span><span class="cchanges">Web</span></a></b></span></td></tr><tr><td width="20%" height="100%" align="left" valign="top" class="tdborder"><table border="0" cellspacing="3" cellpadding="3" width="100%" height="100%"><tr><td valign="top" height="60px"><div class="punkt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.asp?page=Information" class="menu"><span class="black"><b>Information</b></span></a></div><div class="punkt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.asp?page=Fremtid" class="menu"><span class="black"><b>Fremtid&nbsp;på&nbsp;XMW</b></span></a></div><div class="punkt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.asp?page=Regler" class="menu"><span class="black"><b>Regler</b></span></a></div><div class="punkt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.asp?page=Kontakt" class="menu"><span class="black"><b>Kontakt</b></span></a></div><div class="punkt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.asp?page=Annoncering" class="menu"><span class="black"><b>Annoncering</b></span></a></div></td></tr><tr><td height="*px"></td></tr><tr><td valign="bottom" align="right" height="60px"><b>Online<br />Besøg Ialt</b></td></tr></table></td><td width="80%" height="100%" class="tdborder"><table border="0" cellspacing="3" cellpadding="1" width="100%" height="100%"><tr><td align="left" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><a class="hierarchical" href="default.asp">site</a></b><span class="se"><b> > </b></span><b>Velkommen til site.</b><br /><div align="right" class="sideinfonr"><b>ITTB:</b> 21032004053000-1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><br />Magna luptatum ut veniam consequat in autem nisl ullamcorper sit, vel aliquam facilisis duis vero. Nibh molestie consequat minim tation eum sed dolor augue. Minim, dolor dolor, wisi et facilisi, et adipiscing illum eu iusto praesent enim euismod consectetuer, feugait augue in. Nulla eros, eum ad qui diam aliquip facilisis qui delenit quis dolore diam nulla dolore. Blandit, exerci iusto hendrerit accumsan tation esse commodo ut velit te odio eu tincidunt, eros.

Lobortis wisi et dolore lobortis, magna enim consequat, volutpat velit consequat iriure sed wisi. Iusto odio duis vel commodo in accumsan vulputate illum consequat, molestie ipsum ut duis duis ut, ullamcorper, nulla exerci tation blandit enim, dolore vero odio amet. Qui nisl in nostrud consequat iusto, eum, suscipit autem vero wisi, dolore exerci ut erat facilisis magna. Ut nulla duis amet autem, augue, et zzril delenit, ut dignissim at in esse. Molestie vulputate, te nonummy luptatum ex zzril esse duis minim. Dolor, iusto volutpat zzril nulla quis eum vero vel eum hendrerit vulputate. Consectetuer dolor exerci ea feugiat nulla molestie minim nonummy nulla dolore tincidunt consectetuer dolore nulla lorem commodo ut at.

Blandit, exerci iusto hendrerit accumsan tation esse commodo ut velit te odio eu tincidunt, eros. Iriure, lobortis lobortis hendrerit, esse dignissim, nisl illum, nulla ad consequat commodo praesent at vel iusto eros aliquip delenit velit nibh luptatum ea feugiat. Molestie nostrud eu vel augue, duis feugiat quis ad. Tation dolore, vel laoreet lobortis te commodo adipiscing qui aliquam in aliquip iriure ea, ullamcorper nostrud lorem lorem laoreet, erat ex, ut vel in luptatum ut. Duis consequat in autem nisl ullamcorper sit, vel aliquam facilisis duis vero dolor molestie consequat minim tation eum sed dolor. Duis luptatum, dolor dolor, wisi et facilisi, et adipiscing illum eu iusto praesent enim euismod consectetuer, feugait augue. Feugiat vulputate eros, eum ad qui diam aliquip facilisis qui delenit quis dolore diam nulla.
<br /><br /></td></tr></table></td></tr><tr><td height="60px" colspan="2" align="center" valign="middle" class="tdcopyright"><a class="cp" href="#"><b>Copyright</b></a>&nbsp;©&nbsp;2001-2004&nbsp;<a class="cp" href="#"><b>site</b></a>&nbsp;All&nbsp;right&nbsp;reserved.&nbsp;/&nbsp;<a class="cp" href="#"><b>site</b></a>&nbsp;er&nbsp;hosted&nbsp;af&nbsp;<a class="cp" href="#"><b>SecNet</b></a>.<br />Validated&nbsp;for&nbsp;ASP3,&nbsp;CSS2,&nbsp;Access&nbsp;2003&nbsp;And&nbsp;HTML&nbsp;4.01&nbsp;W3C&nbsp;Standards.</td></tr></table>       
</body>
</html>
Avatar billede roenving Novice
20. marts 2004 - 22:04 #1
Sæt nogle id'er på de to tabeller, som skal have samme højde, og gør så sådan onload:

<script type="text/javascript">
var elms = ['left','middle','right'];//her indsætter du de id'er, som skal bruges !-)

function syncronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=maxH + 'px';
  }
}
</script>
Avatar billede want2learn Nybegynder
20. marts 2004 - 22:11 #2
hvis min menu tabel hedder <Table id=""left"" ... og min midte <table id=""middle"" ...

hvad så med dit script !?
Avatar billede roenving Novice
20. marts 2004 - 22:23 #3
Så skal linjen bare hedde:

var elms = ['left','middle'];
Avatar billede want2learn Nybegynder
20. marts 2004 - 22:25 #4
okay så har jeg ret i at hvis jeg har en stor tabel med 2 cols.

hvor der er en tabel i hver som har hver deres ID så selvom den store tabel har en grænse der hedder 360px og der evt er så meget tekst i den tabel som evt er main så vil menu og mail tabellerne være lige store også størrer end de 360px da der er meget tekst i main.
Avatar billede roenving Novice
20. marts 2004 - 22:28 #5
Det skulle det der synkroniser-script gøre, ja !-)
Avatar billede want2learn Nybegynder
20. marts 2004 - 22:31 #6
okay men nu har jeg så rette det og det virker men den laver om på nogle af mine tekst class's.

Hvorfor gør den det !?

er det min DOCTYPE !?
Avatar billede want2learn Nybegynder
20. marts 2004 - 22:36 #7
sådan her skulle det se ud.

http://www.p2u.dk/

men efter at have lavet en id og sat dit script ind løste den problemmet men får det til at se ud somom der er en ekstra <br> i mellem hvert menu link og min velkommen til tekst og besøg/online bliver andret til en tekst som svare til H2 eller H3.
Avatar billede want2learn Nybegynder
23. marts 2004 - 09:08 #8
@ Roenving

.......
Avatar billede roenving Novice
23. marts 2004 - 21:19 #9
Som standard vil browserne 'strække' cellers højde, så de udfylder en højde, som de skal være, et eksempel kunne være, at man lave rowspan="2" på en celle, så vil indholdet i den celle blive anderledes, hvis højden i cellerne ved siden af ændres ...

Løsningen er at lave tabeller i tabeller, eller sætte indholdet, som ikke må strækkes ind i et andet element f.eks. en div eller span !-)
Avatar billede want2learn Nybegynder
23. marts 2004 - 22:47 #10
okay vil du lægge et svar !!
Avatar billede roenving Novice
23. marts 2004 - 23:07 #11
Velbekomme '-)
Avatar billede roenving Novice
24. marts 2004 - 16:31 #12
-- og tak for points ;~}
Avatar billede want2learn Nybegynder
24. marts 2004 - 21:41 #13
det er mig der takker ;)
Avatar billede want2learn Nybegynder
25. marts 2004 - 11:02 #14
@ ROENVING

jeg kan få dit script til at virke på en alm. HTML side men ikke på en XHTML side.
vil du ikke kigge på det du skal nok få nogle P hvis det er det men ville blive glad hvis du lige ville kigge på det for kan ikek få det til at virke og har prøvet en del.

MIN INDEX.HTML SIDE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-language" content="dan" />
<link rel="stylesheet" type="text/css" href="include/one.css" title="one" />
<script type="text/javascript" src="include/syncronizedivs.js"></script>
</head>
<body>
<table id="table_main" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" class="top_banner"></td>
  </tr>
  <tr>
    <td colspan="2" class="top_menu"></td>
  </tr>
  <tr>
    <td class="td_menu"><table id="table_menu" cellpadding="0" cellspacing="0">
          <tr>
            <td>menu<br /><br /><br /><br /><br /><br /><br />sfhsf</td>
          </tr>
        </table>
    </td>
    <td class="td_text_main"><table id="table_text_main" cellpadding="0" cellspacing="0">
          <tr>
            <td>text<br /><br /><br /><br /><br />sfhsf</td>
          </tr>
        </table>
    </td>
  </tr>
</table>
</body>
</html>

MIN SYNCRONIZEDIVS.JS SITE:
var elms = ['table_menu','table_text_main'];//Dette script gør at tabellerne menu og main altid vil være lige høje.

function syncronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=maxH + 'px';
  }
}

MIN ONE.CSS FIL:
@charset "UTF-8";
@import "one/top_banner.css";
@import "one/top_menu.css";
@import "one/td_menu.css";
@import "one/td_text_main.css";

html,body {
height:100%;
text-align: center;
}

body, td {
  color: #000000;
  font-family: Tahoma;
  font-size: 11px;
  padding: 0px;
  border-collapse: collapse;
}

table {
  border-collapse: collapse;
}

#table_main {
  background-color: #ffffff;
  border: 1px solid #000000;
  text-align: center;
  vertical-align: top;
  width: 760px;
}

#table_menu {
  background-color: #ffffff;
  border: 1px solid #000000;
  text-align: left;
  vertical-align: top;
  width: 100%;
}

#table_text_main {
  background-color: #ffffff;
  border: 1px solid #000000;
  text-align: left;
  vertical-align: top;
  width: 100%;
}

MIN TD_MENU.CSS FIL:
.td_menu { 
text-align: left;
vertical-align: top;
height: 100%; 
width: 160px;
}

MIN TD_TEXT_MAIN.CSS FIL:
.td_text_main { 
text-align: left;
vertical-align: top;
height: 100%; 
width: 600px;
}

Håber du lige vil hjælpe så jeg kan få det til at virke på mine to tabeller i menu området i venstre side og main området i midten så de altid er lige store og har str. efter den største af de to.

PFH Mange tak ROENVING
Avatar billede roenving Novice
25. marts 2004 - 14:34 #15
I SYNCRONIZEDIVS.JS:

var elms = ['table_menu','table_text_main'];//Dette script gør at tabellerne menu og main altid vil være lige høje.

function syncronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=maxH + 'px';
  }
}
window.onload = synchronizeDivs;
Avatar billede roenving Novice
25. marts 2004 - 14:36 #16
Hov, der mangler et h eller er et for meget:

var elms = ['table_menu','table_text_main'];//Dette script gør at tabellerne menu og main altid vil være lige høje.

function synchronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=maxH + 'px';
  }
}
window.onload = synchronizeDivs;
Avatar billede want2learn Nybegynder
25. marts 2004 - 14:53 #17
jeg siger tak ;)
Avatar billede roenving Novice
25. marts 2004 - 15:20 #18
U'r welcome !-)
Avatar billede want2learn Nybegynder
03. maj 2004 - 01:23 #19
Dette er da blevet lukket får ved ikke hvorfor det står som åbent nu igen og kan ikek huske hvem der fik point men hvis nogle har fået trukket dem fra igen så skriv
eksperten har jo været nede så det kan være en fejl !!
Avatar billede roenving Novice
03. maj 2004 - 01:38 #20
Hallo, den fik jeg zq da, men bedre at spørge, når der har været problemer, end at efterlade det som et tomt spørgsmål !-)
Avatar billede want2learn Nybegynder
03. maj 2004 - 01:46 #21
ja derfor ville jeg lige skrive da jeg kunne se at jeg ikke have 2 åbne mere men 7 efter at EXP havde været nede men NP ;)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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