HTML 4.01 gör mig tokig

5 svar · 317 visningar · startad av voigtann1 22 okt. 2004

voigtann1Medlem sedan juni 20019 519 inlägg

Frågan22 okt. 2004 09:56#1

Har försökt att lära mig HTML 4.01... känns som man är tillbaka från början :e problemet är att jag brukar köra

<table height='100%'>

men det fungera ju inte i 4.01 så jag försökte köra:

<table style='height:100%'>

Vilket inte gav det resultat jag ville.. så jag la in

<body style='height:100%'>

Vilket ger nästan det resultat jag vill.. förutom att tabellen hamnar i mitten av hela sidan... har försökt med

vertical-align:top;

i både body taggen och table taggen.. hur gör man?

frankofMedlem sedan jan. 20016 874 inlägg

22 okt. 2004 10:17#2

Fungerar inte Jarvklos förslag i denna fråden?: http://www.webforum.nu/showthread.php?s=&postid=935560#post935560

voigtann1Medlem sedan juni 20019 519 inlägg

22 okt. 2004 10:32#3

tyvärr inte... eller du menar att jag inte ska köra tabeller?

jarvkloMedlem sedan juli 20013 378 inlägg

22 okt. 2004 15:19#4

Klart du kan köra tabeller - även om MSIE "manglar till" raders och kolumners inbördes mått emellanåt - men det är en helt annan historia ;)
Men ingen kod - inga bra svar du vet ;)

Visa koden - klappklappklapp
Visa koden - klappklappklapp
Visa koden - klappklappklapp

:bire

voigtann1Medlem sedan juni 20019 519 inlägg

22 okt. 2004 15:55#5

HTML kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>V.Panel</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<!-- #include file="scripts/decodes.asp" -->
<body>
<table style='width:100%;height:100%' border='0' cellspacing='0' cellpadding='2'>
  <tr>
    <td style='width:50px;background:#eeeeee;height:100%'>&nbsp;</td>
    <td>
      <table style='width:100%;height:100%' border='0' cellspacing='0' cellpadding='6'>
        <tr>
          <td style='height:78px;width:279px'><img src='images/logo.gif' width='279' height='78' alt='V.Panel'></td>
          <td style='width:100%'><%menu() : response.write space(10)%></td>
        </tr>
        <tr> 
          <td valign='top' style='height:100%' colspan='2'>
            <table>
              <tr>
                <td><% mainpage()%></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td style='width:50px;background:#EEEEEE'></td>
  </tr>
</table>

<table style='width:100%;' border='0' cellspacing='0' cellpadding='2'>
  <tr>
    <td style='width:50px;background:#eeeeee;height:100%'>&nbsp;</td>
    <td>
      <table style='width:100%'>
        <tr>
          <td>
            <a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-html401" width="88" height="31" alt="Valid HTML 4.01!" style="border:0"></a>
            <a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
            <img src="msWindowsServer2003.gif" alt="Microsoft Windows 2003 Server">
          </td>
          <td align='right'>Copyright &copy; v.panel 2003 All Rights reserved.</td>
        </tr>
      </table>
    </td>
    <td style='width:50px;background:#eeeeee;height:100%'>&nbsp;</td>
  </tr>
</table>

</body>
</html>

och css

html, body {
	height:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background:#ffffff;
	color:#333333;
	margin:0px 0px 0px 0px;
}

a {
	color: #333333;
	}
HR {
	position:absolute;
	}
UL {
	margin:0px 0px 0px 20px;
	}
.TblBody {
	padding-top:7px;
	padding-left:7px;
	padding-bottom:13px;
	padding-right:7px;
	color:#000000;
	}

td{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	}

jarvkloMedlem sedan juli 20013 378 inlägg

22 okt. 2004 23:45#6

Hmm..

Gissar jag rätt när jag gissar att det är något liknande det här du är ute efter ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>V.Panel - I princip</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {height:100%;margin:0; padding:0;}
-->
</style>
</head>
<body>
<table style='height:100%;width:100%' border='0' cellspacing='0' cellpadding='0'>
  <tr style="vertical-align:top">
    <td style='width:50px;background:#eeeeee;' rowspan="2">&amp;nbsp;</td>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr style="vertical-align:top">
          <td style='height:78px;width:279px'><img src='images/logo.gif' width='279' height='78' alt='V.Panel'></td>
          <td>menu() : response.write space(10)</td>
        </tr>
      </table>
      <div style="margin:2px">
       mainpage()
      </div>
    </td>
    <td style='width:50px;background:#eeeeee;' rowspan="2">&amp;nbsp;</td>
  </tr>
  <tr style="vertical-align:bottom">
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr style="vertical-align:top">
          <td style="white-space:nowrap">
            <a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-html401" width="88" height="31" alt="Valid HTML 4.01!" style="border:0"></a>
            <a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
            <img src="msWindowsServer2003.gif" alt="Microsoft Windows 2003 Server">
          </td>
          <td align='right'>Copyright © v.panel 2003 All Rights reserved.</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Man kan alltså inte lita på att höjder i tabeller som har både absoluta och relativa höjdmått i olika rader verkligen blir som man tänkt sig.
Så i koden ovan har du en "strukturtabell" med två rader som definierar dina marginalceller (med rowspan) och en "övre" cell för meny + innehåll samt en "undre" för sidfoten.
Genom att köra valign="top" i övre cellen (+ en separat tabell för logo och meny) samtidigt som du kör valign="bottom" på den undre (också där med en separat tabell för sidfoten) funkar detta ändå så länge du varken har border på strukturtabellen, och så länge du har samma bakgrundsfärg på övre och undre cellen i strukturtabellen så funkar det! ;)

Hackelihack - men det funkar som sagt (om man nu väljer att köra med tabeller för layout och en <!DOCTYPE som ger "strict" mode samtidigt ;) )