Avatar billede kongensgaard Nybegynder
12. april 2005 - 22:11 Der er 11 kommentarer og
1 løsning

Scroll og faneblads menu

Jeg har fået lidt hjælp til scroll-bar på min side (ref. http://www.eksperten.dk/spm/608886) og det virker fint, men afledt af den løsning jeg nu bruger er der så et problem med min fanebladsmenu (det var ikke med i det oprindelige spørgsmål).

http://www.test.kongensgaard.dk/sammenfoering.php

Jeg har en fanebladsmenu og når man scroller ned (i IE) så er de stadigt synlige og det er egentlig en rigtig god løsning, men kun hvis jeg kan lave det således at baggrunden bag fanerne bliver stående og så fanebladene ikke dækker for teksten. Kan det mon overhovedet laves sådan at der ikke er scroll på min faneblads menu, men kun på resten af indholdet?

Hvis ovenstående ikke er muligt må jeg gå efter en løsning hvor det virker i IE som det faktisk allerede virker i FireFox - nemlig at scroller man ned så 'forsvinder' fanebladsmenuen i toppen. Nogen der har en idé om hvorfor den ikke opfører sig på samme måde i IE?

Link til CSS fil:

http://www.test.kongensgaard.dk/style/style.css

Udsnit af sammenføring.php ('...' angiver de steder hvor jeg har slettet noget):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
...
<link href="style/style.css" type=text/css rel=stylesheet>

</head>

<body class="sammenfoeringindex">

<div id="leftcol">
        <div class="leftbox">
    <?php include("menu.php"); ?>
        </div>
</div>
<div id="nav">
    <div id="banner">
    <ul>
    <?php include("tabmenuadfaerd.php"); ?>
    </ul>
    <span id="navclear"></span>
    <br>
    </div>
    <br>
    <h2>Sammenføring af katte</h2>
    <p>... .</p>
    <br>
</div>
<div id="rightcol">
        <div class="rightbox">
      <?php
    include("nyhed1.php");
    ?>
    </div>
    <br>
    <div class="rightbox2">
    <?php
    include("nyhed2.php");
    ?>
    </div>
    <br>
</div>

...

</body>
</html>
Avatar billede nielschristiansen Nybegynder
12. april 2005 - 22:31 #1
du kan eventuelt prøve med en <iframe> hvis det er noget du vil bruge :)

Mvh
Niels Christiansen
Avatar billede kongensgaard Nybegynder
12. april 2005 - 22:36 #2
Det er nyt for mig, men det er da værd at læse et par tutorials om hvis det kan løse mit problem ;-)

En midlertidig løsning (gerne hvor det bare virker som i FireFox) vil dog være interessant her og nu for så kan jeg endelig få publiceret min side... Nogen bud?
Avatar billede nielschristiansen Nybegynder
12. april 2005 - 22:39 #3
<iframe src="forside.htm" width="400" height="400" frameborder="1" name="midt"></iframe>
den kan du placere hvor du vil
Avatar billede olebole Juniormester
12. april 2005 - 23:16 #4
<ole>

Pudsig bug, IE har kørende dér  :)
Du kan vel bare tage menuen ud af divet 'nav' og lægge den lige over. Så scroller den jo ingen steder.


/mvh
</bole>
Avatar billede kongensgaard Nybegynder
13. april 2005 - 09:31 #5
olebole -> Det kan da godt være at det er det jeg skal prøve, men hvis jeg skal bevare samme layout på tabemenu og 'indhold' så kræver det flere justeringer. Jeg må se om jeg kan få det til at lykkes.
Avatar billede skyggen2000 Nybegynder
13. april 2005 - 09:59 #6
hmmmmm, jeg ved man kan "låse" scrollbaren, ved at gentegne de elementer når der trækkes:

