Avatar billede kgp43 Nybegynder
15. april 2004 - 20:51 Der er 10 kommentarer og
1 løsning

Når doc-type sættes går der kludder i min tabel

Hejsa,

Jeg har en tabel (venstre menu), der bliver included i index.php. Menuen/tabellen, har en højde på 100%, men den har konstant en højde der passer med indholdet... hvis i forstår.

------------------------
Include/menu'en:
------------------------
<table width="150" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="border-left-bottom">       
    <tr align="left" bgcolor="#EAF4FF">
        <td height="20" colspan="2" class="leftmenu-text">&nbsp;</td>
    </tr>
    <tr>
        <td width="3" height="20" align="center" bgcolor="#FF7735">&nbsp;</td>
       
    <td height="20" align="left" bgcolor="#FFFFFF" class="leftmenu-topic"><img src="/img/arrow.jpg"> Radio Stations</td>
    </tr>   
    <tr align="left" bgcolor="#EAF4FF">
       
    <td height="20" colspan="2" class="leftmenu-text"><a href="/stations/index.php">Find
      a radio station</a></td>
    </tr>   
    <tr align="left" bgcolor="#EAF4FF">
        <td height="20" colspan="2" class="leftmenu-text">Add a radio station</td>
    </tr>
    <tr align="left" bgcolor="#EAF4FF">
        <td height="20" colspan="2" class="leftmenu-text">&nbsp;</td>
    </tr>
    <tr>
        <td width="3" height="20" align="center" bgcolor="#FF7735">&nbsp;</td>
       
    <td height="20" align="left" bgcolor="#FFFFFF" class="leftmenu-topic"><img src="/img/arrow.jpg">
      Other</td>
    </tr>
    <tr align="left" bgcolor="#EAF4FF">
       
    <td height="20" colspan="2" class="leftmenu-text">Google Adsense</td>
    </tr>
    <tr align="left" bgcolor="#EAF4FF">
        <td height="20" colspan="2" class="leftmenu-text">&nbsp;</td>
    </tr>
    <tr>
        <td width="3" height="20" align="center" bgcolor="#FF7735">&nbsp;</td>
       
    <td height="20" align="left" bgcolor="#FFFFFF" class="leftmenu-topic"><img src="/img/arrow.jpg">
      Top Partners</td>
    </tr>
    <tr align="left" bgcolor="#EAF4FF">
       
    <td height="20" colspan="2" class="leftmenu-text">1. Bla Bla Bla Bla</td>
    </tr>
    <tr align="left" bgcolor="#EAF4FF">
       
    <td height="20" colspan="2" class="leftmenu-text">2. Bla Bla Bla Bla</td>
    </tr>
    <tr align="left" bgcolor="#EAF4FF">
       
    <td height="20" colspan="2" class="leftmenu-text">3. Bla Bla Bla Bla</td>
    </tr>
    <tr align="left" bgcolor="#EAF4FF">
       
    <td height="20" colspan="2" class="leftmenu-text">4. Bla Bla Bla Bla</td>
    </tr>
    <tr align="left" bgcolor="#EAF4FF">
       
    <td height="20" colspan="2" class="leftmenu-text">5. Bla Bla Bla Bla</td>
    </tr>
    <tr align="right" bgcolor="#EAF4FF">
       
    <td height="20" colspan="2" class="leftmenu-text">more...</td>
    </tr>
   
  <tr align="left" valign="top" bgcolor="#EAF4FF">
    <td colspan="2" class="leftmenu-text">&nbsp;</td>
    </tr>
</table>


------------------------
index.php
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Radioload: Online radio stations</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/style.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="780" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="top">
      <?
    include "/home/radioloa/public_html/topmenu.php";
    ?>
      <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="150">
          <?
          include "/home/radioloa/public_html/leftmenu.php";
          ?>
          </td>
          <td width="630">&nbsp;</td>
        </tr>
      </table> </td>
  </tr>
  <tr>
    <td height="20" align="center">
      <?
    include "/home/radioloa/public_html/footer.php";
    ?>
    </td>
  </tr>
