✔ NAvigation mit CSS die Seitlich aufgeht

son gohan · 25. Januar 2005

Hallo,

ich suche eine Navigation welche mit CSS arbeitet. Ich will das wen man über ein Wort in meiner Liste fährt, das dann recht neben dem Wort eine kleine definierte Liste mit Links aufgeht.

Ich kenne eine Seite : http://gosu.pl/dhtml/mygosumenu.html dort gibt es so ein Menü wie ich es brauche, aber es funktioniert teilweise mit Javascript und das will ich nicht.

Kann man den sowas nicht irgendwie mit CSS machen, sowas in der Art tooltip Technik?

Budman · 25. Januar 2005

Hallo!

Nein, leider noch nicht! Der IE verweigert sich allen Versuchen ohne Javascript standhaft.
Lies Dir mal das hier durch, das ist genau sowas, aber es braucht zwei Zeilen Script für den IE.

Ohne geht es leider im Moment noch nicht.

Gruss

son gohan · 25. Januar 2005

Hallo,

danke für den Tipp. Leider habe ich es nicht geschaft die Navigation nachzubauen.

Und noch ein Prblem habe ich, ich will eigentlich mehr in Richtung Tooltip etwas machen, weil die Wörter denen ich die Funktion geben will, "also die Wörter bei denen das Menü erscheinen soll", die möchte ich gerne beliebig auf der Seite verteilen können.

Ist das den bei dem Beispiel möglich, für mich sieht es so aus, als ob alles an einer festen Stelle ablaufen muss?

Wenn man die Wörter beliebig platzieren kann, dann wäre das aber wiederum doch ganz gut.

Hier mein Test, der nicht geklappt hat:

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
 <style type="text/css">
<!--
ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 }
ul li {
 position: relative;
 }
li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
 }
ul li a {
 display: block;
 text-decoration: none;
 color: #777;
 background: #fff;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 border-bottom: 1px solid #ccc;
 }
 
li:hover ul { display: block; }
li:hover ul, li.over ul {
 display: block; }
<ul id="nav">
-->
</style>
<script language="JavaScript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
 (" over", "");
   }
   }
  }
 }
}
//-->
</script>
</head>
<body window.onload=startList; >
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a>
	  <ul>
		<li><a href="#">History</a></li>
		<li><a href="#">Team</a></li>
		<li><a href="#">Offices</a></li>
	  </ul>
	</li>
	<li><a href="#">Services</a>
	  <ul>
		<li><a href="#">Web Design</a></li>
		<li><a href="#">Internet
			Marketing</a></li>
		<li><a href="#">Hosting</a></li>
		<li><a href="#">Domain Names</a></li>
		<li><a href="#">Broadband</a></li>
	  </ul>
	</li>
	<li><a href="#">Contact Us</a>
	  <ul>
		<li><a href="#">United Kingdom</a></li>
		<li><a href="#">France</a></li>
		<li><a href="#">USA</a></li>
		<li><a href="#">Australia</a></li>
	  </ul>
	</li>
  </ul>
</BODY>
</HTML>

nex_m · 25. Januar 2005

Meintest du sowas:

Code:

<html>
<head>
<script type="text/javascript">
<!--
  function montre(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="block";
		} else if (document.all) {
		  document.all[id].style.display="block";
		} else if (document.layers) {
		  document.layers[id].display="block";
		} } 

 function cache(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="none";
		} else if (document.all) {
		  document.all[id].style.display="none";
		} else if (document.layers) {
		  document.layers[id].display="none";
		} } 

//-->
</script>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}

ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

div.menu {
position: absolute;
width: 600px;
top: 10px;
z-index: 3;
}
div.menu li {
float: left;
width: 120px;
}

div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

div.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}

#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: normal;
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style></head>


<body>

<div class="menu">
<ul><li><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Menu 1</a>	<ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
	<li><a href="">Subkategorie 1.1</a></li>
	<li><a href="">Subkategorie 1.2</a></li>
	<li><a href="">Subkategorie 1.3</a></li>
	</ul></li>
	<li><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="">Menu 2</a><ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
	<li><a href="">Subkategorie 2.1</a></li>
	<li><a href="">Subkategorie 2.2</a></li>
	</ul></li>
	<li><a onmouseover="montre('smenu3');" onmouseout="cache('smenu3');" href="">Menu 3</a><ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
	<li><a href="">Subkategorie 3.1</a></li>
	<li><a href="">Subkategorie 3.2</a></li>
	<li><a href="">Subkategorie 3.3</a></li>
	<li><a href="">Subkategorie 3.4</a></li>
	<li><a href="">Subkategorie 3.5</a></li>
	</ul></li>
	<li><a onmouseover="montre('smenu4');" onmouseout="cache('smenu4');" href="">Menu 4</a><ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
	<li><a href="">Subkategorie 4.1</a></li>
	<li><a href="">Subkategorie 4.2</a></li>
	<li><a href="">Subkategorie 4.3</a></li>
	</ul></li>
</ul>
</div>

</body></html>

</body>
</html>

son gohan · 25. Januar 2005

Hallo,

die Technik ist schon richtig, ausser das ich gerne hätte das sich das Submenü rechts neben dem Link sich öffnet und nicht direkt darunten.

Und dann möchte ich gerne auch noch haben, das man das beliebig einsetzen kann.

Stell dir einfach mal vor du schreibst einen Text über Scherren, dann willst du das sich ein Menü wie jenes öffnet, sobald einer über das Wort Schere mit der Maus fährt, verstehst du?

Also nicht so fest wie bei einer normalen Navigation, sodern beliebig?

Wenn es damit nicht geht, kennst du vielleicht eine andere Technik für ähnliches. Ich will also irgendwie eine Auswahlmenü an Links anbieten können, sobald jemand über einen bestimmten Link im Text fährt? Das muss doch igendwie möglich sein ohne schweren Aufwand?

Maik · 25. Januar 2005

Hallo,

dir sind da ein paar Bugs im Style-Sheet, sowie Script- und HTML-Source unterlaufen:

li:hover ul, li.over ul {display: block; }
<ul id="nav">
-->
</style>

Den zu Beginn notierten Selektor UL wiederholst du am Ende des Style-Sheets:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

Hier der Bug im Script-Code:

this.className=this.className.replace » ("over", "");

Im BODY-Tag fügst du die window.onload- Funktion aus dem Script-Code ein:

<body window.onload=startList; >

... kein Wunder, dass da nichts läuft!

Hier der bug-fixed Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
 <style type="text/css">
<!--
body {
        font: normal 11px verdana;
        }

ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 150px; /* Width of Menu Items */
        border-bottom: 1px solid #ccc;
        }

ul li {
        position: relative;
        }

li ul {
        position: absolute;
        left: 149px; /* Set 1px less than menu width */
        top: 0;
        display: none;
        }

/* Styles for Menu Items */
ul li a {
        display: block;
        text-decoration: none;
        color: #777;
        background: #fff; /* IE6 Bug */
        padding: 5px;
        border: 1px solid #ccc; /* IE6 Bug */
        border-bottom: 0;
        }

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

li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
<script language="JavaScript">
<!--
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
//-->
</script>
</head>
<body>
<ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
          <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
          </ul>
        </li>
        <li><a href="#">Services</a>
          <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Internet
                        Marketing</a></li>
                <li><a href="#">Hosting</a></li>
                <li><a href="#">Domain Names</a></li>
                <li><a href="#">Broadband</a></li>
          </ul>
        </li>
        <li><a href="#">Contact Us</a>
          <ul>
                <li><a href="#">United Kingdom</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">Australia</a></li>
          </ul>
        </li>
  </ul>
</body>
</html>

greez, maik.l

son gohan · 25. Januar 2005

Hallo lieber maik,

vielen Dank für deine Hilfe, du bist echt ein Engel auf erden.

Jetzt funktioniert es auch, aber leider noch nicht so wie ich es mir vorstelle.

