Ergebnis 1 bis 3 von 3

Thema: tree in panel

  1. #1
    Generic1 ist offline Mitglied
    registriert
    22-02-2009
    Beiträge
    34

    tree in panel

    Hallo,

    ich habe folgenden Code unten und ich möchte mittels css einen tree in diese ausklappbaren Panels bekommen, nur weiß ich nicht, wie ich das hinbekomme,

    Vielleicht könnte mir jemand in diese Richtung helfen, Wäre euch sehr dankbar,
    lg
    Generic

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <style type="text/css">
    	#wrap {position:relative; background:#fff; padding:0 0px; color:#111; margin-left:16px; font-family:verdana, arial, sans-serif; font-size:11px;}
    	#wrap p {margin-left:0;}
    	#wrap a.nikon_link, #wrap a.nikon_link:visited {color:#444; font-size:10px;}
    	#wrap a.nikon_link:hover {text-decoration:none;}
    
    	#flyout {font-size:11px; padding:0; margin:0; list-style:none; width:24px; height:360px; position:absolute; left:-25px;}
    
    	#flyout li {display:block; width:24px; height:220px; background:#e6e6e6;}  <!-- color of the slidebar   -->
    	#flyout li a {display:block; width:24px; height:120px; text-indent:-999px; text-decoration:none;}
    
    	#flyout table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}
    	#flyout li {float:left; margin-bottom:3px;}
    	#flyout li ul {visibility:hidden; position:absolute; top:0; left:24px; width:400px; height:117px; border-left:0px solid #fff; padding-top:4px;}
    	#flyout li ul li {display:block; display:inline; width:100px; height:22px; border:0; margin:0 10px;}  <!-- schriftfarbe  -->
    	#flyout li ul li a {text-indent:0; display:block; width:100px; height:22px; line-height:21px; color:#fff; border-bottom:1px solid #555; text-decoration:none;}
    	#flyout li b {visibility:hidden; display:block; width:260px; height:666px; position:absolute; top:0; left:23px; background:#e6e6e6; opacity:0.8; filter:alpha(opacity=80);}
    
    	#flyout li:hover ul li a:hover {background:#fff; color:#fff;}
    	#flyout li:hover b,
    	#flyout li a:hover b {
    	visibility:visible;
    	}
    	#flyout li:hover ul,
    	#flyout li a:hover ul {
    	visibility:visible;
    	}
    	a.link {color:#fff;}
    </style>
    </head>
    
    <body id="menus" bgcolor="#ff0000">
            <div id="wrap">
                <ul id="flyout">
                    <li><a href="http://www.google.at" class="nikon"></a>
                        <b></b>
                        <ul>
                            <li><a href="http://www.google.at">Googlen</a></li>                       
                        </ul>
                    </li>
                    <li><a href="#nogo" class="canon"></a>
                        <b></b>
                        <ul>
                            <li><a href="#nogo">Digital IXUS</a></li>                       
                        </ul>
                    </li>
                    <li><a href="#nogo" class="pentax"></a>        
                        <b></b>
                        <ul>
                            <li><a href="#nogo">Optio A30</a></li>                       
                        </ul>
                    </li>
                </ul>
            </div>
        </body>
    </html>

  2. #2
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: tree in panel

    Du meinst, dass du hier Links untereinander listen willst:
    PHP-Code:
    <li><a href="http://www.google.at">Googlen</a></li
    <li><a href="http://www.google.at">neuer Link</a></li>
    usw
    Vielleicht so in der Art, musst natürlich noch anpassen:
    PHP-Code:
    /* Anzeige und Positionierung des Menüs */
    #flyout li:hover ul ,
    #flyout li a:hover ul {
        
    display:block;
        
    position:absolute;
        
    margin-top:1px;
        
    left:0;
        
    width:auto;
        }

    /* Dropdownlinks nicht gehovert */
    #flyout li:hover ul li a,
    #flyout li a:hover ul li a {
        
    display:block;
        
    border:0;
        
    margin:0;
        
    font-size:0.9em;
        
    height:auto;
        
    line-height:1em;
        
    padding:5px;
        
    width:auto;
        
    font-weight:bold;
        }

    /* Dropdownlinks mit Hover */
    #flyout li:hover ul li a:hover,
    #flyout li a:hover ul li a:hover {
        
    background:#888;
        
    color:#fff;



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  3. #3
    Generic1 ist offline Mitglied
    registriert
    22-02-2009
    Beiträge
    34

    AW: tree in panel

    Hallo Anna,

    vielen Dank erstmal für Deine Hilfe,
    ich habs aber leider noch immer nicht hinbekommen (bin leider in css nicht sehr fit), dass ich eine tree in meinem Panel platzieren konnte,
    Könntest Du mir nochmal helfen,
    Vielen dank und lg
    Generic,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <style type="text/css">
    	#wrap {position:relative; background:#fff; padding:0 0px; color:#111; margin-left:16px; font-family:verdana, arial, sans-serif; font-size:11px;}
    
    	#flyout {
            font-size:22px;
            padding:0; 
            list-style:none;
            width:24px;
            height:360px;
            position:absolute;
            left:-25px;
            }
    
    	#flyout li {
            display:block;
            width:24px;
            height:220px;
            background:#e6e6e6;
            }
    
    	#flyout li a {
            display:block;
            width:24px;
            height:120px;
            }
    
    	#flyout li {
            float:left;
            margin-bottom:2px;
            }
    
    	#flyout li ul {
            visibility:hidden;
            position:absolute;
            top:0; left:24px;
            width:400px;
            height:117px;
            border-left:0px solid #fff;
            padding-top:4px;
            }
    
    	#flyout li ul li {
            display:block;
            display:inline;
            width:100px;
            height:22px;
            border:0;
            margin:0 10px;
            }
    
    	#flyout li ul li a {
            text-indent:0;
            display:block;
            width:100px;
            height:22px;
            line-height:21px;
            color:#fff;
            border-bottom:1px solid #555;
            text-decoration:none;      
            }
    
    	#flyout li b {
            visibility:hidden;
            display:block;
            width:260px;
            height:664px;
            position:absolute;
            top:0; left:23px;
            background:#e6e6e6;      
            }
    
        #flyout li:hover ul li a:hover {
            background:#fff; color:#fff;
            }
    
    	#flyout li:hover b,
    	#flyout li a:hover b {
            visibility:visible;
            }
    
    	#flyout li:hover ul,
    	#flyout li a:hover ul {
            visibility:visible;
            }
    
    	a.link {color:#fff;}
    
        /* Anzeige und Positionierung des Menüs */
        #flyout li:hover ul ,
        #flyout li a:hover ul {
            display:block;
            position:absolute;
            margin-top:1px;
            left:0;
            width:auto;
            }
        /* Dropdownlinks mit Hover */
        #flyout li:hover ul li a:hover,
        #flyout li a:hover ul li a:hover {
            background:#888;
            color:#fff;
        }
    
    </style>
    </head>
    
    <body id="menus">
            <div id="wrap">
                <ul id="flyout">
                    <li><a href="http://www.google.at" class="nikon"></a>
                        <b></b>
                        <ul>
                           <li><a href="http://www.google.at">Googlen</a></li>
    						<li><a href="http://www.google.at">neuer Link</a></li>
                        </ul>
                    </li>
                    <li><a href="#nogo" class="canon"></a>
                        <b></b>
                        <ul>
                            <li>test1</li>
                        </ul>
                    </li>
                    <li><a href="#nogo" class="pentax"></a>
                        <b></b>
                        <ul>
                            <li>test2</li>
                        </ul>
                    </li>
                </ul>
            </div>
    		<embed id="svgobjekt" src="Bild1.svg" type="image/svg+xml" />
        </body>
    </html>

Ähnliche Themen

  1. Slide Panel jquery IE6 Fehler
    Von zenten im Forum Script-Check
    Antworten: 2
    Letzter Beitrag: 22-07-2009, 00:43
  2. SpryAccordion vs IE8
    Von Stuckert im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 27-03-2009, 09:38
  3. Antworten: 7
    Letzter Beitrag: 02-09-2008, 15:43
  4. js Tree wird nicht aktualisiert
    Von thomaspk im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 02-11-2004, 10:27
  5. JS Tree
    Von ObeY im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 10-05-2004, 07:50

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •