Søg
Avatar billede jnrmgs Juniormester
13. februar 2011 - 22:31 Der er 4 kommentarer og
1 løsning

Højde på 100% i en tabel

Hej!

Jeg er ved at lave en hjemmeside, som på forsiden består af 3 sider.

Koden ser således ud:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hjemmeside</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="162" rowspan="2"><!--#include file="side.html"--></td>
    <td valign="top"><!--#include file="menu.html"--></td>
  </tr>
  <tr>
    <td valign="top"><!--#include file="head.html"--></td>
  </tr>
</table>
</body>
</html>

I venstre side vil jeg gerne have vist et smalt billede på alle sider. Mit problem er at jeg ikke på nogen måde kan få den til at lave tabellen 100% i højden, så farven i denne tabel altid vil gå ned i bunden, uanset hvad der vises i "head". Jeg kan sagtens få det til at virke når jeg KUN viser siden "side.html", men ikke når jeg vil vise siden index.asp.

Min "side.html" ser sådan ud:

<!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=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table id="wrapper" cellpadding="0" cellspacing="0" bgcolor="#9801CC">
  <tr>
    <td valign="top"><img src="jpeg/billede.jpg" width="152" height="447"/></td>
  </tr>
</table>
</body>
</html>


Style.css ser sådan ud:

html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
}


Nogen gode råd?

På forhånd tak!
Avatar billede tjens Nybegynder
13. februar 2011 - 23:08 #1
Når du laver serverside-include, skal dine include-sider ikke indeholdet HEAD, META, STYLE og BODY-tags:
Det der sendes til browseren, får strukturen ødelagt hvis det kopieres med ind i siden.

(Med mindre at det er en funktionalitet i serveren at filtrere det fra.)

Prøv at lave en ShowSource i browseren.

Og hvis siden indeholder flere gange <head>,<body> o.s.v så
prøv at slette alt, til og med <body> og </body></html> i bunden.
Avatar billede jnrmgs Juniormester
14. februar 2011 - 21:20 #2
Jeg har før brugt serverside-includes på en masse sider, og det har virket uden problemer!

Jeg har nu prøvet at fjerne head, body m.v. i de html-filer der er includeret i index.asp, med stadig samme resultat. Baggrundsfarven i tabellen VIL stadig ikke gå ned i bunden. Den stopper, der hvor billedet stopper!

Koden som index.asp laver er følgende:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Helene Fischer</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="162" rowspan="2"><table id="wrapper" cellpadding="0" cellspacing="0" bgcolor="#9801CC">
  <tr>
    <td valign="top"><img src="jpeg/Billede.jpg" width="152" height="447" alt="Hjemmeside" /></td>
  </tr>
</table>
</td>
    <td valign="top"><h1 class="Center">Hjemmeside</h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script></td>
  </tr>
  <tr>
    <td valign="top"><table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><p>fsafasdf</p>
    <p>saf</p>
    <p>asf</p>
    <p>asf</p>
    <p>asf</p>
    <p>saf</p>
    <p>asf</p>
    <p>asf</p>
    <p>asf</p>
    <p>asf</p>
    <p>af</p>
    <p>s</p>
    <p>fs</p>
    <p>fs</p>
    <p>fsa</p>
    <p>fsfsa</p>
    <p>&nbsp;</p></td>
  </tr>
</table></td>
  </tr>
</table>
</body>
</html>


Hvad er det der gør at tabellen ikke kan blive 100% høj?
Avatar billede tjens Nybegynder
14. februar 2011 - 22:24 #3
Din rowspan=2 og din baggrundsfarve er ikke på samme element.
Så vi må konkludere at, CSS height:100% som du har sat på via #wrapper, ikke slår igennem på et table element.

Denne skitse giver farve i fuld højde i venstre side, af de to <td> elementer der udgør højre side:
<table cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="162" rowspan="2" bgcolor="#9801CC">
        <img src="box-icon.png" alt="Hjemmeside" /></td>
    <td valign="top">
        <h1 class="Center">Hjemmeside</h1>
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
          </li>
        </ul>
    </td>
  </tr>
  <tr>
    <td valign="top">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td valign="top">
                <p>fsafasdf</p>
                <p>saf</p>
                <p>asf</p>
                <p>asf</p>
            </td>
          </tr>
        </table>
    </td>
  </tr>
</table>

Er det et problem at bgcolor skal flyttes fra side.html til hovedsiden?

Og farven bør vel egentlig komme fra CSS via en class eller id på den første td.
Avatar billede tjens Nybegynder
14. februar 2011 - 22:43 #4
Eller samme design, med nestede divs, i stedet for table:
<style type="text/css" />
html, body {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
}
#leftColor {
    background-color: #9801CC;
    width:162px;
}
.divCell {
    display:table-cell;
    vertical-align: top;
}
</style>
</head>

<body>
<div id="wrapper">
    <div id="leftColor" class="divCell">
        <img src="box-icon.png" alt="Hjemmeside" />
    </div>
    <div class="divCell">
        <div id="topMenu">
            <h1 class="Center">Hjemmeside</h1>
            <ul id="MenuBar1" class="MenuBarHorizontal">
              <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
              </li>
            </ul>
        </div>
        <div id="mainContent">
            <p>fsafasdf</p>
            <p>saf</p>
            <p>asf</p>
            <p>asf</p>
        </div>
    </div>
</div>
</body>
Avatar billede jnrmgs Juniormester
25. februar 2011 - 10:13 #5
Jeg fandt en anden løsning, som blev et stort baggrundsbillede. Men du skal have tak for din hjælp alligevel, som sikkert kan bruges en anden god gang.

Hvis du lige laver et svar får du pointene.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 22:02 Låse brugt iPad op Af drstein i iOS, iPhone & iPad
I går 19:21 Hvor finder jeg en oversigt over mine spørgsmål Af KurtG i Hjælp og fejl
I går 11:31 TP-Link Wifi extender opsat som accesspoint giver 50% up- og download, Af Uvanga i Wifi
26/1213:05 Hvorfor bliver tiff-filer større ved konvertering til samme format Af KurtG i Billedbehandling
23/1221:36 Gøre Ikonerne lidt større i proceslinjen (Windows 10) Af Ikke-ekspert i Windows
White papers
Flere white papers »