webForumDet fria alternativet

<tr> och valign i XHTML?

24 svar · 520 visningar · startad av Mika3l · sida 2 av 2

Mika3lMedlem sedan nov. 20018 492 inlägg
#21

Nu har jag problem igen! :l
Jag har ett table som jag vill ska täcka gå över hela skrämen vertikalt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> +++---::: Feel Digital :::---+++ </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="webbdesign, webdesign, design, programmering, internetprogrammering, internet, webb, hemsidor, feel digital, feeldigital, digital, feel, domän, domänförsäljning, webbhotell, webbutveckling, webbyrå, internettjänster" />
<meta name="Description" content="Feel Digital - Feel Digital är en webbyrå med säte i Uddevalla som tillverkar hemsidor och säljer utrymme på servrar(webbhotell) och domäner." />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<table align="center" cellspacing="0" cellpadding="0" style="width: 630px; height: 100%;">
 <tr>
  <td style="width: 5px; background: #A4A4A4;">
  </td>
  <td style="width: 5px; background: #D2D2D2;">
  </td>
  <td valign="top" style="width: 610px; padding: 0px; background: #FFFFFF;">

<table align="center" cellspacing="0" cellpadding="2" border="0" style="width: 600px;">
 <tr>
  <td colspan="3" style="height: 13px;">
  </td>
 </tr>
 <tr>
  <td style="width: 490px; vertical-align: top; text-align: left; padding: 0px;">
<table cellspacing="0" cellpadding="2" border="0" style="width: 490px;">
 <tr>
  <td style="background: #303030; color: #F8F8F8; font-weight: bold;">
FEELDIGITAL.NET - Startsidan
  </td>
 </tr>
 <tr>
  <td style="height: 70px;">
FEEL DIGITAL<br />
Where digital feelings comes true
  </td>
 </tr>
 <tr>
  <td style="background: #DFDFDF; height: 13px; text-align: left; vertical-align: middle;">
<a href="#" class="submenu">Submenu</a>
  </td>
 </tr>
</table>
  </td>
  <td style="width: 10px;">
  </td>
  <td style="width: 100px; padding-top: 0px;">
<table cellspacing="0" cellpadding="2" border="0" style="width: 100px;">
 <tr>
  <td style="background: #494949; text-align: left; vertical-align: middle; border-bottom: 1px solid #FFFFFF;"  onmouseover="this.style.background='#999999';return true;" onmouseout="this.style.background='#494949';return true;">
<a href="index.asp" class="menu">Startsidan</a>
  </td>
 </tr>
 <tr>
  <td style="background: #494949; text-align: left; vertical-align: middle; border-bottom: 1px solid #FFFFFF;" onmouseover="this.style.background='#999999';return true;" onmouseout="this.style.background='#494949';return true;">
<a href="about.asp" class="menu">Om oss</a>
  </td>
 </tr>
 <tr>
  <td style="background: #494949; text-align: left; vertical-align: middle; border-bottom: 1px solid #FFFFFF;" onmouseover="this.style.background='#999999';return true;" onmouseout="this.style.background='#494949';return true;">
<a href="services.asp" class="menu">Tjänster</a>
  </td>
 </tr>
 <tr>
  <td style="background: #494949; text-align: left; vertical-align: middle; border-bottom: 1px solid #FFFFFF;" onmouseover="this.style.background='#999999';return true;" onmouseout="this.style.background='#494949';return true;">
<a href="customers.asp" class="menu">Kunder</a>
  </td>
 </tr>
 <tr>
  <td style="background: #494949; text-align: left; vertical-align: middle; border-bottom: 1px solid #FFFFFF;" onmouseover="this.style.background='#999999';return true;" onmouseout="this.style.background='#494949';return true;">
<a href="customer_login.asp" class="menu">Kundinloggning</a>
  </td>
 </tr>
 <tr>
  <td style="background: #494949; text-align: left; vertical-align: middle; border-bottom: 1px solid #FFFFFF;" onmouseover="this.style.background='#999999';return true;" onmouseout="this.style.background='#494949';return true;">
<a href="contact.asp" class="menu">Kontakt</a>
  </td>
 </tr>
</table>
  </td>
 </tr>
 <tr>
  <td colspan="3">
Feel digital!
  </td>
 </tr>
</table>

 </td>
  <td style="width: 5px; background: #D2D2D2;">
  </td>
  <td style="width: 5px; background: #A4A4A4;">
  </td>
 </tr>
</table>

</body>
</html>

Så ser koden ut, men den blir aldrig 100%.
Det "stannar" där som innehållet i mitten tar slut.

Någon som vet vad det kan bero på, tycker det är helmysko! :o

jarvkloMedlem sedan juli 20013 378 inlägg
#22

Lägg in följande i din CSS-fil...

html,body {height:100%; margin:0; padding:0;}

Såvitt jag kan se borde det fixa ditt problem... (har inte provkört din kod dock!!!)

Det är egentligen inget konstigt om man rotar en del i standarderna... Såhär är det ("skall det vara") när man kör med en "korrekt" <!DOCTYPE och därmed hamnar i "Standards mode" ;)

"Höjd-fenomenet" beror på hur CSS2 specificerar beräkning av relativa höjder av en tabell i kombination med att "moderna webbbläsare" ställer in värdet "auto" för höjden på html och body (vilket betyder "höjden av det man stoppat in på sidan") - och när du tar höjden 100% av "det du stoppat in på sidan" så blir det alltså bara "höjden av det du stoppat in på sidan" och inte "höjden av webbläsarfönstret" om du inte ändrar höjden på html och body sådär...

Mer info (med länkar till CSS2-specen) finns i några gamla trådar här på wF om du orkar söka lite nu när du vet vad du skall söka efter ;)

Fortsätt fråga om du stöter på fler problem! - det är skönt att se att folk börjar använda standard mer och mer och alla som försöker göra det ska enligt min enkla åsikt ha en eloge för att de (också enligt min enkla åsikt) i längden hjälper till att förbättra kodgrunden för webben "som droppen urholkar stenen"! :bire

Mika3lMedlem sedan nov. 20018 492 inlägg
#23

Stort tack! :D
Nu fungerar det perfekt! :bire

Sammy86Medlem sedan apr. 200329 inlägg
#24

En liten detalj bara, ni skrev i början om stora och små bokstäver och att man ska använda små bokstäver till värderna. I xhtml så ska man använda små bokstäver till alla koder. Men det visste ni säkert redan. =)

Peter SMedlem sedan dec. 20025 483 inlägg
131 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)