[CSS] Tabel en Cel height - Softwareontwikkeling

donderdag 3 februari 2005 17:54

Acties:

Gotta catch 'em all

Topicstarter

Ik heb gezocht maar kon niets vinden wat overeen komt met mijn probleem:

Voorbeeld code:

code:

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="main_tabel">
  <tr>
    <td width="100%" colspan="2" class="header">HEADER</td>
  </tr>
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%" rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="80%">&nbsp;</td>
  </tr>
</table>

Nu wil ik de hoogte in css hebben. De hele tabel 100% is me al gelukt alleen de cel waar HEADER in staat wil niet 139 pixels hoog worden maar neemt gewoon een standaard maat aan.

Ik gebruik het doctype HTML 4.01 Transitional en als ik die op 3.2 zet werkt die wel gewoon

Dit is een stukje uit me CSS file:

code:

body, html {
    font-family: Verdana;
    font-size: 8pt;
    text-decoration: none;
    color: #000000;
    margin: 0;
    height: 100%;   
}

.main_table {
    height: 100%;
}

.header {
    height: 139px;
    background-image: url(images/header_back.gif);
}

Hoe zorg ik ervoor dat de header cel 139 px hoog word?

--
Typo Fixed height: 139px;

Neej werkt niet

[ Voor 17% gewijzigd door Mr_Dark op 03-02-2005 17:58 ]

donderdag 3 februari 2005 17:56

Acties:

Verwijderd

'px' erachter zetten helpt al een heel stuk.

donderdag 3 februari 2005 17:57

Acties:

TeeDee

CQB 241

139px ipv 139?

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 3 februari 2005 17:57

Acties:

R4NCOR

eigenlijk gewoon Niels

height: 139px; is al netter..

Waarom werkt het met een ander doc-type wel?

donderdag 3 februari 2005 17:58

Acties:

Mr_Dark

Gotta catch 'em all

Topicstarter

die px was een typo

met of zonder px maakt niet uit.

R4NCOR schreef op donderdag 03 februari 2005 @ 17:57:
height: 139px; is al netter..

Waarom werkt het met een ander doc-type wel?

Geen idee. Misschien word de pagina dan gebruikt door een oudere html versie ofzow

[ Voor 73% gewijzigd door Mr_Dark op 03-02-2005 17:59 ]

donderdag 3 februari 2005 17:59

Acties:

Verwijderd

R4NCOR schreef op donderdag 03 februari 2005 @ 17:57:
Waarom werkt het met een ander doc-type wel?

Quirkmode:

When a value has no unit, in quirks mode the unit px is automatically appended. In strict mode the value is ignored.

Rendering modes - unitless values (strict)
Rendering modes - unitless values (quirks)

[ Voor 8% gewijzigd door Verwijderd op 03-02-2005 18:00 ]

donderdag 3 februari 2005 18:05

Acties:

Verwijderd

Wordt de CSS file wel toegepast/goed gelinkt? Hier werkt je code zonder problemen.

donderdag 3 februari 2005 18:10

Acties:

Verwijderd

Al geprobeerd om het toe te passen op de tr ipv de td

donderdag 3 februari 2005 18:29

Acties:

Mr_Dark

Gotta catch 'em all

Topicstarter

Verwijderd schreef op donderdag 03 februari 2005 @ 18:05:
Wordt de CSS file wel toegepast/goed gelinkt? Hier werkt je code zonder problemen.

Wel met de doctype boven aan de pagina?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Verwijderd schreef op donderdag 03 februari 2005 @ 18:10:
Al geprobeerd om het toe te passen op de tr ipv de td

Nope werkt niet

[ Voor 32% gewijzigd door Mr_Dark op 03-02-2005 18:31 ]

vrijdag 4 februari 2005 13:10

Acties:

Mr_Dark

Gotta catch 'em all

Topicstarter

* schopje *

Niemand een idee..

Maakt het anders veel verschil uit als ik HTML 3.2 gebruik ipv 4.01 ???

vrijdag 4 februari 2005 13:12

Acties:

Verwijderd

Ik gok dat je van die tabellen afwilt.

Anyway, gebruikt HTML 4.01 Strict.

vrijdag 4 februari 2005 13:17

Acties:

Verwijderd

Post eens je complete code, ik denk dat je ergens iets over het hoofd zit.

vrijdag 4 februari 2005 13:21

Acties:

Mr_Dark

Gotta catch 'em all

Topicstarter

Ik gebruik template power vandaar de { }

layout.tpl

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="{IMAGE}/style.css" type="text/css">
<title>Clan Resource</title>
</head>

<body bgcolor="#E5E5E5">
<!-- START BLOCK : pagina -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="main_table">
  <tr>
    <td colspan="2" class="header">
    [img]"{IMAGE}/images/header.gif"[/img]</td>
  </tr>
  <tr>
    <td valign="top" class="menu_2">
    [img]"{IMAGE}/images/menu_top.gif"[/img]<br>
    <table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse" width="100%" class="menu">
      <tr>
        <td width="100%" class="menu_top">Menu</td>
      </tr>
      <tr>
        <td width="100%" class="menu">
        <b>&raquo;</b> <a href="{URL}/index.php?{AUTH}" class="wit">News</a><br>
        <b>&raquo;</b> <a href="{URL}/ladders.php?{AUTH}" class="wit">Games</a><br>
        <br>
        </td>
      </tr>
      <tr>
        <td width="100%" class="menu_top">Players</td>
      </tr>