man pakker de elementer der skal indgå (dvs. hele området der scrolles på) ind i en div med id="table_container".
Her er et eksempel hvor det er alle header elemeterne til en table, der ikke berøres at scroll, det kan du naturligvis ændre til hvilken type du ønsker.


        th {
            top            : expression(document.getElementById('table_container').scrollTop);
            position        : relative;
            z-index        : 1;
        }

Jeg havde engang et konkret eksempel...
Avatar billede skyggen2000 Nybegynder
13. april 2005 - 10:59 #7
prøv at kigge på dette eksempel:
<html>
    <head>
        <title>Some Title</title>
        <style>
            <!--

            body {
                font            : menu;
                background      : threedface;
            }

            .someName table {
                border-collapse : collapse;
                table-layout    : fixed;
            }

            .someName td, th {
                font            : menu;
                color          : black;
                padding        : 2px;
                width          : 25%;
                white-space    : nowrap;
                overflow        : hidden;
                text-overflow  : ellipsis;
            }

            .someName td {
                background-color: white;
                border-right    : 1px solid #eeeeee;
                border-left    : 1px solid #eeeeee;
            }

            .someName td.locked, th.locked {
                background-color: white;
                border-right    : 1px solid #eeeeee;
                border-left    : 1px solid #eeeeee;
                left            : expression(document.getElementById('table_container').scrollLeft);
                position        : relative;
                z-index        : 1;
                text-align      : center;
            }

            .someName th {
                background-color: buttonface;
                border-top      : 1px solid buttonhighlight;
                border-bottom  : 1px solid buttonshadow;
                border-left    : 1px solid buttonhighlight;
                border-right    : 1px solid buttonshadow;
                top            : expression(document.getElementById('table_container').scrollTop);
                position        : relative;
                z-index        : 2;
                text-align      : center;
            }

            #table_container {
                width          : 500px;
                height          : 100px;
                overflow        : auto;
                border-left    : 1px solid buttonshadow;
                border-top      : 1px solid buttonshadow;
                border-right    : 1px solid buttonhighlight;
                border-bottom  : 1px solid buttonhighlight;
            }
            -->
        </style>
    </head>

<body>
    <!-- java script:alert(document.body.tables[0].rows[0].cells.length); -->

    <h3>Table med fast header-row</h3>

  <span id='table_container' class="someName">

    <table id="main">
      <thead>
        <tr>
        <th>Number</th>
        <th>English</th>
        <th>French </th>
        <th>German </th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td class="locked">1</td>
          <td>one</td>
          <td>un</td>
          <td>eins</td>
        </tr>
        <tr>
          <td class="locked">2</td>
          <td>two</td>
          <td>deux</td>
          <td>zwei</td>
        </tr>
        <tr>
          <td class="locked">3</td>
          <td>three</td>
          <td>trois</td>
          <td>drei</td>
        </tr>
        <tr>
          <td class="locked">4</td>
          <td>four</td>
          <td>quattre</td>
          <td>vier</td>
        </tr>
        <tr>
          <td class="locked">4</td>
          <td>four</td>
          <td>quattre</td>
          <td>vier</td>
        </tr>
        <tr>
          <td class="locked">4</td>
          <td>four</td>
          <td>quattre</td>
          <td>vier</td>
        </tr>
        <tr>
          <td class="locked">4</td>
          <td>four</td>
          <td>quattre</td>
          <td>vier</td>
        </tr>
        <tr>
          <td class="locked">4</td>
          <td>four</td>
          <td>quattre</td>
          <td>vier</td>
        </tr>
        <tr>
          <td class="locked">4</td>
          <td>four</td>
          <td>quattre</td>
          <td>vier</td>
        </tr>
      </tbody>

    </table>

  </span>


    <p>
        Se også <a href="http://webfx.eae.net/dhtml/collist/demo.html">dette eksempel</a>, der har fast header-row, resizable
        kolonner og sortérbare kolonner.
    </p>

</body>
</html>
Avatar billede kongensgaard Nybegynder
13. april 2005 - 13:06 #8
Tak for jeres svar.

Det første jeg gerne vil prøve er at flytte lidt rundt i min kode som olebole skrev, men det giver (naturligvis) lidt problemer.

http://www.new.kongensgaard.dk/chantal.php (her står det fornuftigt i IE, men fejler i FireFox). Jeg kan sagtens ændre margin i denne, men så er problemet i IE i stedet for FireFox).

Link til CSS fil (se nederst i filen): http://www.new.kongensgaard.dk/style/style.css

Udsnit af min CSS fil:
#nav {
        scrollbar-face-color: #81947A;
        scrollbar-shadow-color: #61705A;
        overflow: auto;
        margin: 0px 115px 10px 10px;
        border-bottom: 1px solid white;
        border-left: 1px solid white;
        border-right: 1px solid white;
        background: #81947A;
        height: 92%;
        min-width: 425px;
}

#nav h1, #nav p, #nav pre {
      margin-left: 20px;
      margin-right: 15px;
}

#banner {
        overflow: hidden;
      border-top: 1px solid white;
      border-left: 1px solid white;
      border-rigth: 1px solid white;
        margin: 0px 116px 0px 114px;
      background-color: #61705A;
      color: white;
}

#banner h1, #banner p, #banner pre {
      margin-left: 15px;
      margin-right: 15px;
}

#banner ul {
      display: block;
      list-style: none outside;
      background-color: blue;
      padding: 0 0 0 2px;
      margin: 0 0 0 1px;
      font-size: 13px; 
      border-left: 1px solid white;
      border-bottom: 0px;
}

#banner li {
      padding: 0;
      margin: 0 3px 0 1px;
      border-top: 1px solid #81947A;
      border-right: 1px solid #81947A;
      border-left: 1px solid #81947A;
      border-bottom: 0px solid #81947A;
      background-color: #B4C3B0;
      font-weight: bold;
      display: block;
      float: left;
      position: relative;
    font-style: normal;
      top: 0.1em;
}

#banner a:link,
#banner a:visited {
      color: white;
      text-decoration: none;
    font-style: normal;
    font-size: 13px;
      padding-left: .3em;
      padding-right: .3em;
}

#bannerclear {
      display: none;
}
Avatar billede kongensgaard Nybegynder
13. april 2005 - 13:08 #9
Udsnit af chantal.php hvor der er fanebladsmenu:

<body class="chantalindex">

<div id="leftcol">
    <div class="leftbox">
<?php
$menu = 2;
include("menu.php");
?>
    </div>
</div>

<div id="banner">
<ul>
<?php include("tabmenukatte.php"); ?>
</ul>
<span id="bannerclear"></span>
<br>
</div>

<div id="nav">
<br>
...

Hvorfor kan jeg ikke få det til at virke både i FireFox og IE???

Jeg indrømmer blankt at jeg er på begynderstadiet og har lidt svært ved at få det hele til at hænge sammen, men dette er nu sidste problem før min side er færdig så det ville være rart hvis det kunne lykkes.
Avatar billede kongensgaard Nybegynder
15. april 2005 - 08:42 #10
Tak for jeres svar. Mit sidste spørgsmål opretter jeg evt. i et nyt spørgsmål og ser om nogen kan hjælpe. Ellers må jeg jo ud i noget med et PHP script der kan afgøre om det er IE eller FireFox.

olebole > Jeg valgte at gå med din løsning (de andre var ikke så ligetil for mig) så du må lige svare hvis du vil have point.
Avatar billede olebole Juniormester
15. april 2005 - 18:34 #11
kongensgaard >> Undskyld, jeg ikke har deltaget mere i spm'et, men det må være et af de mange, Eksperten ikke har sendt mig mails om  :o|
Det var da om ikke andet fint, hvis mit indspark har bragt dig på rette kurs, men da det ikke blev fulgt bedre op, springer jeg over points for denne gang .... men tak for tanken  ;o)
Avatar billede kongensgaard Nybegynder
15. april 2005 - 23:43 #12
;-)
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