kostenloser Webspace werbefrei: lima-city

Rollout Menü

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

auto code datei dokument element funktion hintergrundbild hinweis image item level list portfolio position quadrat schriftart square text unterstrichen url
  1. Autor dieses Themas

    almaran

    almaran hat kostenlosen Webspace.

    11:04, 14.3.2010
    Hallo zusammen,
    ich wollte dieses Menü hier auf meiner Seite einbinden ( die Seite ist gerade nicht online).
    http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

    CSS:
    <style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>


    <div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>


    Bin sehr anhunglos in der Materie, aber normalerweise beziehe ich mich doch in meinem Html Dokument auf das CSS-Sheet, hier finde ich einen solchen Bezug gar nicht.
    Baue ich diesen dann so: <link rel="stylesheet" href="sidebar.css" type="text/css" media="screen" /> ein, sind zwar die Farben angepasst aber es passiert sonst nichts.

    Dankeschön

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. fatfreddy

    Kostenloser Webspace von fatfreddy

    fatfreddy hat kostenlosen Webspace.

    11:15, 14.3.2010
    In deinem ersten Codeschnipsel steckt außer CSS auch Javascript. Wenn Du das in die sidebar.css gepackt hast, wird es natürlich nicht ausgeführt.

    Das Javascript gehört in den <head>-Bereich deiner Seite.

    FF
  4. Autor dieses Themas

    almaran

    almaran hat kostenlosen Webspace.

    11:24, 14.3.2010
    Dankeschön für den Hinweis.
    mein Versuch, die Html und Css durch <link rel="stylesheet" href="sidebar.css" type="text/css" media="screen" /> zu verbinden, ist wohl auch nicht sinnvoll oder?
    Wobei ich dann nicht verstehe, wie die html-seite weiss von welchem stylesheet sie ihre funktionen nehmen soll..

    Beitrag zuletzt geändert: 14.3.2010 11:25:20 von almaran

  5. fatfreddy

    Kostenloser Webspace von fatfreddy

    fatfreddy hat kostenlosen Webspace.

    11:35, 14.3.2010
    almaran schrieb:
    Dankeschön für den Hinweis.
    mein Versuch, die Html und Css durch <link rel="stylesheet" href="sidebar.css" type="text/css" media="screen" /> zu verbinden, ist wohl auch nicht sinnvoll oder?
    Wobei ich dann nicht verstehe, wie die html-seite weiss von welchem stylesheet sie ihre funktionen nehmen soll..

    Das Stylesheet per "Link rel=.. href=..." ist schon ok, es macht die Seite für dich übersichtlicher. Letztendlich passiert nichts anderes, als da? beim Aufruf der Seite die Stylesheet.css in das HTML-Dokument eingebunden wird. Der Vorteil ist, daß sie nur einmal geladen werden muß und dann im Browsercache liegt. Dadurch verkürzen sich Ladezeiten. Gleiches gilt für externe, eingebundene Javascripte.

    Kleiner Hinweis: Bindest Du mehrere stylesheet-Dateien in dein Dokument ein, werden sie in der Reihienfolge der Links in das Dokument übernommen. Wenn ein Element mehrfach definiert ist, werden die vorher geladenen Definitionen überschrieben und die zuletzt Eingebundene wirkt.



    FF

    Beitrag zuletzt geändert: 14.3.2010 11:37:15 von fatfreddy
  6. Autor dieses Themas

    almaran

    almaran hat kostenlosen Webspace.

    12:24, 14.3.2010
    Im Moment passiert auf der Seite noch nichts wie ich erwarten,. bzw. wünschen würde...
    wollte gerade mal die html und css datein hochladen um s vorzuführen, nur komme ich grad scheinbar nicht an meinen webspace..

    Css
    /* 

*/

body {
	background: #FFFFFF url('images/background.jpg') repeat-x;  		/* Hintergrundbild das senkrecht wiederholt wird */
	color: #686864;														/* Schriftfarbe */
	font: 0.9em 'Trebuchet MS', Geneva, Arial, Helvetica, sans-serif;	/* Schriftgroesse und Schriftart */
	margin: 0px;														/* Aussenabstand */
}