<!-- START BLOCK : Login_True -->
      <tr>
        <td width="100%" class="menu">
        Welcome <b>{username}</b><br>
        <b>&raquo;</b> <a href="{URL}/admin.php?{AUTH}" class="wit">Admin</a><br>
        <b>&raquo;</b> Pending<br>
        <br>
        <b>&raquo;</b> <a href="" class="wit" onClick="setTimeout('window.close()', 20)">Exit/Logout</a><br>
        <br>
        </td>
      </tr>
<!-- END BLOCK : Login_True --> 
<!-- START BLOCK : Login_False -->
      <tr>
        <td width="100%" class="menu">
        <b>&raquo;</b> <a href="{URL}/members/login.php" class="wit">Login</a><br>
        <b>&raquo;</b> <a href="{URL}/newplayer.php" class="wit">Register</a><br>
        <b>&raquo;</b> Lost Password<br>
        <br>
        </td>
      </tr>
<!-- END BLOCK : Login_False -->
      <tr>
        <td width="100%" class="menu_top">Games</td>
      </tr>
      <tr>
        <td width="100%" class="menu">{the_games}<br></td>
      </tr>
     </table>
    </td>
    <td valign="top" width="100%" rowspan="2">
    <table border="0" cellpadding="6" cellspacing="0" width="100%" class="content">
      <tr>
        <td>
<!-- START BLOCK : tabel -->
        <table border="1" cellpadding="1" cellspacing="0" width="100%" class="tabel_main">
          <tr>
            <td bgcolor="#474747" valign="middle" class="content_top" width="100%">
            [img]"{IMAGE}/images/orange_button.gif"[/img]&nbsp;{titel}</td>
          </tr>
          <tr>
            <td bgcolor="#B9B9B9" class="content" width="100%">
<!-- INCLUDE BLOCK : content -->
<!-- INCLUDE BLOCK : error -->
            </td>
          </tr>
        </table>
        <br>
<!-- END BLOCK : tabel -->  
        </td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td valign="bottom" class="menu">[img]"{IMAGE}/images/menu_bottom.gif"[/img]</td>
  </tr>
</table>
<!-- END BLOCK : pagina -->
</body>

</html>

style.css

code:

body, html {
    font-family: Verdana;
    font-size: 8pt;
    text-decoration: none;
    color: #000000;
    margin: 0;
    height: 100%;   
}

.main_table {
    height: 100%;
}

.border_bottom {
    border-bottom-style:solid;
    border-width: 1px;
    border-color: #000000;
}

.border_top {
    border-top-style:solid;
    border-width: 1px;
    border-color: #000000;
}

.border_left {
    border-left-style:solid;
    border-width: 1px;
    border-color: #000000;
}

.border_right {
    border-right-style:solid;
    border-width: 1px;
    border-color: #000000;
}

.menu_top {
    font-family: Verdana;
    font-size: 10pt;
    color: #D29827;
    font-weight: bold;
}

.tabel_main {
    border-color: #000000;
    border-collapse: collapse;
}

.header {
    height: 139px;
    background-image: url(images/header_back.gif);
}

.menu {
    font-family: Verdana;
    font-size: 9pt;
    color: #DBD9D8;
    background-image: url(images/menu_back.gif);
}

.content_top {
    font-family: Verdana;
    font-size: 16pt;
    color: #DDAC4E;
    font-weight: bold;
    border: 1px solid #000000;
}

.content {
    font-family: Verdana;
    font-size: 9pt;
    color: #000000;
}

.content_2 {
    font-family: Verdana;
    font-size: 11pt;
    color: #000000;
    background-color: #9F9F9F;
}

.copyright {
    font-family: Verdana;
    font-size: 7pt;
    color: #000000;
}

// Gedeelte weg gelaten omdat dit de style van de links is

Ja de style.css link is goed

[ Voor 25% gewijzigd door Mr_Dark op 04-02-2005 13:22 ]

vrijdag 4 februari 2005 13:42

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

Bij mij werkt het in xhtml 1.0 strict en loose, html 4.01 strict en loose en xhtml 1.1.

Je doet waarschijnlijk iets fout of ziet iets over het hoofd.

Huur mij in als freelance SEO consultant!

zaterdag 5 februari 2005 11:40

Acties:

Mr_Dark

Gotta catch 'em all

Topicstarter

Op een of andere vage manier rekt die nu wel uit maar hij pakt nog niet de hoogte van de header cel

Dan krijg je dit:

Afbeeldingslocatie: http://thedark.homeip.net/vaaag.jpg

Afbeeldingslocatie: http://thedark.homeip.net/vaaag.jpg

zaterdag 5 februari 2005 12:00

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

Waar staat het geheel online?

Huur mij in als freelance SEO consultant!

zaterdag 5 februari 2005 12:07

Acties:

Mr_Dark

Gotta catch 'em all

Topicstarter

CrashOne schreef op zaterdag 05 februari 2005 @ 12:00:
Waar staat het geheel online?

Voeg me ff toe @ msn of stuur een email:
mr_dark_iw@hotmail.com

dan geef ik je de link

Pagina: 1

Reageer