Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag03.08.2012 um 14:52 (UTC)    
Titel: Vertikales Css Menü

Hallo.
Eines vorne weg: ich nutze das Design CSS.

Ich habe ein Problem mit einem vertikalen CSS Menü: ich wollte dieses auf der linken Seite platzieren, sodass sich die zweite Ebene nach rechts öffnet. Die besagte zweite Ebene öffnet jedoch nur zur Hälfte und ich finde den Fehler leider nicht.

Es wäre sicherlich am besten, wenn ihr euch das selbst noch einmal anschaut, damit man es besser nachvollziehen kann.
www.djkfalkenhorstherne.de.tl

Mein kompletter Code sieht folgendender Maßen aus:


Code:

/*Inhalt der 1.Extra-Box (rechts):*/
<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>

<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[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>

/*CSS-Code ohne Style Tags*/

*{margin:0px; padding: 0px;}

table[height="102"]  {
  position: absolute;
  left: 50%;
  top: 5px;
  margin-left: -250px; }

body {
  background-image: url(http://img.webme.com/pic/d/djkfalkenhorstherne/gruen_3.png);
  background-repeat: repeat-x;
  background-color: #BFBFBF;
  font-size: 14px;
  font-family: times new roman;
  font-weight: bold;
  color: #000000;
}

#container {
  width: 970px;
  margin:auto;
  overflow:hidden;
}

#header_container {
  width: 970px;
  height: 100px;
  margin-top: 10px;
  margin-bottom: 15px;
  background-image: url(http://img.webme.com/pic/d/djkfalkenhorstherne/logo.png);
  background-repeat: no-repeat; }

h1#header {display:none;}

#nav_container {
  width: 970px;
  height: 37px; }

#nav_heading {display:none;}
#nav_container ul {width:960px;margin: auto;}

li.nav_element {
  float:left;
  margin-right: 50px;
  margin-left: 50px;
  list-style-type: none; }

li.nav_element a {
  color: #008900;
  line-height: 40px;
  text-decoration: none; }

li.nav_element a:hover {
  color: #008900; }

#content_container {
  width: 970px;
  margin: auto;
  margin-top: 20px;
}

#content {
  width: 650px;
  min-height: 400px;
  float: right;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
 }

#content a {
  color: #008900;
}

#content a:hover {
  color: #FFFFFF;
  text-decoration: underline; }

#content h2{color:#FFFFFF;}

h2#title{display:none;}

#sidebar_container {
  width: 250px;
  padding-top: 4px;
  float: left;
  overflow: hidden; }

#sidebar_heading {display:none;}

.boxen {
    width: 200px;
    background-color: #008900;
    background-image: url(http://img.webme.com/pic/d/djkfalkenhorstherne/box_bg.png.png);
    background-repeat: repeat-x;
    background-position: 0px 15px;
    padding: 15px;
    margin: 0px 10px 20px 0px;
    border: 1px solid #000000;
    border-radius: 5px; 
    box-shadow: 4px 4px 7px 4px #676767;}

.boxen h3 { display:none; }

ul.linkliste li { display:none; }

.linkliste li a { display:none; }

.linkliste li a:hover { display:none; }

#footer {
  width: 100%;
  height: 37px;
  margin: auto;
  margin-bottom: 15px;
  text-align: right;
  list-style-type: none;
  background-color: #000000;
  color: #008900;
  font-size: 12px; }

#footer a {
  font-size: 12px;
  color: #008900;
  text-decoration: underline; }

.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 */


Es wäre super, wenn mir jemand helfen könnte Smile
Beitrag03.08.2012 um 22:36 (UTC)    
Titel:

Hallo,

ganz einfach, der sidebar Container hat nur eine Breite von 250 Pixel und ist damit einfach nicht Breit genug, um auch die 2. Liste anzuzeigen.

Zitat:
#sidebar_container {
width: 250px;
padding-top: 4px;
float: left;
overflow: hidden; }

löschen
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag04.08.2012 um 07:19 (UTC)    
Titel:

Kleine Sache, große Auswirkung.
Vielen Dank, hat geklappt!
Beitrag04.08.2012 um 07:49 (UTC)    
Titel:

Dann danke für die Rückmeldung und o-4-n für die Hilfe Wink

Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de