p, pre{ 
	padding: 5px 10px; 		/* Innenabstand */
	margin: 0px; 			/* Aussenabstand */
	color: #2E2E3A;			/* Schirftfarbe */
}

ul { 
	list-style: square; 	/* Liststyle => Quadrat */
}

.left { 
	text-align: left; 		/* Textausrichtung */
	float: left; 			/* Element umfließen lassen - links */
	padding-left: 5px;		/* Innenabstand */
}

.right { 
	text-align: right;		/* Textausrichtung */
}

/* ----------------------------------------- */

#ram { 	
	background: url('images/mitte.jpg') repeat-y;		/* Hintergrundbild das senkrecht wiederholt wird */
	width: 752px;										/* Bereit des Div-Elements */
	margin: 0px auto;									/* Aussenabstand - durch auto = mittige Ausrichtung */
}

#header {
	background: url('images/header_p.jpg') repeat-y;		/* Hintergrundbild das senkrecht wiederholt wird */
	width: 752px;										/* Bereit des Div-Elements */
	height: 142px;										/* Hoehe des Div-Elements */
	margin: 0px;										/* Aussenabstand */
	padding: 0px;										/* Innenabstand */
}

#content {		
	width: 550px;										/* Bereit des Div-Elements */
	padding: 10px 15px 15px 35px;						/* Innenabstand */
	float: left;										/* Element umfließen lassen - links */
}

#navi{
	width: 140px;										/* Bereit des Div-Elements */
	margin: 0px 0px 0px 612px;							/* Aussenabstand */
	padding: 10px 0px 0px 0px;							/* Innenabstand */
}

* html #navi{	/* Angabe nur fuer den IE */										
	margin: 0px 0px 0px 555px;
}

	#navi ul{
		list-style: square inside;						/* Liststyle => Quadrat */
		margin: 0px auto;								/* Aussenabstand */
		padding: 0px;									/* Innenabstand */
	}

#footer {
background: #FFFFFF url('images/footer.jpg') top no-repeat; /* Hintergrundbild das nicht wiederholt wird */
clear: left; /* hebt float: left; wieder auf*/
width: 716px; /* Bereit des Div-Elements */
height: 40px; /* Hoehe des Div-Elements */
margin: 0px auto; /* Aussenabstand */
padding: 25px 0px 0px 25px; /* Innenabstand */
line-height: 36px; /* Zeilenhoehe*/
text-align: left; /* Textausrichtung */
color: #969789; /* Textfarbe */
} 

/* Links
--------------------------------------------------------------------------- */

A {	/* generelle Formatierung eines Links */
	color: #B1815C; 									/* Textfarbe */
	text-decoration: none;								/* Definiert das der Link nicht unterstrichen ist */
}

A:visited { /* Besuchter Link */
	color: #B18832;  									/* Textfarbe */
	text-decoration: bold;							/* Definiert dass der Link unterstrichen ist */
}

A:hover, A:active {	/* Aktiver Link & wenn man mit der Maus drueber faehrt */
	color: #B1625C;  									/* Textfarbe */
	text-decoration: underline;							/* Definiert dass der Link unterstrichen ist */
}

/* headlines
--------------------------------------------------------------------------- */
h1{
	color: #C6C7BF;										/* Textfarbe */
	text-align: left; 									/* Textausrichtung */
	padding: 0 0px 5px 5px;								/* Innenabstand */
	font: Normal 2.7em verdana, tahoma, sans-serif;		/* Schriftgroesse und Schriftart */
}

h2{
	color: #B1815C;										/* Textfarbe */
	text-align: left; 									/* Textausrichtung */
	padding: 0 5px 5px 5px;								/* Innenabstand */
	font: normal 1.6em;									/* Schriftgroesse und Schriftart */
}

