• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

tree in panel

G

Generic1

New member
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>
 
Du meinst, dass du hier Links untereinander listen willst:
PHP: 
<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: 
/* 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;
}
 
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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben