Avatar billede muddyw. Praktikant
27. marts 2006 - 22:31 Der er 4 kommentarer og
1 løsning

Problemer med tabel-celler

Jeg har et problem med en htmlside:
Som i kan se nedenfor, så har jeg en side med en menu og et felt med tekst.
Menuen skal være ens på alle siderne, men når jeg ændrer i cellerne med tekst - produktoversigt osv, så disse celler bliver større, så ændrer menuen sig også - og det skal den ikke. (der bliver mere mellemrum mellem de forskellige menulinks).

Hvordan får jeg menuen til at forblive ens uanset hvor høj boksen til højre med tekst bliver??


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-image: url(layout_Stor.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top left;
    margin-left: 0px;
    margin-top: 0px;
}
-->
</style>
<link href="bernstein.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
.style1 {color: #990000}
a:link {
    color: #333333;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #333333;
}
a:hover {
    text-decoration: none;
    color: #990000;
}
a:active {
    text-decoration: none;
    color: #333333;
}
-->
</style>
</head>

<body>
<table width="1030" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="128" colspan="6" class="ovre">&nbsp;</td>
  </tr>
  <tr>
    <td height="19" colspan="6">&nbsp;</td>
  </tr>
  <tr>
    <td width="50" rowspan="11" class="sidemargin">&nbsp;</td>
    <td width="212" class="menu">Forside</td>
    <td width="33" rowspan="11">&nbsp;</td>
    <td width="505" rowspan="11" class="brodtext">
      <table width="100%"  border="0" cellspacing="2" cellpadding="2" style="background-color:#E0F2F2;
    border-bottom:1px solid #cccccc; border-top:1px solid #ffffff;">
        <tr>
          <td><strong>Produktoversigt</strong></td>
        </tr>
        <tr>
          <td>
            <table style="background-color:#FFFFFF; border:1px solid #cccccc;" width="100%"  border="0"

cellspacing="2" cellpadding="2">
              <tr>
                <td width="50%" height="20%"><a href="pro_oversigt.html">Mekaniske endestop</a> </td>
                <td width="50%" rowspan="5"><img src="images/Sensor.jpg" width="275" height="118"></td>
              </tr>
              <tr>
                <td width="50%" height="20%"><a href="montering.html">Monteringskasser</a></td>
              </tr>
              <tr>
                <td width="50%" height="20%"><span class="style1">Sensorer</span></td>
              </tr>
              <tr>
                <td width="50%" height="20%"><a href="proceskom.html">Proceskommunikation</a></td>
              </tr>
              <tr>
                <td  width="50%" height="20%"><a href="atex.html">ATEX materiel</a></td>
              </tr>
          </table></td>
        </tr>
      </table>
      <table width="100%"  border="0" cellspacing="2" cellpadding="2" style="background-color:#E0F2F2;
    border-bottom:1px solid #cccccc; border-top:1px solid #ffffff;">
        <tr>
          <td><strong>Sensorer</strong></td>
        </tr>
        <tr>
          <td>
            <table style="background-color:#FFFFFF; border:1px solid #cccccc;" width="100%"  border="0"

cellspacing="2" cellpadding="2">
              <tr>
                <td>                  <p>Her indeholder programmet en r&aelig;kke elektroniske produkter, og i fl&aelig;ng kan

n&aelig;vnes: </p>
                  <p>
                  <ul>
                    <li>Induktive aftastere i bl.a. euronorm udf&oslash;rsel. <br>
                    <li>Fotocelle aftastere. <br>
                    <li>Kapacitive aftastere. <br>
                    <li>Magnet aftastere. <br>
                    <li>Niveau- og sv&oslash;mmeafbrydere. <br>
                    </li>
                  </ul>
                <p>Derudover tilbyder vi et stort sortiment i PVC / PUR- kabler med stik </p>  </td>
              </tr>
          </table></td>
        </tr>
    </table></td>
    <td width="97">&nbsp;</td>
    <td width="133">&nbsp;</td>
  </tr>
  <tr>
    <td class="menu">Nyheder</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="menu">Produktoversigt</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="menu">Sikkerhedsprodukter</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="menu">Sikkerhedsh&aelig;ngsel</td>
  </tr>
  <tr>
    <td class="menu">Wireendestop</td>
  </tr>
  <tr>
    <td class="menu">Katalogbestilling</td>
  </tr>
  <tr>
    <td class="menu">Online katalog</td>
  </tr>
  <tr>
    <td class="menu">E-mail</td>
  </tr>
  <tr>
    <td class="menu">&nbsp;</td>
  </tr>
</table>
</body>
</html>
Avatar billede miss-g Seniormester
27. marts 2006 - 22:41 #1
Du kan jo lave menuen i en tabel for sig, som ligger i venstre celle. Så rykker den sig ingen steder *S*
Avatar billede miss-g Seniormester
27. marts 2006 - 22:45 #2
Sådan her:

----------------------------------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-image: url(layout_Stor.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top left;
    margin-left: 0px;
    margin-top: 0px;
}
-->
</style>
<link href="bernstein.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
.style1 {color: #990000}
a:link {
    color: #333333;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #333333;
}
a:hover {
    text-decoration: none;
    color: #990000;
}
a:active {
    text-decoration: none;
    color: #333333;
}
-->
</style>
</head>

<body>
<table width="1030" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="128" colspan="6" class="ovre">&nbsp;</td>
  </tr>
  <tr>
    <td height="19" colspan="6">&nbsp;</td>
  </tr>
  <tr>
    <td width="50" rowspan="5" class="sidemargin">&nbsp;</td>
    <td width="212" rowspan="4" valign="top" class="menu"><table width="212" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>Forside</td>
      </tr>
      <tr>
        <td>Nyheder</td>
      </tr>
      <tr>
        <td>Produktoversigt</td>
      </tr>
      <tr>
        <td>Sikkerhedsprodukter</td>
      </tr>
      <tr>
        <td>Sikkerhedsh&aelig;ngsel</td>
      </tr>
      <tr>
        <td>Wireendestop</td>
      </tr>
      <tr>
        <td>Katalog bestilling</td>
      </tr>
      <tr>
        <td>Online katalog</td>
      </tr>
      <tr>
        <td>E-mail</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td width="33" rowspan="5">&nbsp;</td>
    <td width="505" rowspan="5" class="brodtext">
      <table width="100%"  border="0" cellspacing="2" cellpadding="2" style="background-color:#E0F2F2;
    border-bottom:1px solid #cccccc; border-top:1px solid #ffffff;">
        <tr>
          <td><strong>Produktoversigt</strong></td>
        </tr>
        <tr>
          <td>
            <table style="background-color:#FFFFFF; border:1px solid #cccccc;" width="100%"  border="0"

cellspacing="2" cellpadding="2">
              <tr>
                <td width="50%" height="20%"><a href="pro_oversigt.html">Mekaniske endestop</a> </td>
                <td width="50%" rowspan="5"><img src="images/Sensor.jpg" width="275" height="118"></td>
              </tr>
              <tr>
                <td width="50%" height="20%"><a href="montering.html">Monteringskasser</a></td>
              </tr>
              <tr>
                <td width="50%" height="20%"><span class="style1">Sensorer</span></td>
              </tr>
              <tr>
                <td width="50%" height="20%"><a href="proceskom.html">Proceskommunikation</a></td>
              </tr>
              <tr>
                <td  width="50%" height="20%"><a href="atex.html">ATEX materiel</a></td>
              </tr>
          </table></td>
        </tr>
      </table>
      <table width="100%"  border="0" cellspacing="2" cellpadding="2" style="background-color:#E0F2F2;
    border-bottom:1px solid #cccccc; border-top:1px solid #ffffff;">
        <tr>
          <td><strong>Sensorer</strong></td>
        </tr>
        <tr>
          <td>
            <table style="background-color:#FFFFFF; border:1px solid #cccccc;" width="100%"  border="0"

cellspacing="2" cellpadding="2">
              <tr>
                <td>                  <p>Her indeholder programmet en r&aelig;kke elektroniske produkter, og i fl&aelig;ng kan

n&aelig;vnes: </p>
                  <p>
                  <ul>
                    <li>Induktive aftastere i bl.a. euronorm udf&oslash;rsel. <br>
                    <li>Fotocelle aftastere. <br>
                    <li>Kapacitive aftastere. <br>
                    <li>Magnet aftastere. <br>
                    <li>Niveau- og sv&oslash;mmeafbrydere. <br>
                    </li>
                  </ul>
                <p>Derudover tilbyder vi et stort sortiment i PVC / PUR- kabler med stik </p>  </td>
              </tr>
          </table></td>
        </tr>
    </table></td>
    <td width="97">&nbsp;</td>
    <td width="133">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
Avatar billede muddyw. Praktikant
27. marts 2006 - 22:52 #3
Hvor er det fedt - ja jeg er ikke nogen haj til html, så det er fedt at få nogle fif ;-)
Avatar billede muddyw. Praktikant
27. marts 2006 - 22:53 #4
tak for hjælpen
Avatar billede miss-g Seniormester
27. marts 2006 - 23:23 #5
Selv tak (for point) *S*
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