h3{
	color: #C29C7E;										/* Textfarbe */
	text-align: left;  									/* Textausrichtung */
	padding: 0 5px 0px 5px;								/* Innenabstand */
	font-size: 1.4em;									/* Schriftgroesse */
}

h4{
	color: #BA7EBA;										/* Textfarbe */
	text-align: left; 									/* Textausrichtung */	
	padding: 0 5px 5px 5px;								/* Innenabstand */
	font-size: 1.3em;									/* Schriftgroesse */
}

h5{
	color: #BA7EBA;										/* Textfarbe */
	text-align: left; 									/* Textausrichtung */	
	padding: 0 5px 5px 5px;								/* Innenabstand */
	font-size: 1.3em;									/* Schriftgroesse */
	
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 50px; /* Width of Menu Items */
border-bottom: 0px solid #ccc;
}
	
.suckerdiv ul li{
position: relative;
}
	
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 90px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #FFFFFF;
padding: 5px 5px;
border: 0px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: white;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */



    Html
    <!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>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style_test.css" type="text/css" media="screen" />

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
		else //else if this is a sub level submenu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>


</head>
<body bgcolor="#FFFFFF">

<div id="ram">
<div id="header"></div>

<div id="content">
  <h1>Willkommen</h1>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
 <ul>
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">About me</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</ul>
</div>


<div id="footer">Portfolio - M&auml;rz 2010 -	<a href="#top" onClick="self.scrollTo(0, 0); return false;"> top </a></div>
</div> 

</body>
</html>


    Die Untermenüs klappen nicht seitlich aus, sondern untereinander.. auch ist es irgendwie egal welche padding werte ich eingebe, ändern tut sich nichts..

    Danke für Hilfe

    Beitrag zuletzt geändert: 14.3.2010 12:26:26 von almaran

  7. a******e

    13:20, 14.3.2010
    Funktioniert doch wunderbar.
    Alles was CSS ist kommt zwischen <head> und </head>
    alles was bei HTML steht kommt zwischen <body> und </body>

    <html>
    <head>
    <style type="text/css">


    .sidebarmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px Verdana;
    width: 180px; /* Main Menu Item widths */
    border-bottom: 1px solid #ccc;
    }

    .sidebarmenu ul li{
    position: relative;
    }

    /* Top level menu links style */
    .sidebarmenu ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: white;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #778;
    border-right: 1px solid #778;
    }

    .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
    background-color: #012D58; /*background of tabs (default state)*/
    }

    .sidebarmenu ul li a:visited{
    color: white;
    }

    .sidebarmenu ul li a:hover{
    background-color: black;
    }

    /*Sub level menu items */
    .sidebarmenu ul li ul{
    position: absolute;
    width: 170px; /*Sub Menu Items width */
    top: 0;
    visibility: hidden;
    }

    .sidebarmenu a.subfolderstyle{
    background: url(right.gif) no-repeat 97% 50%;
    }


    /* Holly Hack for IE \*/
    * html .sidebarmenu ul li { float: left; height: 1%; }
    * html .sidebarmenu ul li a { height: 1%; }
    /* End */

    </style>

    <script type="text/javascript">



    var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

    function initsidebarmenu(){
    for (var i=0; i<menuids.length; i++){
    var ultags=document.getElementById(menuids).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
    if (ultags[t].parentNode.parentNode.id==menuids) //if this is a first level submenu
    ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
    else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
    for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
    ultags[t].style.visibility="visible"
    ultags[t].style.display="none"
    }
    }
    }

    if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)

    </script>


    </head>
    <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    <div class="sidebarmenu">
    <ul id="sidebarmenu1">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>

    <li><a href="#">Folder 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    </ul>
    </div>

    </body>
    </html>
  8. Autor dieses Themas

    almaran

    almaran hat kostenlosen Webspace.

    13:40, 14.3.2010
    jetz kapier ich gar nix mehr..
    meinst du in das stylesheet oder in die html datei?

  9. a******e

    16:03, 14.3.2010
    Habe dir eine PN gesendet. Wenn es weitere Fragen gibt, dann kontaktiere mich

  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!