Johann: CSS display Funktion

SELF-Forum

CSS display Funktion

Johann
– Informationen zu den Bewertungsregeln

Hallo,

ich bin gerade dabei mir eine horizontale Menüleiste mit "DropDown Funktion" zu bauen.

Hier erstmal der Code:

  
<style type="text/css">  
#nav{padding:0; margin:0; float:left; font:16px Tahoma;}  
#nav li{display:inline;}  
#nav li a{background:#0000FF; padding:8px 11px; float:left; color:#FFFFFF; text-decoration:none;}  
#nav li a:visited, #nav li a:active{color:#FFFFFF;}  
#nav li a:hover{color: #FFFFFF; text-decoration:underline;}  
#nav li ul{display:none;}  
#nav li ul:hover{display:block;}  
</style>  
  
<div>  
	<ul id="nav">  
		<li><a href="#">Link 1</a></li>  
		<li><a href="#">Link 2</a></li>  
		<li><a href="#">Link 3</a>  
			<ul>  
			<li><a href="#">AAA</a></li>  
			<li><a href="#">BBB</a></li>  
			<li><a href="#">CCC</a></li>  
			</ul>  
		</li>  
	</ul>  
</div>  
  
<script type="text/javascript">  
  var nav = document.getElementById("nav").getElementsByTagName("ul");  
  for (i=0;i<nav.length;i++) {  
    nav[i].setAttribute("id","nav"+i)  
    if (nav[i].parentNode.nodeName == "LI") {  
      nav[i].parentNode.onmouseover = function () {  
        this.lastChild.style.display = "block";  
      }  
      nav[i].parentNode.onmouseout = function () {  
        this.lastChild.style.display = "none";  
      }  
    }  
  }  
</script>

Das Problem ist, wenn ich über den Link 3 mit der Maus gehe, erscheinen die Untermenü's nebeneinander neben Link 3. Ich möchte es aber unter Link 3 Untereinander haben. Wie schaffe ich es?

Viele Grüße
Johann

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS display Funktion

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    #nav li{display:inline;}

    Das Problem ist, wenn ich über den Link 3 mit der Maus gehe, erscheinen die Untermenü's nebeneinander neben Link 3.

    Klar, weil du mit der obigen CSS-Regel sagst, dass alle li-Elemente innerhalb von #nav display:inline haben sollen. Davon sind auch die li-Elemente des verschachtelten Menüs betroffen.

    Eigentlich willst du aber nur die direkten li-Kindelemente von #nav mit display:inline versehen, die verschachtelten sollten display:list-item behalten.

    Jetzt könntest du
    #nav > li { ... }
    schreiben, also mit einem Kindselektor arbeiten. Der IE 6 versteht das aber nicht, also verwendest du besser eine weitere Regel, die display:inline für das Untermenü wieder zurücksetzt:

    #nav li li { display: list-item; }
    oder (ist glaube ich noch kompatibler)
    #nav li li { display: block; }

    Ähnlich wird hier gearbeitet:
    http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
    Dort sinds float:left und float:none.

    Mathias

    --
    JavaScript-Erweiterung für das SELFHTML-Forum
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS display Funktion

      Johann
      – Informationen zu den Bewertungsregeln

      Hallo Mathias,

      ich habe in der zwischen zeit das Problem halbwegs gelöst. Undzwar habe ich ein dickes Problem.

      Der Code:

        
<style type="text/css">  
#linkbir{padding:0px; margin:0px; float:left; list-style-type:none;}  
#linkbir a{padding:7px 7px; display:block; background:white url(lbcizgia.gif) no-repeat center; font:13px Tahoma; color:#FFFFFF; text-decoration:none;}  
#linkbir ul{margin:0; padding:0; float:left; position:absolute; display:none;}  
#linkbir li{padding:0; margin:0; float:left; position:relative; display:block; list-style:none;}  
#linkbir li a:hover{padding:7px 7px; display:block; background:white url(lbcizgihover.gif) no-repeat center; font:13px Tahoma; color:#FFFFFF; text-decoration:none;}  
#linkbir li a:visited, #linkbir li a:active{color:#FFFFFF;}  
#linkbir li ul{display:none;}  
#linkbir li ul a{padding:7px 0px; display:block; background:white url(cizgi.gif) repeat-y left top; font:13px Tahoma; color:#FFFFFF; text-decoration:none; text-indent:7px;}  
#linkbir li ul a:hover{background:white url(cizgi.gif) repeat-y; background-position:-387px 0px; color:#FFFFFF; text-indent:0px;}  
#linkbir li:hover ul{display:block;}  
#linkbir li:hover ul ul{position:absolute; display:none;}  
#linkbir li ul:hover ul{display:block;}  
  
.lbeins{width:200px;}  
.lbzwei{width:100px;}  
</style>  
  
<!--[if IE]>  
<style type="text/css">  
p.iepara{padding-top: 1em;}  
</style>  
<![endif]-->  
  
<div>  
<table cellspacing="0" align="center">  
<tr>  
<td>  
<ul id="linkbir">  
<li><a href="http://www.misafir.taskiranvecevresi.com/">Ana Sayfa</a></li>  
<li><a href="uyeol.php">Üye Ol</a></li>  
<li><a href="#">Derne&#287;imiz &#9660;</a>  
	<ul>  
	<li class="lbzwei"><a href="tarihce.php">Tarih&#231;e</a></li>  
	<li class="lbzwei"><a href="amaclar.php">Ama&#231;lar</a></li>  
	<li class="lbzwei"><a href="tuzuk.php">Tüzük</a></li>  
	<li class="lbzwei"><a href="http://www.taskiranvecevresi.com/PDF/uyeformu.pdf" target="_blank">Üye Formu</a></li>  
	<li class="lbzwei"><a href="http://www.taskiranvecevresi.com/PDF/cikisformu.pdf" target="_blank">&#199;&#305;k&#305;&#351; formu</a></li>  
	<li class="lbzwei"><a href="kunye.php">Künye</a></li>  
	</ul>  
</li>  
<li><a href="siteyonetimi.php">Site Yönetimi</a></li>  
<li><a href="#">Yönetim Kurulu &#9660;</a>  
	<ul>  
	<li class="lbeins"><a href="yku.php">Yönetim Kurulu Üyeleri</a></li>  
	<li class="lbeins"><a href="ykk.php">Yönetim Kurulu Kararlar&#305;</a></li>  
	</ul>  
</li>  
<li><a href="#">Denetleme Kurulu &#9660;</a>  
	<ul>  
	<li class="lbeins"><a href="dku.php">Denetleme Kurulu Üyeleri</a></li>  
	<li class="lbeins"><a href="dkr.php">Denetleme Kurulu Raporlar&#305;</a></li>  
	</ul>  
</li>  
<li><a href="faaliyetler.php">Faaliyetler</a></li>  
<li><a href="videolar.php">Videolar</a></li>  
<li><a href="fotografalbum.php">Foto&#287;raf Albümü</a></li>  
<li><a href="#">&#304;leti&#351;im &#9660;</a>  
	<ul>  
	<li class="lbzwei"><a href="webposta.php">Bize Ula&#351;&#305;n</a></li>  
	<li class="lbzwei"><a href="muracaatlar.php">Müracaatlar</a></li>  
	</ul>  
</li>  
</ul>  
</td>  
</tr>  
</table>  
</div>  
  
  
<script type="text/javascript">  
var linkbir = document.getElementById("linkbir").getElementsByTagName("ul");  
	for (i=0;i<linkbir.length;i++)  
	{  
	linkbir[i].setAttribute("id","linkbir"+i)  
		if (linkbir[i].parentNode.nodeName == "LI")  
		{  
		linkbir[i].parentNode.onmouseover = function ()  
			{  
			this.lastChild.style.display = "block";  
			}  
		linkbir[i].parentNode.onmouseout = function ()  
			{  
			this.lastChild.style.display = "none";  
			}  
		}  
	}  
