Søg
Avatar billede tlunde Nybegynder
01. september 2005 - 15:51 Der er 42 kommentarer og
2 løsninger

Problem med fanebladsmenu, hjælp?

Hejsa,
Jeg er ved at opbygge en fanebladsmenu bestående af CSS, men der er noget der driller mig...se menuen her: http://www.selvhjaelp.dk/menu/index.php

Når jeg trykker på et har de andre faneblade, så skifter begge farve, nu når det kun er det ene faneblad der skal skifte?

Har jeg lavet en fejl i CSS'en?

CSS:
------------------------
/*navigation*/
#nav {background:  url(../img/navbg.gif) no-repeat right top;
    height: 20px;
    margin: 10px 0 0;}   
   
#nav ul {margin: 0;
    padding: 0;
    list-style: none;
    }
   
#nav a.nl {display: block;
    float: left;
    height: 20px;
    width: 302px;
    text-indent: -999em;
    text-decoration: none;
    background: #000;
    }   
   
#nav #nav1 a.nl {background:  url(../img/nav-products.gif) no-repeat left top; width: 67px; }       
#nav #nav2 a.nl {background:  url(../img/nav-retail.gif) no-repeat left top; width: 134px }
#nav #nav3 a.nl {background:  url(../img/nav-products.gif) no-repeat left top; width: 67px }
#nav #nav1 a.nl:hover,
#nav #nav2 a.nl:hover,
#nav #nav3 a.nl:hover,
#retail #nav #nav1 a.nl,
#support #nav #nav2 a.nl,
#support #nav #nav3 a.nl



{ background-position: 0 -20px; }
------------------------

Mvh.
Thomas
Avatar billede softspot Forsker
01. september 2005 - 16:06 #1
Din HTML er først og fremmest noget rodet. Hvis du starter med at rydde op i den, så kan det være der er nogle af de andre ting der falder på plads...
Avatar billede tlunde Nybegynder
01. september 2005 - 16:08 #2
Mit HTML ser sådan her ud:

<html>
<head>
    <title>Overskrift</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="/js.js" type="text/javascript"></script>
</head>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>Logo</td>
  </tr>
  <tr>
    <td><div id="nav">
      <ul>
        <li id="nav1"><a href="../index.php" class="nl">Forside</a></li>
        <li id="nav2"><a href="support/index.php" class="nl">Support</a></li>
        <li id="nav3"><a href="support/index.php" class="nl">Hvad</a></li>
      </ul>
    </div></td>
  </tr>
</table>
<br>
</body>
</html>

Syntes da ik den er rodet...

Kan bare ik lige gennemskue hvorfor den laver begge billeder om, når man trykker på det ene faneblad...
Avatar billede softspot Forsker
01. september 2005 - 16:09 #3
...det er som om du har forskellige htmlsider som du inkluderer ind oveni hinanden. Det kommer ikke til at fungere, med mindre du har et hoveddokument og nogle includedokumenter (som kender deres rolle og overholder den).

F.eks. fungerer din DOCTYPE slet ikke da den skal stå på den første linie, hvilket den ikke gør. Det har indvirkning på hvordan din CSS bliver fortolket, derfor min første kommentar.
Avatar billede softspot Forsker
01. september 2005 - 16:10 #4
Den html jeg kan se (og den browseren ser) er:


<head>
    <title>Selvhjaelp.dk</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<table width="750"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><html>
<head>
    <title>Add some bounce to your life!</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="/js.js" type="text/javascript"></script>
</head>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>Logo</td>
  </tr>
  <tr>
    <td><div id="nav">
      <ul>
        <li id="nav1"><a href="../index.php" class="nl">Forside</a></li>
        <li id="nav2"><a href="support/index.php" class="nl">Support</a></li>
        <li id="nav3"><a href="support/index.php" class="nl">Hvad</a></li>
      </ul>
    </div></td>
  </tr>
</table>
<br>
</body>
</html></td>
  </tr>
  <tr>
    <td height="288">&nbsp;</td>
  </tr>
  <tr>
    <td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<div align="center">
  <table width="750" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center">www.selvhjaelp.dk</div></td>
    </tr>
  </table>
</div>
</body>
</html>
</td>
  </tr>
</table>
<br>
</body>
</html>


Og det er jo en skøn blanding af ulovligt placerede og redundante elementer :)
Avatar billede tlunde Nybegynder
01. september 2005 - 16:11 #5
Jeg har lagt fanebladsmenuen i en top.php. Denne fil inkludere jeg så med PHP på de andre sider, for kun at have menuen et sted...

Det er det eneste include jeg bruger...
Avatar billede softspot Forsker
01. september 2005 - 16:12 #6
Jeg (og browseren) kan kun forholde mig til ovenstående html... :)
Avatar billede softspot Forsker
01. september 2005 - 16:13 #7
Idéen med at inkludere er fin nok, det skal bare gøres struktureret, så det ikke ødelægger den resulterende HTML... som det er tilfældet lige nu.
Avatar billede tlunde Nybegynder
01. september 2005 - 16:14 #8
Hmm...jeg kan slet ik se mening i det overhovedet...
Jeg er ret sikker på at det er en ren CSS fejl et sted, jeg kan bare ik lige gennemskune hvor denne skulle være...
Avatar billede tlunde Nybegynder
01. september 2005 - 16:16 #9
De filer jeg har er:

index.php
----------
<head>
    <title>Selvhjaelp.dk</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<table width="750"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><? include("top.php"); ?></td>
  </tr>
  <tr>
    <td height="288">&nbsp;</td>
  </tr>
  <tr>
    <td><? include("bund.php"); ?></td>
  </tr>
</table>
<br>
</body>
</html>
----------

top.php
----------
<html>
<head>
    <title>Overskrift</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="/js.js" type="text/javascript"></script>
</head>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>Logo</td>
  </tr>
  <tr>
    <td><div id="nav">
      <ul>
        <li id="nav1"><a href="../index.php" class="nl">Forside</a></li>
        <li id="nav2"><a href="support/index.php" class="nl">Support</a></li>
        <li id="nav3"><a href="support/index.php" class="nl">Hvad</a></li>
      </ul>
    </div></td>
  </tr>
</table>
<br>
</body>
</html>
----------

Der kan jeg ik se at der skulle være noget rod i koden...
Avatar billede roenving Novice
01. september 2005 - 16:16 #10
Der må kun være eet doctype-tag, og det skal være det allerførste ...

-- ligeledes må der kun være eet html-tag, som skal omklamre resten af dokumentet ...

Desuden skal dokumentet starte med et head-tag (indeni html-tagget !-), hvor der mindst skal være et title-tag, men der kan også være link-tags, meta-tags og style-tags (som _kun_ må forkomme i den sektion !-) samt f.eks. script-tags ...

Derefter _skal_ der komme et body-tag, som bør omklamre resten af dokumentet ...

Inde i det, skal du så placere almindelige html-elementer, dvs., hvis du bruger includes på det sted, må du ikke medtage nogen af de ovenfor nævnte ting !o]
Avatar billede tlunde Nybegynder
01. september 2005 - 16:24 #11
Okay, så godt at der lige var et par simple html fejl i de to filer, men de er rettet nu og uploadet, og ser nu sådan her ud:


index.php
----------
<html>
<head>
    <title>Selvhjaelp.dk</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="750"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><? include("top.php"); ?></td>
  </tr>
  <tr>
    <td height="288">&nbsp;</td>
  </tr>
  <tr>
    <td><? include("bund.php"); ?></td>
  </tr>
</table>
</body>
</html>
----------

top.php
----------
<html>
<head>
    <title>Overskrift</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="/js.js" type="text/javascript"></script>
</head>
<body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>Logo</td>
  </tr>
  <tr>
    <td><div id="nav">
      <ul>
        <li id="nav1"><a href="../index.php" class="nl">Forside</a></li>
        <li id="nav2"><a href="support/index.php" class="nl">Support</a></li>
        <li id="nav3"><a href="support/index.php" class="nl">Hvad</a></li>
      </ul>
    </div></td>
  </tr>
</table>
</body>
</html>
----------

Nu burde der da ik være nogle html fejl mere, men det virker stadig ik helt endnu...
Avatar billede roenving Novice
01. september 2005 - 16:27 #12
top.php må _ikke_ indeholde strukturelle html-elementer, men skal f.eks. se således ud:

<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>Logo</td>
  </tr>
  <tr>
    <td><div id="nav">
      <ul>
        <li id="nav1"><a href="../index.php" class="nl">Forside</a></li>
        <li id="nav2"><a href="support/index.php" class="nl">Support</a></li>
        <li id="nav3"><a href="support/index.php" class="nl">Hvad</a></li>
      </ul>
    </div></td>
  </tr>