Ich habe mal in das Beispiel einen Teil meiner Seite eingebaut in die ich das ganze zum laufen bringen wollte. Dort habe ich zwei Kasten mit Überschriften und Inhalt gemacht. In den Kasten sind jeweils Links. Wenn jemand über einen Link fährt sollte sich dann rechts neben dem Link so ein Menü üffnen mit weiteren Link, verstehst du?

Das ist eine echt tolle Sache wenn das funktioniert, es ist zwar etwas Javascript in dem Code mit drine, aber ich hoffe alle Browser werden es mir verzeihen. Immerhin gibt es ja keine andere Möglichkeit sowas hinzubekommen. Höchstens vielleicht mit einem Stammabum System wo man auf ein Pluszeichen drückt usw.

Hier mein zweites Beispiel nochmal:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
 <style type="text/css">
<!--
body {
		font: normal 11px verdana;
		}
ul {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px; /* Width of Menu Items */
		border-bottom: 1px solid #ccc;
		}
ul li {
		position: relative;
		}
li ul {
		position: absolute;
		left: 149px; /* Set 1px less than menu width */
		top: 0;
		display: none;
		}
/* Styles for Menu Items */
ul li a {
		display: block;
		text-decoration: none;
		color: #777;
		background: #fff; /* IE6 Bug */
		padding: 5px;
		border: 1px solid #ccc; /* IE6 Bug */
		border-bottom: 0;
		}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
<script language="JavaScript">
<!--
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
//-->
</script>
</head>
<body>
<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a>
		  <ul>
				<li><a href="#">History</a></li>
				<li><a href="#">Team</a></li>
		  </ul>
		</li>
		<li><a href="#">Services</a>
		  <ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">Internet Marketing</a></li>
				<li><a href="#">Hosting</a></li>
				<li><a href="#">Domain Names</a></li>
				<li><a href="#">Broadband</a></li>
		  </ul>
		</li>
		<li><a href="#">Contact Us</a>
		  <ul>
				<li><a href="#">United Kingdom</a></li>
				<li><a href="#">France</a></li>
				<li><a href="#">USA</a></li>
				<li><a href="#">Australia</a></li>
		  </ul>
		</li>
  </ul>
 <p>&nbsp;</p>
<div style="width:635px;border:1px solid #007F00;"><!--b1-->
<span style="float : left;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;">A</span>
<span style="float : right;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;">B</span>
<span style="float : left;
width : 240px;
border : 1px solid #007f00;
font-size : 14px;
text-align : left;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;">
<dl style="margin:5px;">
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
</dl>
</span>
<span style="float : right;
width : 240px;
border : 1px solid #007f00;
text-align : left;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;">
<dl style="margin:5px;">
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
</dl>
</span>
<br style="clear:both;">
</div>

</body>
</html>

gruß
feh

Maik · 25. Januar 2005

Ich dachte, du kennst jetzt den Unterschied zwischen einem Inline- und Blockelement ?

>>> ich bekomme ein dl Tag nicht valide

Zitat selfHTML:
Inline-Elemente sind als untergeordnete, "innere" Elemente für Block-Elemente gedacht. Sie können in den meisten Fällen normalen Text und weitere Inline-Elemente enthalten, jedoch keine Block-Elemente.

Und warum packst du eine Definitionsliste DL (=Block-Element) in ein SPAN (=Inline-Element):

HTML:

<span style="float:left; width:240px; border:1px solid #007f00; font-size:14px; text-align:left; font-family:arial, verdana, sans, sans-serif; font-weight:bold; margin-right:150px;">

<dl style="margin:5px;">
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
<dt>p <dd>
</dl>

</span>

Das Script funktioniert für deinen eingefügten Code aus mehreren Gründen nicht:

1. Die Script-Funktion ist derzeit für das LI-Element (=Listenpunkt) gültig [ if (node.nodeName=="LI") ]

2. Dem DL-Tag fehlt die erforderliche ID #nav [ navRoot = document.getElementById("nav"); ]

3. Wo keine Sub-Listen vorhanden sind, können auch keine Sub-Menüs angezeigt werden

4. Der CSS-Code für das Menü bezieht sich auf das UL- und LI-Element

[ editpost 21:12 ]
5. Deine Liste enthält noch keine Links

greez, maik.l

son gohan · 25. Januar 2005

Hallo maik,

ich habe eben ein wenig rumprobiert, aber nichts hinbekommen. Wie odne ich es den richtig damit das dl Tag und der Rest so klapt. Aber wenn ich dich richtig verstanden habe, dann ist es schon möglich wie ich es mir vorstelle.

Nun wegen den blockelement im inline Element habe ich nicht aufgepaßt.

Hier nochmal der Code mit Links:

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body {
		font: normal 11px verdana;
		}
ul {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px; /* Width of Menu Items */
		border-bottom: 1px solid #ccc;
		}
ul li {
		position: relative;
		}
li ul {
		position: absolute;
		left: 149px; /* Set 1px less than menu width */
		top: 0;
		display: none;
		}
/* Styles for Menu Items */
ul li a {
		display: block;
		text-decoration: none;
		color: #777;
		background: #fff; /* IE6 Bug */
		padding: 5px;
		border: 1px solid #ccc; /* IE6 Bug */
		border-bottom: 0;
		}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
<script language="JavaScript">
<!--
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//-->
</script>
</head>
<body>
<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a>
		 <ul>
				<li><a href="#">History</a></li>
				<li><a href="#">Team</a></li>
		 </ul>
		</li>
		<li><a href="#">Services</a>
		 <ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">Internet Marketing</a></li>
				<li><a href="#">Hosting</a></li>
				<li><a href="#">Domain Names</a></li>
				<li><a href="#">Broadband</a></li>
		 </ul>
		</li>
		<li><a href="#">Contact Us</a>
		 <ul>
				<li><a href="#">United Kingdom</a></li>
				<li><a href="#">France</a></li>
				<li><a href="#">USA</a></li>
				<li><a href="#">Australia</a></li>
		 </ul>
		</li>
</ul>
<p>&nbsp;</p>
 
<div style="width:635px;border:1px solid #007F00;"><!--b1-->
<span style="float : left;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;">A</span>
<span style="float : right;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;">B</span>
<span style="float : left;
width : 240px;
border : 1px solid #007f00;
font-size : 14px;
text-align : left;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;">
<dl style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</span>
<span style="float : right;
width : 240px;
border : 1px solid #007f00;
text-align : left;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;">
<dl style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</span>
<br style="clear:both;">
<p>&nbsp;</p>
<span style="float : left;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;">A</span>
<span style="float : right;
width : 240px;
border : 1px solid #007f00;
background-color : #005f00;
color : #ffffff;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;">B</span>
<span style="float : left;
width : 240px;
border : 1px solid #007f00;
font-size : 14px;
text-align : left;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;
margin-right : 150px;">
<dl style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</span>
<span style="float : right;
width : 240px;
border : 1px solid #007f00;
text-align : left;
font-size : 14px;
font-family : arial, verdana, sans, sans-serif;
font-weight : bold;">
<dl style="margin:5px;">
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
<dt><a href="az.html">p</a> <dd>
</dl>
</span>
<br style="clear:both;">
</div>
 
</body>
</html>

gruß
feh

Maik · 26. Januar 2005

Wie ich dir gestern abend schon geschrieben habe, liegt es an mehreren Punkten, weshalb das Script für deine Definitionsliste nicht funktioniert. Es genügt also nicht, blos in deiner Liste die fehlenden Links einzufügen.

Ausserdem kann das Script nur auf eine Liste mit der ID #nav angewendet werden.

greez, maik.l

✔ NAvigation mit CSS die Seitlich aufgeht

son gohan

Erfahrenes Mitglied

Budman

Erfahrenes Mitglied

son gohan

Erfahrenes Mitglied

nex_m

Erfahrenes Mitglied

son gohan

Erfahrenes Mitglied

Maik

son gohan

Erfahrenes Mitglied

Maik

son gohan

Erfahrenes Mitglied

Maik

Neue Beiträge