</script>

      funktioniert wunderbar auf mein Rechner zuhause. Genauso wie ich es haben will. Aber wenn ich diesen Link auf mein Webserver hochlade, sind die Untermenüs nicht untereinander sondern nebeneinander in einer Reihe.

      FireFox zeigt total was anderes an.....

      Wo könnte mein Fehler stecken?

      Vielen Dank.
      Johann

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS display Funktion

        Malcolm Beck´s
        – Informationen zu den Bewertungsregeln

        hi,

        funktioniert wunderbar auf mein Rechner zuhause. Genauso wie ich es haben will. Aber wenn ich diesen Link auf mein Webserver hochlade, sind die Untermenüs nicht untereinander sondern nebeneinander in einer Reihe.

        Was für ein Link ladest du denn da hoch?

        Link doch mal hier zu der Baustelle, wenn du es schon Online hast.

        mfg

        --
        echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
        array(2) {
          ["SELFCODE"]=>
          string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
          ["Meaningful"]=>
          string(?) "Der Sinn des Lebens ist deinem Leben einen Sinn zu geben"
        }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS display Funktion

          Johann
          – Informationen zu den Bewertungsregeln

          Hallo,

          da ich gestern nicht mehr dazu kam ist hier der Link:

          Also die Leiste, um die es geht ist unter diesem Link zu sehen:
          http://www.csw-gmbh.de/taskiran/linkbir.html
          In IE7 und in FireFox wird es richtig angezeigt.

          Ich muss vorher sagen, dass ich für einen Kunden (Verein) bei der Aufbau der Webseite helfen muss.... Daher habe ich die Seiten alle in PHP programmiert, damit ich einige Sachen "includen" kann.

          Jetzt, die Seite die nicht funktionieren will in IE7 und in FireFox, wobei es im FireFox am schlimmsten aussieht:
          http://www.csw-gmbh.de/taskiran/index.php

          Da der Webserver ja PHP nicht anzeigt, denke ich mal, dass ich es hier mal reinschreiben sollte, was in der index.php Datei steht. Vielleicht ist mein Fehler ja dort.

            
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
	<link rel="stylesheet" href="../taskiran/csssheets/misafir.css"></link>  
	<?php  
	include "http://www.taskiranvecevresi.com/siteskripte/header.php";  
	?>  
</head>  
  
<body>  
	<div id="tumsayfa">  
		<div id="basyazi">  
			<?php include "http://www.taskiranvecevresi.com/siteskripte/basyazi.php";?>  
		</div>  
		  
		<div id="logosol">  
			<?php include "http://www.taskiranvecevresi.com/siteskripte/logosol.php";?>  
		</div>  
		  
		<div id="resimalani">  
			<?php include "http://www.taskiranvecevresi.com/siteskripte/resimalani.php";?>  
		</div>  
		  
		<div id="logosag">  
			<?php include "http://www.taskiranvecevresi.com/siteskripte/logosag.php";?>  
		</div>  
		  
		<div id="linkalanbir">  
			<?php include "http://www.csw-gmbh.de/taskiran/a.html";?>  
		</div>  
		  
		<div id="linkalaniki">  
			<?php include "http://www.misafir.taskiranvecevresi.com/linkiki_files/linkiki.php";?>			  
		</div>  
		  
		<div id="goruntu" class="yazibir">  
			<?php include "http://www.taskiranvecevresi.com/siteskripte/basresimlerbuyuk.php";?>		  
		</div>  
		  
		<div id="linkalanuc">  
			  
			<?php include "http://www.misafir.taskiranvecevresi.com/linkuc_files/linkuc.php";?>  
		</div>  
		  
		<div id="altyazi" class="yaziiki">  
			<?php include "http://www.taskiranvecevresi.com/siteskripte/altyazi.php";?>  
		</div>		  
	</div>  
</body>  
</html>

          Komischerweise funtktioniert dieser eine Sache gar nicht, sonst wird alles in IE7 und FireFox richtig angezeigt.

          Wie schon gestern erwähnt sind die Untermenüs oben nebeneinander nicht untereinander....

          Den Code für linkbir.html lasse ich hier aus, da jeder Browser den Quelltext anzeigen Kann.

          Vielen Dank und viele Grüße
          Johann

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. CSS display Funktion

            Struppi Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Da der Webserver ja PHP nicht anzeigt, denke ich mal, dass ich es hier mal reinschreiben sollte, was in der index.php Datei steht. Vielleicht ist mein Fehler ja dort.

            oder vielleicht auch hier.

            Struppi.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. CSS display Funktion

              Johann
              – Informationen zu den Bewertungsregeln

              Hallo,

              ich verstehe jetzte den zusammenhang mit dem falsch erscheinen der Seite und diesen Link gar nicht?

              oder vielleicht auch hier.

              Viele Grüße
              Johann

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. CSS display Funktion

                Struppi Homepage des Autors
                – Informationen zu den Bewertungsregeln

                ich verstehe jetzte den zusammenhang mit dem falsch erscheinen der Seite und diesen Link gar nicht?
                » oder vielleicht auch hier.

                Ich verstehe auch nicht was falsch ist, da du uns nicht sagst was falsch ist. Aber ich sehe, dass der Validator fast 100 Fehler findet, das ist doch schon falsch genug, oder?

                Struppi.

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. CSS display Funktion

                  Johann
                  – Informationen zu den Bewertungsregeln

                  Hallo Strupi,

                  wenn Du auf http://www.csw-gmbh.de/taskiran/linkbir.html gehst, und über "Yönetim Kurulu" gehst, wirst Du sehen, dass im IE7 und im FireFOX alles richtig angezeigt wird. Also dass die Untermenüs alle untereinander sind. Das ist auch genau so wie ich es haben will.

                  Wenn Du nun auf http://www.csw-gmbh.de/taskiran/index.php gehst, wo ich die obere Navigationsbar einbinden möchte, und über "Yönetim Kurlu" gehst, sind die Untermenüs nebeneinander im IE7 und im FireFOX ist die ganze Leiste woanders.

                  Ich hätte es aber dass die Untermenüs untereinander sind.

                  Tut mir leid, wenn ich mich nicht deutlich ausgedrückt habe.

                  Viele Grüße
                  Cemil

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. CSS display Funktion

                    Struppi Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    Wenn Du nun auf http://www.csw-gmbh.de/taskiran/index.php gehst, wo ich die obere Navigationsbar einbinden möchte, und über "Yönetim Kurlu" gehst, sind die Untermenüs nebeneinander im IE7 und im FireFOX ist die ganze Leiste woanders.

                    Unter Umständen liegt das am Fehler im HTML Code.

                    Ansonsten mutest du hier den Leuten viel zu, wenn du erwartest das wir fehlerhaften Code, der auch nicht sonderlich lesbar geschrieben ist und darüber hinaus gespickt mit CSS angaben die problematishc sein könnten, wie z.b. position:absolute oder die vielen floats.

                    Sinnvoll wäre auch, wenn du das CSS mal auf Gültigkeit prüfst, dort sind auch Fehler drin.

                    Struppi.

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. CSS display Funktion

                      Johann
                      – Informationen zu den Bewertungsregeln

                      Hallo Struppi,

                      das der Code nicht sonderlich sauber geschrieben ist, ist mir schon klar. Habe es ja größtenteils immer includet und da steht dann halt vieles nebeneinander...

                      Aber was ich jetzt zum erstenmal höre ist:

                      Sinnvoll wäre auch, wenn du das CSS mal auf Gültigkeit prüfst, dort sind auch Fehler drin.

                      Wo kann man denn sowas prüfen lassen?

                      Viele Grüße
                      Cemil

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

                      1. CSS display Funktion

                        Struppi Homepage des Autors
                        – Informationen zu den Bewertungsregeln

                        » Sinnvoll wäre auch, wenn du das CSS mal auf Gültigkeit prüfst, dort sind auch Fehler drin.

                        Wo kann man denn sowas prüfen lassen?

                        http://jigsaw.w3.org/css-validator/

                        Nichts für ungut, aber google sollte diese Seite auch ohne Probleme finden.

                        Struppi.

                        Beitrag melden
                        –
                        Informationen zu den Bewertungsregeln

                        1. CSS display Funktion

                          Johann
                          – Informationen zu den Bewertungsregeln

                          Hallo Struppi,

                          ich komme der Sache schon sehr nah. Mir ist aufgefallen, dass es im IE6 genauso angezeigt wird wie ich es haben will. Aber nicht in IE7.

                          Woran könnte es liegen? An den CSS Code oder an dem HTML Code, damit ich den Fehler ein wenig eingrenzen kann?

                          Wieso liest der IE6 den CSS Code bzw. den HTML Code anders als IE7?

                          Viele Grüße
                          Cemil

                          Beitrag melden
                          –
                          Informationen zu den Bewertungsregeln