</table>

-- og _intet_ andet !-)
Avatar billede tlunde Nybegynder
01. september 2005 - 16:57 #13
Selvom jeg retter og retter i HTML koden, så kommer fanebladene stadigvæk ik til at virke...Jeg er ret sikker på at det er en CSS fejl et sted, og ikke en HTML fejl...
Avatar billede roenving Novice
01. september 2005 - 16:59 #14
Might very well be ...

-- men sålænge man er sikker på, at der er alvorlige problemer med html-koden, kan det jo ikke svare sig at komme med bud på, hvad der forårsager problemerne !-)
Avatar billede softspot Forsker
01. september 2005 - 17:00 #15
Der er stadig problemer med formatteringen af HTML-koden og inden de er rettet er det næsten omsonst at begynde med fejlsøgning i CSS'en...
Avatar billede olebole Juniormester
01. september 2005 - 17:05 #16
<ole>

Se koden i ViewSource, så kan du se, hvad der er galt. Sådan ser et HTML-dokument jo ikke ud  ;o)
Læs derefter roenvings kommentar (01/09-2005 16:27:06) ... så burde problemet være gennemskueligt  :)

/mvh
</bole>
Avatar billede tlunde Nybegynder
01. september 2005 - 17:06 #17
Ærlig talt, så kan jeg ik se hvor der skulle være fejl i HTML'en mere, efter jeg har rettet i den...

Mine 2 filer, index.php og top.php ser sådan her ud:


index.php
----------
<html>
<head>
    <title>Selvhjaelp.dk</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="750"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><? include("top.php"); ?></td>
  </tr>
  <tr>
    <td height="288">&nbsp;</td>
  </tr>
  <tr>
    <td><? include("bund.php"); ?></td>
  </tr>
</table>
</body>
</html>
----------

top.php
----------
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>Logo</td>
  </tr>
  <tr>
    <td><div id="nav">
      <ul>
        <li id="nav1"><a href="../index.php" class="nl">Forside</a></li>
        <li id="nav2"><a href="support/index.php" class="nl">Support</a></li>
        <li id="nav3"><a href="support/index.php" class="nl">Hvad</a></li>
      </ul>
    </div></td>
  </tr>
</table>
----------

Er der fejl i dem, som de er nu?
Avatar billede softspot Forsker
01. september 2005 - 17:11 #18
Døm selv:

<html>
<head>
    <title>Selvhjaelp.dk</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="750"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>Logo</td>
  </tr>
  <tr>
    <td><div id="nav">
      <ul>
        <li id="nav1"><a href="../index.php" class="nl">Forside</a></li>
        <li id="nav2"><a href="support/index.php" class="nl">Support</a></li>
        <li id="nav3"><a href="support/index.php" class="nl">Hvad</a></li>
      </ul>
    </div></td>
  </tr>
</table></td>
  </tr>
  <tr>
    <td height="288">&nbsp;</td>
  </tr>
  <tr>
    <td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<div align="center">
  <table width="750" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center">www.selvhjaelp.dk</div></td>
    </tr>
  </table>
</div>
</body>
</html>
</td>
  </tr>
</table>
</body>
</html>


Mit bud, ja... :)
Avatar billede softspot Forsker
01. september 2005 - 17:12 #19
bund.php skal også rettes til så den overholder de regler som roenving nævnte.
Avatar billede roenving Novice
01. september 2005 - 17:12 #20
-- det er der åbenbart i bund.php ...
Avatar billede tlunde Nybegynder
01. september 2005 - 17:14 #21
bund.php
---------
<table width="750" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center">www.selvhjaelp.dk</div></td>
    </tr>
  </table>
---------

Ser nu sådan ud, men det virker stadig ikke...
Hvad siger HTML koden så nu?
Avatar billede softspot Forsker
01. september 2005 - 17:16 #22
Sådan! Den er jo næsten blevet helt behagelig at se på :)

Nu mangler du bare lige DOCTYPE i toppen for at få browseren i standardsmode...
Avatar billede softspot Forsker
01. september 2005 - 17:17 #23
Og den skal altså ind i index.php...
Avatar billede tlunde Nybegynder
01. september 2005 - 17:20 #24
hvordan ser den linie ud for DOCTYPE?
Avatar billede tlunde Nybegynder
01. september 2005 - 17:22 #25
Og skal den ind i index.php over <html>?
Avatar billede tlunde Nybegynder
01. september 2005 - 17:27 #26
Er det bare denne jeg skal smide ind:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