</table>
</body>
</html>
Avatar billede kgp43 Nybegynder
15. april 2004 - 20:52 #1
Kan forresten ses her: www.radioload.com
Avatar billede kgp43 Nybegynder
15. april 2004 - 22:10 #2
point hævet til 60
Avatar billede sukos Juniormester
16. april 2004 - 01:13 #3
Jeg ville droppe de 100% i height
Avatar billede roenving Novice
16. april 2004 - 01:49 #4
-- og det er et rigtigt godt råd sukos kommer med, for der eksisterer simpelthen ikke en height-attibut til et table-tag !-)

-- og %-angivelser skal vide hvor den fulde størrelse (100%) kommer fra, så efter standarden (som du jo sikrer overholdelse af ved at sætte korrekt doctype inklusive dtd-link !-) skal de tage den størrelse fra det nærmest omkransende positionerede element ...

Da du overhovedet ikke har nogle positionerede elementer, skal den tage sin størrelse fra body-elementet, hvis du bruger den korrekte måde at angive højde for f.eks. et table-element:

<table ... style="height:100%;">

-- selv ville jeg nok finde på at fake en kolonne med nogle div i den situation, da den virker uden problemer i alle browsere, som forståt dtd'erne !-)
Avatar billede kgp43 Nybegynder
16. april 2004 - 06:37 #5
Hvad mener du med "positionerede elementer" ?
Avatar billede kgp43 Nybegynder
16. april 2004 - 07:47 #6
"Da du overhovedet ikke har nogle positionerede elementer, skal den tage sin størrelse fra body-elementet..."

Er det ikke det jeg gør?

Jeg har en tabel der går fra top til bund (height 100%). Denne tabel bruger jeg til at smide en footer ind, nederst på siden - måske skulle jeg bruge CCS til dette i stedet for, men det løser stadig ikke mit problem. Vil gerne have at menuen (og indholdsrammen) går ned i bunden af siden.

Hvormeget lettere er det at bruge CCS?
Syntes det virker uoverskueligt, når man ikke kan se hvordan designet ser ud, uden at uploade. Nb Skal dog siges at jeg bruger CCS til diverse andre ting, men ikke til at positionere tables
Avatar billede roenving Novice
16. april 2004 - 18:04 #7
Bare lidt kommentarer, jeg håber det kan hjælpe dig til at forstå:

1. height-attributten findes ikke til et table-element, på samme måde som det ikke giver mening at snakke om benzintank på en cykel ...

2. Hvis man angiver en relativ størrelse (f.eks. i %) skal den størrelse beregnes ud fra et eller andet, som det kan være det hele eller det halve af, i css er det helt fastlagt, at det er det 'nærmest omkransende positionerede element', ikke nødvendigvis et element, du har flyttet et andet sted hen, den kan f.eks. være angivet med: style="position:relative;top:0px;left:0px;", hvilket ikke vil flytte det nogetsomhelst, men så er det et positioneret element ...

3. Hvis du så angiver noget inde i din tabel, som skal have 100% i højde, er der kun body-elementet at tage den højde fra, så det element vil typisk skulle have skærmhøjde, sjældent hensigtsmæssigt ...

4. Det kan i visse tilfælde være meget besværligt at bruge css, men nogle gange også meget lettere, fordi det er beregnet til at lave layoutet, du kan her se et eksempel på en løsning, som vist også har det med, du har brug for: http://www.eksperten.dk/spm/488278 !-)
Avatar billede olebole Juniormester
16. april 2004 - 22:09 #8
<ole>

Det omkransende element behøver ikke at være positioneret.
Til gengæld _skal_ det have den dimension sat, man ønsker at bruge til procent-angivelse i child-elementet.

/mvh
</bole>
Avatar billede kgp43 Nybegynder
19. juni 2004 - 23:02 #9
roenvig: ligger du et svar så jeg kan få spørgsmålet lukket :)
Jeg har løst problemet med at bruge div's (samt CSS)
Avatar billede roenving Novice
19. juni 2004 - 23:12 #10
Velbekomme '-)
Avatar billede roenving Novice
20. juni 2004 - 02:15 #11
-- og tak for point ;~}
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