Avatar billede gurk Nybegynder
18. november 2005 - 10:41 Der er 10 kommentarer og
1 løsning

Problemer med visning af div

Jeg har siddet og arbejdet med en sidestruktur, som skal styre et lille cms. Det er bygget op i XHTML 1.0 T.

Desværre har jeg problemer med at få alle drop-down-lag til at fungere ordentligt (i Firefox indtil videre).

Drop-down på side nr. 2 fra toppen fungerer så godt som aldrig, og det samme gælder for vilkårlige lag i resten af site-træet.

Der er formentlig noget der dækker over noget andet, men jeg har efterhånden stirret mig blind på problemet.

Lidt hjælp vil meget værdsat.

Jeg vil paste koden nedenunder:
Avatar billede gurk Nybegynder
18. november 2005 - 10:43 #1
Site-tree:

_____________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Navigation (9911)</title>
    <link rel="STYLESHEET" type="text/css" href="css/pages_node_navigation.css">
    <!-- <link rel="STYLESHEET" type="text/css" href="css/pages_node_navigation_ie.css">-->
    <!-- <script type="text/javascript" src="javascript/pages_node_drop_down.js"></script> -->
</head>
<body>
<div id="leftmenu">
<ul id="nav"><li class="niv0"><a title="Close" href="pages_navigation.asp?tglnode=36"><img src="images/tree_open.gif" alt="Close"></a><a href="#"><img src="images/page_hidden.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=36&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=36&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=36&parentid=36&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=36&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=36&funktion=pageup&parentid=0&nummer=3');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=36&funktion=pagedown&parentid=0&nummer=3');">Flyt siden ned</a></div></a> <a title="Forsiden" href="pages_navigation.asp?p=36"> Forsiden</a></li><li class="niv1"><img src="images/x.gif" width="10"><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=89&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=89&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=89&parentid=89&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=89&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=89&funktion=pageup&parentid=36&nummer=0');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=89&funktion=pagedown&parentid=36&nummer=0');">Flyt siden ned</a></div></a> <a title="test" href="pages_navigation.asp?p=89"> test</a></li><li class="niv0"><a title="Close" href="pages_navigation.asp?tglnode=79"><img src="images/tree_open.gif" alt="Close"></a><a href="#"><img src="images/page_active.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=79&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=79&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=79&parentid=79&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=79&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=79&funktion=pageup&parentid=0&nummer=4');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=79&funktion=pagedown&parentid=0&nummer=4');">Flyt siden ned</a></div></a> <a title="Community" href="pages_navigation.asp?p=79"> Community</a></li><li class="niv1"><img src="images/x.gif" width="10"><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=87&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=87&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=87&parentid=87&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=87&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=87&funktion=pageup&parentid=79&nummer=0');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=87&funktion=pagedown&parentid=79&nummer=0');">Flyt siden ned</a></div></a> <a title="test" href="pages_navigation.asp?p=87"> test</a></li><li class="niv1"><a title="Open" href="pages_navigation.asp?tglnode=80"><img src="images/tree_closed.gif" alt="Open"></a><a href="#"><img src="images/page_active.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=80&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=80&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=80&parentid=80&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=80&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=80&funktion=pageup&parentid=79&nummer=3');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=80&funktion=pagedown&parentid=79&nummer=3');">Flyt siden ned</a></div></a> <a title="News" href="pages_navigation.asp?p=80"> News</a></li><li class="niv0"><a title="Close" href="pages_navigation.asp?tglnode=44"><img src="images/tree_open.gif" alt="Close"></a><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=44&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=44&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=44&parentid=44&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=44&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=44&funktion=pageup&parentid=0&nummer=9');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=44&funktion=pagedown&parentid=0&nummer=9');">Flyt siden ned</a></div></a> <a title="Preview" href="pages_navigation.asp?p=44"> Preview</a></li><li class="niv1"><a title="Close" href="pages_navigation.asp?tglnode=84"><img src="images/tree_open.gif" alt="Close"></a><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=84&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=84&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=84&parentid=84&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=84&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=84&funktion=pageup&parentid=44&nummer=1');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=84&funktion=pagedown&parentid=44&nummer=1');">Flyt siden ned</a></div></a> <a title="Copy of Tekststest" href="pages_navigation.asp?p=84"> Copy of Tekststest</a></li><li class="niv2"><img src="images/x.gif" width="10"><a href="#"><img src="images/page_active.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=64&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=64&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=64&parentid=64&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=64&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=64&funktion=pageup&parentid=84&nummer=1');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=64&funktion=pagedown&parentid=84&nummer=1');">Flyt siden ned</a></div></a> <a title="Tekststest" href="pages_navigation.asp?p=64"> Tekststest</a></li><li class="niv0"><a title="Close" href="pages_navigation.asp?tglnode=39"><img src="images/tree_open.gif" alt="Close"></a><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=39&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=39&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=39&parentid=39&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=39&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=39&funktion=pageup&parentid=0&nummer=10');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=39&funktion=pagedown&parentid=0&nummer=10');">Flyt siden ned</a></div></a> <a title="Mindlab - Søg" href="pages_navigation.asp?p=39"> Mindlab - Søg</a></li><li class="niv1"><img src="images/x.gif" width="10"><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=88&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=88&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=88&parentid=88&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=88&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=88&funktion=pageup&parentid=39&nummer=0');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=88&funktion=pagedown&parentid=39&nummer=0');">Flyt siden ned</a></div></a> <a title="test" href="pages_navigation.asp?p=88"> test</a></li><li class="niv0"><a title="Close" href="pages_navigation.asp?tglnode=66"><img src="images/tree_open.gif" alt="Close"></a><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=66&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=66&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=66&parentid=66&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=66&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=66&funktion=pageup&parentid=0&nummer=11');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=66&funktion=pagedown&parentid=0&nummer=11');">Flyt siden ned</a></div></a> <a title="-- BUGS --" href="pages_navigation.asp?p=66"> -- BUGS --</a></li><li class="niv1"><a title="Close" href="pages_navigation.asp?tglnode=90"><img src="images/tree_open.gif" alt="Close"></a><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=90&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=90&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=90&parentid=90&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=90&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=90&funktion=pageup&parentid=66&nummer=0');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=90&funktion=pagedown&parentid=66&nummer=0');">Flyt siden ned</a></div></a> <a title="klam" href="pages_navigation.asp?p=90"> klam</a></li><li class="niv2"><img src="images/x.gif" width="10"><a href="#"><img src="images/page_inactive.gif" alt="Open menu"><div id="menublock"><a href="#" onClick="hotlink('page_edit.asp?id=91&funktion=edit')">Rediger side</a><a href="#" onclick="hotlink('../default.asp?p=91&funktion=content');">Rediger sideindhold</a><a href="#" onclick="hotlink('page_edit.asp?id=91&parentid=91&funktion=opret');">Opret underside</a><a href="#" onclick="hotlink('page_edit.asp?id=91&funktion=slet');">Slet side</a><a href="#" onclick="hotlink('page_edit.asp?id=91&funktion=pageup&parentid=90&nummer=0');">Flyt siden op</a><a href="#" onclick="hotlink('page_edit.asp?id=91&funktion=pagedown&parentid=90&nummer=0');">Flyt siden ned</a></div></a> <a title="tis" href="pages_navigation.asp?p=91"> tis</a></li>329

<script language="JavaScript1.2">
<!--
function hotlink(page) {
    top.indhold.location.href=page;
    random_num = (Math.round((Math.random()*9)+1))
    top.menu.location.href="refresh.asp?r="+random_num;
    //alert(random_num);
}
-->
</script>
       

</ul>
</div>
</body>
</html>

______________________
Avatar billede gurk Nybegynder
18. november 2005 - 10:44 #2
CSS:

_______________________________

/*


*/


/* ..................... layout overordnet ........................ */

* {
    border : 0;
    padding : 0;
    margin : 0;
    line-height: 0px;
}

/* ..................... billeder ..................................... */

img {
    margin : 0;
}
/* ..................... input ..................................... */

.submitFelt {
    height : 20px;
    background: #fff;
    color : #000;
    width : 30px;
    font: 11px Verdana, tahoma, Helvetica, arial, sans-serif;
    vertical-align : center;
}

.inputFelt {
    height : 20px;
    background: #fff;
    color : #000;
    width : 140px;
    font: 11px Verdana, tahoma, Helvetica, arial, sans-serif;
    vertical-align : center;
}

/* ..................... font ..................................... */

body {
    font: 11px Verdana, tahoma, Helvetica, arial, sans-serif;  /* generel font def. */
    }

p {
    line-height: 15px;
}   

a:link{
    text-decoration: none;
    color : #5C212C;
}

a:visited{
    text-decoration: none;
    color : #5C212C;
}

a:hover{
    text-decoration: none;
    color : #000;
}

a:active{
    text-decoration: none;
    color : #000;
}

h1 a:link{
    text-decoration: none;
    color : #5C212C;
}

h1 a:visited{
    text-decoration: none;
    color : #5C212C;
}

h1 a:hover{
    text-decoration: none;
    color : #000;
}

h1 a:active{
    text-decoration: none;
    color : #000;
}

strong, b {
    color : #000;
    font: 11px Verdana, tahoma, Helvetica, arial, sans-serif;       
    font-weight : bold;
    text-decoration : none;
    line-height: 20px;
}
   
/* ..................... elementernes placering ........................ */
   
/* ..................... generelle ......................................*/   

/* ..................... venstre ......................................*/   


#leftmenu h1 {
    padding: 0 0 0 9px;
    border-bottom: 2px solid #fff;
    color : #fff;   
    background: no-repeat url(/gfx_lajer/leftcolumn_top.gif) left top;
    font: 11px Verdana, tahoma, Helvetica, arial, sans-serif;   
    line-height: 27px;
    text-transform:none;   
}

#leftmenu p {
    line-height: 12px;
    padding: 10px 9px 0px 9px;
}

/* ..................... leftmenu konfigureres ........................ */

#leftmenu ul{   
    border : 0;
    margin : 25px 0 25px 5px;
    padding : 0;
}

#leftmenu ul li img{
    vertical-align : top;
    border : 0;
    margin : 0;
    padding : 0;
}

#leftmenu li.niv0{
    margin : 0 0 5px 20px;
    z-index : 1;
}
#leftmenu li.niv1{
    margin : 0 0 5px 40px;
    z-index : 2;
}
#leftmenu li.niv2{
    margin : 0 0 5px 60px;
    z-index : 2;
}
#leftmenu li.niv3{
    margin : 0 0 5px 80px;
    z-index : 2;
}
#leftmenu li.niv4{
    margin : 0 0 5px 100px;
    z-index : 2;
}
#leftmenu li.niv5{
    margin : 0 0 5px 120px;
    z-index : 2;
}

#leftmenu li{
    list-style:none;
    text-align : left;
}
#leftmenu a{
    font-family: Verdana, tahoma, Helvetica, arial, sans-serif;
}

#leftmenu li.niv0 a, li.niv0 a:visited {
    display:inline;
    font-weight:normal;
    text-decoration:none;
    text-transform:none;       
    color:#000;
    background:#fff ;
    line-height:12px;
    padding:0;
    margin: 0;
}
#leftmenu li.niv0 a:hover {
    color:#000;
    background:#fff;
}   

#leftmenu li.niv1 a, li.niv1 a:visited {
    display:inline;
    font-weight:normal;
    text-decoration:none;
    text-transform:none;       
    color:#000;
    background:#fff ;
    line-height:12px;
    padding:0;
    margin : 0;
}
#leftmenu li.niv1 a:hover {
    color:#000;
    background:#fff;
}   

#leftmenu li.niv2 a, #leftmenu li.niv2 a:visited{
    display:inline;
    text-transform:none;
    text-decoration:none;
    color:#000;
    background:#fff;
    line-height:12px;
    padding:0;
    margin : 0;
}
#leftmenu li.niv2 a:hover{
    color:#000;
    background:#fff;
}       

#leftmenu li.niv3 a, #leftmenu li.niv3 a:visited{
    display:inline;
    text-transform:none;
    text-decoration:none;
    color:#000;
    background:#fff;
    line-height:12px;
    padding:0;
    margin : 0;   
}
#leftmenu li.niv3 a:hover{
    color:#000;
    background:#fff;
}   

#leftmenu li.niv4 a, #leftmenu li.niv4 a:visited{
    display:inline;
    text-transform:none;
    text-decoration:none;
    color:#000;
    background:#fff;
    line-height:12px;
    padding:0;
    margin : 0;   
}
#leftmenu li.niv4 a:hover{
    color:#000;
    background:#fff;
}   

#leftmenu li.niv5 a, #leftmenu li.niv5 a:visited{
    display:inline;
    text-transform:none;
    text-decoration:none;
    color:#000;
    background:#fff;
    line-height:12px;
    padding:0;
    margin : 0;
}
#leftmenu li.niv5 a:hover{
    color:#000;
    background:#fff;
}       

/* ------------------- funktionsmenuen konfigureres ------------------ */


#menublock{
    position: absolute;
    display: none;
    z-index : 9999;
    margin : 0 0 0 20px;
    * margin : 10px 0px 0px -10px; /* IE HACK */
    padding : 0;
    border : 0;
    background-color: #fff;
    line-height:12px;
    border : 1px solid #000;
    border-bottom : 0;
}

#nav li a:hover div#menublock {
    display: block;
}

#nav div#menublock a, #nav div#menublock a:visited {
    display: block;
    border : 0;
    margin : 0;
    padding : 3px 3px 3px 3px;
    color : #000;
    background-color: #eee;
    border-bottom : 1px solid #000;
}

#nav div#menublock a:hover {
    background-color: #789789;
}
Avatar billede gurk Nybegynder
18. november 2005 - 10:45 #3
Jeg er opmærksom på, at z-index på #menublock bliver rekonfigureret, men det er s*.. ligemeget hvad jeg sætter den til...
Avatar billede milandt Nybegynder
18. november 2005 - 11:02 #4
**venter på et foredrag fra en vis person om at XHTML er spild af tid**
Avatar billede olebole Juniormester
18. november 2005 - 15:11 #5
<ole>

milandt >> Så skal du ikke vente længere  ;D

Ja, det er spild af tid at skrive XHTML idag. Det vil tage adskillige år, før det er understøttet på WWW. IE6 understøtter det ikke - og IE7 kommer heller ikke til det - og 99% af alle XHTML-sider på WWW parses idag som dårlig, tilfældig HTML-tagsoup i samtlige browsere.
Jeg har endnu tilgode at se en XHTML-tutorial, der er skrevet af en person, der selv har skrevet ét eneste fungerende XHTML-dokument - og bare ved det første om, hvad XHTML er og hvordan det bruges  :)
Læs f.eks:
    http://exp.dk/artikler/537
    http://exp.dk/artikler/538
   
Desuden er det nok spild af tid at spørge om hjælp til en markup-kode, der er skrevet på én linje  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
18. november 2005 - 15:15 #6
- og så er det helt misforstået at bygge sin CSS op omkring ID-selectors. De bør - ifølge hele idéen med CSS - en undtagelse. Er de ikke det, udnytter man jo slet ikke styrken i CSS, som er nedarvining gennem klasser og element-nestninger ... hvilket det C'et i CSS jo også står for: 'Cascading StyleSheets'  ;o)
Avatar billede milandt Nybegynder
18. november 2005 - 15:44 #7
i øvrigt - er det noget du skriver hver gang olebole, eller er det en af flere snippets du har liggende som standard-besvarelser et sted?

(sorry for hijacking the question)
Avatar billede gurk Nybegynder
18. november 2005 - 16:06 #8
Point taken mht. til det "grimme" CSS + XHTML. Borset fra det, så er koden på een linie for at eliminere whitespaces. Det kan hurtigt gøres mere overskueligt hvis det er nødvendigt. Strengt taget behøves hele dokumentet jo ikke for at se problematikken - det var blot til info.

Så selvom styrken i CSS måske ikke udnyttes fuldt ud, står spørgsmålet stadigvæk...
Avatar billede olebole Juniormester
18. november 2005 - 16:28 #9
Jeg er ikke i tvivl om, hvorfor koden er skrevet på én linje - men der er nok ikke mange, der gider debugge på en kode på én linje (hvis det ikke er deres egen og de dermed er tvunget)  :)
Avatar billede stich Nybegynder
18. november 2005 - 20:19 #10
Det ødelægger intet i cascadingen at bruge masser af ID-selectors, nedarvning gennem nesting fungerer akkurat som ved brug af klasser, bortset fra at prioriteten af de angivne styles er højere.
Avatar billede gurk Nybegynder
22. maj 2006 - 16:35 #11
..og taaaak!
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