i index.php over <html>?
Avatar billede softspot Forsker
01. september 2005 - 17:29 #27
jeps! :)
Avatar billede tlunde Nybegynder
01. september 2005 - 17:32 #28
Okay, det er ordnet...

Så mangler jeg stadig bare det problem med fanebladene på http://www.selvhjaelp.dk/menu/index.php

Kan jeg få lidt hjælp her? Det var det mit oprindelige problem var...
Avatar billede softspot Forsker
01. september 2005 - 17:37 #29
Du kan under alle omstændigheder glæde dig over alle de problemer du undgår i fremtiden ved at din HTML nu er blevet lovlig... :)
Avatar billede tlunde Nybegynder
01. september 2005 - 17:38 #30
Hehe, takker også for den hjælp jeg fik der, men det er det fanebladsproblem og min CSS der driller på, så vil meget gerne have lidt hjælp til den del...
Avatar billede softspot Forsker
01. september 2005 - 17:41 #31
Klart nok... der arbejdes på sagen :)
Avatar billede tlunde Nybegynder
01. september 2005 - 17:43 #32
Er det noget du kan finde ud af softspot?
Avatar billede softspot Forsker
01. september 2005 - 17:47 #33
:) Det vil tiden vise...
Avatar billede softspot Forsker
01. september 2005 - 17:52 #34
Hov hvad skete der!? Nu er HTML-koden igen "ude på et sidespor"...
Avatar billede tlunde Nybegynder
01. september 2005 - 17:53 #35
hmm...har ik rodet ved den, hvad siger den?
Avatar billede softspot Forsker
01. september 2005 - 17:59 #36
Ehm... kan din egen browser ikke vise kilde...?
Avatar billede softspot Forsker
01. september 2005 - 18:00 #37
Måske det er fordi det er på supportsiden... :)
Avatar billede softspot Forsker
01. september 2005 - 18:02 #38
Prøv evt. at sætte background-position eksplicit i disse styles:

#nav #nav1 a.nl {background:  url(../img/nav-products.gif) no-repeat left top; width: 67px; }       
#nav #nav2 a.nl {background:  url(../img/nav-retail.gif) no-repeat left top; width: 134px }
#nav #nav3 a.nl {background:  url(../img/nav-products.gif) no-repeat left top; width: 67px }
Avatar billede tlunde Nybegynder
01. september 2005 - 18:03 #39
Min browser siger koden ser sådan her ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Selvhjaelp.dk</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="750"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>

    <td>Logo</td>
  </tr>
  <tr>
    <td><div id="nav">
      <ul>
        <li id="nav1"><a href="../index.php" class="nl">Forside</a></li>
        <li id="nav2"><a href="support/index.php" class="nl">Support</a></li>

        <li id="nav3"><a href="support/index.php" class="nl">Hvad</a></li>
      </ul>
    </div></td>
  </tr>
</table></td>
  </tr>
  <tr>
    <td height="288">&nbsp;</td>
  </tr>

  <tr>
    <td><table width="750" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center">www.selvhjaelp.dk</div></td>
    </tr>
  </table></td>
  </tr>
</table>
</body>

</html>

Den ser da OK ud...
Avatar billede tlunde Nybegynder
01. september 2005 - 18:04 #40
Er ikke den bedste til CSS, hvordan vil du sætte dem eksplicit?
Avatar billede tlunde Nybegynder
01. september 2005 - 18:26 #41
Har fået udbedret problemet, men du skal da have lidt point for hjælpen med HTML'en, smid et svar ;)
Avatar billede softspot Forsker
01. september 2005 - 18:30 #42
Hvad var så løsningen?
Avatar billede tlunde Nybegynder
01. september 2005 - 19:14 #43
Sad og rodede lidt med CSS'en, ved faktisk ik helt hvad jeg lavede, men nu virker det da :) Tak for hjælpen...
Avatar billede softspot Forsker
01. september 2005 - 20:44 #44
Godt du fandt frem til en løsning og tak for point :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 12:15 morf bilede Af knuldefar1942 i Fri debat
I går 22:13 Gemme største værdi Af Lemming@privat.dk i Excel
I går 21:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »