Navigationsliste in verschiedenen Browsern

triptrapp · 27. Feb. 2006

Hallo,

habe die Navigation auf der Site als Liste zusammengebastelt und die funzt im IE auch ganz ordentlich.
Nur als ich die Sache dann mit Firefox und Netscape ausprobiert hatte, traten ein paar probleme auf:

1. Die Liste steht nicht mehr am linken Rand, sondern etwas nach rechts.
2. Wenn ich auf einen der Buttons klicke, unter denen sich keine Unterliste befindet, verschwindet der Button darunter. Beim nochmaligen klick erscheint er dann wieder.

Kann mir da jemand weiterhelfen?

Gruss
triptrapp

pit-r · 27. Feb. 2006

Moin!

Wie wäre es mit etwas Code?

Ahoi - Pit

triptrapp · 27. Feb. 2006

:whacky:
bin ja total duselich

Hier anzusehen: http://www.doggenfreunde-paderborn.de/html/home

und hier der Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>right_frame</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #000052;
}
a:link {
	color: #999999;
	text-decoration: none;
}
-->
</style>
</head>
<style type="text/css">
ul {
list-style:none;
}
ul {
margin:10px 0
}

ul {
width:155px;
line-height:22px;
list-style:none;
margin-bottom:0px;
text-align:left;
border:0px solid #FFF
}
.Stil2 {color: #999999}
a:visited {
	color: #00CCFF;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.Stil3 {
	color: #CCCCCC;
	font-size: 12px;
}
body,td,th {
	font-size: 14px;
	color: #999999;
}
</style>
<body>
<table width="161" border="0" align="left" bordercolor="#000066">
  <tr>
    <td><div align="center"><img src="assets/images/Logo5.jpg" width="150" height="140"></div></td>
  </tr>
  <tr>
    <td width="155" height="310"><p align="left">
      <style>



        </style>        
      <script language="JavaScript1.2">
<!--

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
//This credit MUST stay intact for use



var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
      </script>
      </p>
      <div align="left">
        <ul>
          <li id="foldheader"><a href="html/body_home.html" target="Haupttext"><img src="buttons_navi/home.gif" border="0"></a></li>
           
            <li id="foldheader"><img src="buttons_navi/doggenfr.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li>          
                <a href="html/body_wir_doggenfreunde.html" target="Haupttext">Die OG Paderborn<br>
                </a>
              <li><a href="html/body_unsere_doggen.html" target="Haupttext">Unsere Doggen</a></li>
	          <li><a href="html/body_theorie.html" target="Haupttext">Theorie- u. Themenabende</li>
	          </a>
              <li><a href="html/body_protokolle.html" target="Haupttext">Protokolle u. Briefverkehr</a></li>
                <li><a href="html/body_gelevents.html" target="Haupttext">Gelaufene Events</a></li>
                <li><a href="html/body_index.html" target="Haupttext">Bilder</a></li>
                <li><a href="html/body_ausstellungserfolge.html" target="Haupttext">Ausstellungserfolge</a></li>
                <li><a href="html/body_veroeffentl_udd.html" target="Haupttext">Unsere Texte im uDD</a></li>
            </ul>
            <li id="foldheader"><img src="buttons_navi/uebungsb.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li><a href="html/body_ubungsstunden.html" target="Haupttext">Ausbildung und Erziehung</a></li>
                <li><a href="html/body_atrain.html" target="Haupttext">Ausstellungstraining</a></li>
            </ul>
            <li id="foldheader"><img src="buttons_navi/termink.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li><a href="html/body_termine.html" target="Haupttext">Termine der OG</a></li>
                <li><a href="html/body_ak.html" target="Haupttext">Ausstellungskallender</a></li>
            </ul>
            <li id="foldheader"><img src="buttons_navi/infos.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li><a href="html/body_doggenbucher.html" target="Haupttext">Literatur</a></li>
                <li><a href="html/body_rassestandard.html" target="Haupttext">Rassestandart</a></li>
            </ul>
            <li id="foldheader"><a href="html/body_links.html" target="Haupttext"><img src="buttons_navi/links.gif" width="154" height="27" border="0"></a></li>
           
            <li id="foldheader"><img src="buttons_navi/kontakt.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li><a href="html/body_anfahrt.html" target="Haupttext">Anfahrtswege</a></li>
              <li><a href="html/body_ansprechpartner.html" target="Haupttext">Ansprechpartner</a></li>
            </ul>
            <li id="foldheader"><a href="html/body_forum.html" target="Haupttext"><img src="buttons_navi/forum.gif" width="154" height="27" border="0"></a></li>
            
            <li id="foldheader"><a href="html/body_gastebuch.html" target="Haupttext"><img src="buttons_navi/gaesteb.gif" width="154" height="27" border="0"></a></li>
            
            <li id="foldheader"><a href="html/body_disclaimer.html" target="Haupttext"><img src="buttons_navi/discl.gif" width="154" height="27" border="0"></a></li>
            
            <div align="center"></div>
        </ul>
    </div></td>
  </tr>
</table>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

dkdenz · 27. Feb. 2006

Dein Link zeigt nix an...
Doch! Jetzt schon...

dkdenz · 27. Feb. 2006

Mach das mal zusätzlich in den body Deiner css-Datei:

Code:

margin:0px;
padding:0px;

triptrapp · 27. Feb. 2006

habich, sieht dann so aus:

Code:

<style type="text/css">
<!--
body {
	background-color: #000052;
	margin:0px;
    padding:0px;
}
a:link {
	color: #999999;
	text-decoration: none;
}

Bei den Darstellungen in den Browsern hat sich dadurch aber nichts geändert.

dkdenz · 27. Feb. 2006

Hast Du das bei der Seite mit der Navigation gemacht?

triptrapp · 27. Feb. 2006

Jawoll. Wenn ich die Zahlen ändere, verschiebt sich die Navi auch.

dkdenz · 27. Feb. 2006

Ich habe mal etwas in Deinem Quelltext rumgepfuscht.
Probiere mal aus, ob's was gebracht hat...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
        font-size: 14px;
	color: #999999;
	background-color: #000052;
}
body, div, ul, li {margin:0px;padding:0px;}
a:link {
	color: #999999;
	text-decoration: none;
}
ul {
list-style:none;
}
ul {
margin:10px 0
}
ul {
width:155px;
line-height:22px;
list-style:none;
margin-bottom:0px;
text-align:left;
border:0px solid #FFF
}
.Stil2 {color: #999999}
a:visited {
	color: #00CCFF;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.Stil3 {
	color: #CCCCCC;
	font-size: 12px;
}
</style>
</head>
<body>
<img src="assets/images/Logo5.jpg" width="150" height="140">
<script language="JavaScript1.2">
<!--

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use



var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
      </script>
      <div>
        <ul>

          <li id="foldheader"><a href="html/body_home.html" target="Haupttext"><img src="buttons_navi/home.gif" border="0"></a></li>
           
            <li id="foldheader"><img src="buttons_navi/doggenfr.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li>          
                <a href="html/body_wir_doggenfreunde.html" target="Haupttext">Die OG Paderborn<br>
                </a>
              <li><a href="html/body_unsere_doggen.html" target="Haupttext">Unsere Doggen</a></li>
	          <li><a href="html/body_theorie.html" target="Haupttext">Theorie- u. Themenabende</li>

	          </a>
              <li><a href="html/body_protokolle.html" target="Haupttext">Protokolle u. Briefverkehr</a></li>
                <li><a href="html/body_gelevents.html" target="Haupttext">Gelaufene Events</a></li>
                <li><a href="html/body_index.html" target="Haupttext">Bilder</a></li>
                <li><a href="html/body_ausstellungserfolge.html" target="Haupttext">Ausstellungserfolge</a></li>
                <li><a href="html/body_veroeffentl_udd.html" target="Haupttext">Unsere Texte im uDD</a></li>

            </ul>
            <li id="foldheader"><img src="buttons_navi/uebungsb.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li><a href="html/body_ubungsstunden.html" target="Haupttext">Ausbildung und Erziehung</a></li>
                <li><a href="html/body_atrain.html" target="Haupttext">Ausstellungstraining</a></li>
            </ul>
            <li id="foldheader"><img src="buttons_navi/termink.gif"></li>
            <ul id="foldinglist" style="display:none">

              <li><a href="html/body_termine.html" target="Haupttext">Termine der OG</a></li>
                <li><a href="html/body_ak.html" target="Haupttext">Ausstellungskallender</a></li>
            </ul>
            <li id="foldheader"><img src="buttons_navi/infos.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li><a href="html/body_doggenbucher.html" target="Haupttext">Literatur</a></li>
                <li><a href="html/body_rassestandard.html" target="Haupttext">Rassestandart</a></li>

            </ul>
            <li id="foldheader"><a href="html/body_links.html" target="Haupttext"><img src="buttons_navi/links.gif" width="154" height="27" border="0"></a></li>
           <li id="foldheader"><img src="buttons_navi/kontakt.gif"></li>
            <ul id="foldinglist" style="display:none">
              <li><a href="html/body_anfahrt.html" target="Haupttext">Anfahrtswege</a></li>
              <li><a href="html/body_ansprechpartner.html" target="Haupttext">Ansprechpartner</a></li>
            </ul>
            <li id="foldheader"><a href="html/body_forum.html" target="Haupttext"><img src="buttons_navi/forum.gif" width="154" height="27" border="0"></a></li>
            <li id="foldheader"><a href="html/body_gastebuch.html" target="Haupttext"><img src="buttons_navi/gaesteb.gif" width="154" height="27" border="0"></a></li>
            <li id="foldheader"><a href="html/body_disclaimer.html" target="Haupttext"><img src="buttons_navi/discl.gif" width="154" height="27" border="0"></a></li>
</ul>
</div>
</body>
</html>

triptrapp · 28. Feb. 2006

Super, danke für Deine Bemühungen.

Das erste Problem währe gelöst. Die Liste steht links am Rand.
Aber leider verschwinden bei Firefox und Netscape immer noch Buttons beim klicken.

Weist du da vielleicht auch noch einen Rat ?

dkdenz · 28. Feb. 2006

Gern geschehen...
Das 2. wird wohl eher ein JS-Problem sein.
Da habe ich keine Ahnung von...

triptrapp · 28. Feb. 2006

Ich habe die Sache jetzt mal so geändert:

Anstatt so:

Code:

<li id="foldheader"><a href="html/body_disclaimer.html" target="Haupttext"><img src="buttons_navi/discl.gif" width="154" height="27" border="0"></a></li>

habe ich es jetzt so gemacht:

Code:

<li id="foldheader"><a href="html/body_disclaimer.html" target="Haupttext"><img src="buttons_navi/discl.gif" width="154" height="27" border="0"></a></li>
             <ul id="foldinglist" style="display:none"> 
              </ul>

Der Nachteil ist, das jetzt auch unter den Buttons, unter denen kein Untermenü ist, ein Freiraum beim klicken entsteht.
Kann mann die Größe des Freiraumes eventuell auf Null stellen ?

dkdenz · 28. Feb. 2006

Hast Du das unter oberem Link schon online?

pit-r · 28. Feb. 2006

Hi!

Laß die li's ohne Unterpunkte wie sie waren, außer daß Du deren id's rausschmeißt. Das Script ist eh Müll, da es identische id's für mehrere Elemente benutzt...

Ahoi - Pit

triptrapp · 28. Feb. 2006

Danke für die Blumen. Bin halt Anfänger.

Habe die jeweiligen id`s rausgelöscht. Nu klappts.

Danke für Eure Promte Hilfe.

Klasse Forum

pit-r · 28. Feb. 2006

Moin!

triptrapp schrieb:
Danke für die Blumen. Bin halt Anfänger.

Sorry, falls das falsch rübergekommen ist mit dem Müll. Das statement hatte nix mit Dir zu tun, aber ich find es schade, daß Leute da was häkeln, was mit minimalem Zusatzaufwand deutlich besser sein könnte. Und hier bezog sich das auf den Menschen, der das Script gemacht hat und auf keinen Fall auf Leute wie Dich, die es nutzen.

Nix für ungut!

Ahoi - Pit

Navigationsliste in verschiedenen Browsern

triptrapp

New member

pit-r

Guest

triptrapp

New member

dkdenz

New member

dkdenz

New member

triptrapp

New member

dkdenz

New member

triptrapp

New member

dkdenz

New member

triptrapp

New member

dkdenz

New member

triptrapp

New member

dkdenz

New member

pit-r

Guest

triptrapp

New member

pit-r

Guest