Antworten auf deine Fragen:
Neues Thema erstellen

Betriebsblindheit verhindert ordentliches Layout

L

lightview

Nicht mehr ganz neu hier

Hallo,
ich hoffe mir kann jemand helfen. Wenn man immer wieder an einer Seite herumarbeitet, verliert man schnell den Überblick. Ich hätte die Navigation gerne wieder zentriert, weiß aber nicht, wo der Fehler steckt.

Code: 
<!-- ###CONTENT_MAIN### start -->
<!-- start header -->
<div id="header">
	<a href="/"><img src="/uploads/tf/logo.jpg" alt="unser Logo" />
	<!-- <h1>OT Lorenz-Jaeger-Haus Olpe</h1></a>-->
	<!-- <p> Frankfurter Str. 24 * 57462 Olpe * fon 02761 / 8364-0 * fax 02761 / 8364-29</p> -->	 


<div class="wrapper1">
	<div class="wrapper">
		<div class="nav-wrapper">
			<div class="nav-left"></div>
			<div class="nav">
				<ul id="navigation">
			   		
<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Kinder und Jugendliche</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul><!-- ###NAV_2### start -->
			   					<li>
									<a href="#">Archives</a>
								</li>
			   					<li>
									<a href="#">Categories</a>
								</li>
			   					<li>
									<a href="#">Top-rated Posts</a>
								</li>
			   					<li>
									<a href="#">Most-viewed Entries</a>
								</li>
			   				<!-- ###NAV_2### stop --></ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
			   		<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Schulen</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul><!-- ###NAV_3### start -->
			   					<li>
									<a href="#">Archives</a>
								</li>
			   					<li>
									<a href="#">Categories</a>
								</li>
			   					<li>
									<a href="#">Top-rated Posts</a>
								</li>
			   					<li>
									<a href="#">Most-viewed Entries</a>
								</li>
			   				<!-- ###NAV_3### stop --></ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
			   		<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Aufsuchende Jugendarbeit</span>
							<span class="menu-right"></span>
						</a>
			   			<div class="sub">
			   				<ul><!-- ###NAV_4### start -->
			   					<li>
									<a href="#">Wordpress Themes</a>
									</li>
			   					<li>
									<a href="#">Wordpress Plugins</a>
								</li>
			   					<li>
									<a href="#">Mac OS X</a>
								</li>
			   				<!-- ###NAV_4### stop --></ul>
			   				<div class="btm-bg"></div>
			   			</div>
			   		</li>
			   		<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Projekte</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul><!-- ###NAV_5### start -->
			   					<li>
									<a href="#">Photoshop</a>
								</li>
			   					<li>
									<a href="#">Illustrator</a>
								</li>
			   					<li>
									<a href="#">Css, Html</a>
								</li>
								<li>
									<a href="#">Post Your Tutorial!</a>
								</li>
			   				<!-- ###NAV_5### stop --></ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
			   		<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Über uns</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul><!-- ###NAV_6### start -->
			   					<li>
									<a href="#">Personal Photos</a>
								</li>
			   					<li>
									<a href="#">My Friends</a>
								</li>
			   					<li>
									<a href="#">Tech</a>
								</li>
			   				<!-- ###NAV_6### stop --></ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
			   		<!-- <li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Portfolio</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
			   					<li>
									<a href="#">My Works</a>
								</li>
			   				</ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
			   		<li class="last">
						<a href="">
							<span class="menu-left"></span>
							<span class="menu-mid">Contact</span>
							<span class="menu-right"></span>
						</a>
			   		</li>
			   	</ul> -->
			</div>
			<div class="nav-right"></div>
		</div>
		<div class="content">
			<p>&nbsp;</p>
			<p>&nbsp;</p>

		</div>
		<div class="content-bottom"></div>
	</div>


<div class="nav">
<div class="table">

<!-- <ul class="select"><li><a href="/"><b>HOME</b></a></li></ul> 
<ul class="select"><li><a href="#"><b>Kids & Teens</b></a>
<div class="select_sub">

	<ul class="sub">
	<!-- ###NAV_2### start -->
		<li><a href="#">Sample Menu</a></li>
		<li><a href="#">Sample Menu</a></li>
		<li><a href="#">Sample Menu</a></li>
		<li><a href="#">Sample Menu</a></li>
		<li><a href="#">Sample Menu</a></li>
	<!-- ###NAV_2### stop -->
	</ul>
	
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Schulen</b></a>
<div class="select_sub">
	<ul class="sub">
	<!-- ###NAV_3### start -->
		<li><a href="#">Sample Menu 2</a></li>
		<li><a href="#">Sample Menu 2</a></li>
		<li><a href="#">Sample Menu 2</a></li>
		<li><a href="#">Sample Menu 2</a></li>
		<li><a href="#">Sample Menu 2</a></li>
	<!-- ###NAV_3### stop -->
	</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>AJA Olpe</b></a>
<div class="select_sub">
	<ul class="sub">
	<!-- ###NAV_4### start -->
		<li><a href="#">Sample Menu 3</a></li>
		<li><a href="#">Sample Menu 3</a></li>
		<li><a href="#">Sample Menu 3</a></li>
		<li><a href="#">Sample Menu 3</a></li>
		<li><a href="#">Sample Menu 3</a></li>
	<!-- ###NAV_4### stop -->
	</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Projekte</b></a>
<div class="select_sub">
	<ul class="sub">
	<!-- ###NAV_5### start -->
		<li><a href="#">Sample Menu 3</a></li>
		<li><a href="#">Sample Menu 3</a></li>
		<li><a href="#">Sample Menu 3</a></li>
		<li><a href="#">Sample Menu 3</a></li>
		<li><a href="#">Sample Menu 3</a></li>
	<!-- ###NAV_5### stop -->
	</ul>
</div>
</li>
</ul>


<ul class="select"><li><a href="#"><b>Über uns</b></a>
<div class="select_sub">
	<ul class="sub">
	<!-- ###NAV_6### start -->
		<li><a href="#">Sample Menu 4</a></li>
		<li><a href="#">Sample Menu 4</a></li>
		<li><a href="#">Sample Menu 4</a></li>
		<li><a href="#">Sample Menu 4</a></li>
		<li><a href="#">Sample Menu 4</a></li>
	<!-- ###NAV_6### stop -->
	</ul>
</div>
</li>
</ul> -->

</div>
</div>

<br />


</div>
<br />
</div>

<!-- end header -->

<!-- start page -->
<div id="wrapper">
<div class="top">
	<div id="page">
		<div class="bgtop">
			<div class="bgbtm">
				<!-- start content -->
				<div id="content">
					<!-- ###inhalt### start -->
					<!-- ###inhalt### stop -->
						
				</div>
				<!-- end content -->
				<!-- start sidebar -->
				
				
				<div id="sidebar">
		
<!-- ###links### start -->
<!-- ###links### stop -->
				
				</div>
				<!-- end sidebar -->				<div style="clear:both">&nbsp;</div>
			</div>
		</div>
	</div>
</div>
</div>
<div id="footer">
	<p>(c) Lorenz-Jaeger-Haus 2010</p> 
	<p>Öffnungszeiten: Montags 16-18 Uhr, Dienstags-Freitags 16-20 Uhr, alle zwei Wochen Samstags von 14-18 Uhr</p>
	<p>Kontakt-Telefon (02761) 8364 - 0 Kontakt-Fax (02761) 8364 - 29 </p>
	
</div>
<!-- ###CONTENT_MAIN### stop-->

</body>
</html>

Herzlichen Dank.
P.S.: es geht um diese Seite
 

T

tgreve

********

AW: Betriebsblindheit verhindert ordentliches Layout

lade dir mal den HTML-Validator für den Firefox runter!
Der kann einem ganz schnell auszeigen, wenn man einen Fehler in seine Seite eingebaut hat.
z.B. Dass dein <a> Tag für das Logo nicht geschlossen ist,...
 
nataliezimmer

nataliezimmer

pixelschubser

AW: Betriebsblindheit verhindert ordentliches Layout

Ich denke du hast das in der CSS verbaut. Also solltest du die CSS hier auch posten um eine Antwort zu bekommen.
 
L

lightview

Nicht mehr ganz neu hier

AW: Betriebsblindheit verhindert ordentliches Layout

HTML: 
body {
 margin-top: 15px;
 padding: 0;
 background: #ffffff url(images/img01.jpg) repeat left top;
 font-size: 14px;
 
 color: #000000;
}
body, th, td, input, textarea, select, option {
 font-family: "Trebuchet MS", "Times New Roman", Arial, Times, serif;
}
h1, h2, h3 {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-weight: normal;
 color: #000000;
 padding: 0px 0px 0px 30px;
 
}
h1 {
 letter-spacing: -2px;
 font-size: 2em;
        background: url(/uploads/tf/h1.jpg) no-repeat left center;
}

h1 i {
 letter-spacing: -2px;
 font-size: 2em;
 background: none;
}
h2 {
 letter-spacing: -1px;
 font-size: 1.5em;
}
h3 {
 font-size: 1em;
}
p, ul, ol {
 line-height: 140%;
}
blockquote {
 padding-left: 1em;
}
blockquote p, blockquote ul, blockquote ol {
 line-height: normal;
 font-style: italic;
}
a {
 color: #521818;
}
a:hover {
 color: #730202;
}
hr {
 display: none;
}
#wrapper {
 width: 800px;
 margin: 0 auto;
 padding: 0;
 background: url(img03.jpg) repeat-y left top;
 # border-left: 1px solid #000000;
 # border-right: 1px solid #000000;
 # border-bottom: 1px solid #000000;
 
}
#wrapper .top {
 background: url(img02.jpg) no-repeat left top;
}

/* Header */
header {
 width: 780px;
 #height: 1200px;
 height: 120px;
 margin: 0 auto;
 #padding: 20px 0 0 0;
 padding: 0px 25px 25px 0px;
 background: #FFB03B;
 # border-left: 1px solid #000000;
 # border-right: 1px solid #000000;
 # border-top: 1px solid #000000;
 color: #B64926;
}
header2 {
 width: 800px;
 height: 30px;
 #height: 130px;
 margin: 0 auto;
 #padding: 20px 0 0 0;
 padding: o 0 0 25px;
 background: #FFB03B;
 # border-left: 1px solid #000000;
 # border-right: 1px solid #000000;
 #border-top: 1px solid #000000;
 color: #B64926;
}
#header h1, #header p {
 margin: 0;
 text-transform: lowercase;
 font-family: Georgia, "Times New Roman", Times, serif;
}
#header h1 {
 color: #000000;
 font-size: 42px;
 padding-left: 35px;
}
#header p {
 padding: 0px 0 0 30px;
 font-size: 12px;
 font-weight: bold;
}
#header a {
 text-decoration: none;
 color: #F79F1A;
}
/* Page */
page {
 width: 800px;
 margin: 0 auto;
 margin-bottom: 15px;
}
/* Content */
#content {
 float: right;
 width: 505px;
 margin: 0;
 padding: 25px 5px 15px 20px;
}
.post {
 padding: 0px 0 0 0;
}
.title {
 border-left: 6px solid #2E2E2E;
 padding: 0 20px 0 27px;
 font-size: 24px;
}
.title a {
 text-decoration: none;
 color: #FFFFFF;
}
.pagetitle {
}
.byline {
 margin: -25px 20px 0 33px;
 color: #FFFFFF;
}
.meta {
 text-align: left;
 color: #5C1600;
 padding: 10px 20px 10px 17px;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 12px;
 #background: #FFB03B;
         background: #ffffff; 
border: 3px solid #000000;
}
.meta .more {
 background: url(img05.jpg) no-repeat left 50%;
 padding-left: 10px;
}
.meta .comments {
 background: url(img05.jpg) no-repeat left 50%;
 padding-left: 10px;
}
.meta a {
 color: #000000;
}
.navigation {
}
.alignleft {
 float: left;
}
.alignright {
 float: right;
}
.posts {
 margin: 0;
 padding: 0;
 list-style: none;
 line-height: normal;
}
.posts li {
}
.posts h3 {
 margin: 0;
 font-weight: bold;
}
.posts p {
 margin: 0;
 line-height: normal;
}
.posts a {
}
.entry {
 margin: 0;
 padding-left: 35px;
 color: #FFFFFF;
}
.last {
 border: none;
}
/* Sidebar */
#sidebar {
 float: left;
 width: 250px;
 margin-bottom: 10px;
 padding: 40px 0 0 0px;
 color: #000000;
}
#sidebar ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
#sidebar li {
 margin: 0;
 padding: 0;
}
#sidebar li ul {
 margin: 0 0 20px 0;
 padding: 0;
}
#sidebar li li {
 margin: 0 0 0 30px;
 padding: 0 0 0 10px;
 background: url(img05.jpg) no-repeat left 50%;
 line-height: 25px;
}
#sidebar h2 {
 width: 240px;
 height: 54px;
 margin: 0;
 padding: 10px 0 0 10px;
 font-size: 18px;
 background: url(img04.jpg) no-repeat left top;
 color: #FFFFFF;
}
#sidebar a {
 color: #000000;
}
#sidebar a:hover {
 text-decoration: none;
}
/* Search */
#search input {
 display: none;
}
#search input#s {
 display: block;
 width: 230px;
 padding: 2px 5px;
 border: 1px solid #3DD1FF;
 background: #FFFFFF url(img05.gif) repeat-x;
}
#search br {
 display: none;
}
/* Calendar */
#calendar {
}
#calendar h2 {
 margin-bottom: 15px;
}
#calendar table {
 width: 80%;
 margin: 0 auto;
 text-align: center;
}
#calendar caption {
 width: 100%;
 text-align: center;
}
#next {
 text-align: right;
}
#prev {
 text-align: left;
}
/* Footer */
#footer {
 width: 800px;
 height: 60px;
 min-height: 60px;
 margin: 0 auto;
 margin-bottom: 20px;
 text-align: center;
 font-size: 10px;
 font-family: Arial, Helvetica, sans-serif;
 color: #B64926;
}
#footer p {
 padding: 20px 0;
}
#footer p a {
 color: #5C1600;
}

#wrapper .top {
 background: url(img02.jpg) no-repeat left top;
}
.wrapper1{
 color: #44433f; 
 font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
 margin: 0;
 padding: 4px 0 0;
 }
 .wrapper1 a{
  color: #E5F2FB;
  text-decoration: none;
 }
 .wrapper1 a:hover {
  color: #09548B;
 }
 .wrapper1 p {
  margin: 0 0 17px;
  padding: 0;
  line-height: 18px;
 }
.wrapper {
 /*width: 710px;*/
 margin: 20px auto;
}
.nav {
 background: #fff url(/uploads/tf/nav_bg.png) repeat-x;
 float: left;
}
.nav-wrapper {
 clear: both;
 float: left;
}
.nav-left {
 background: url(/uploads/tf/nav_left.png) no-repeat top left;
 float: left;
 width: 11px;
 height: 41px;
}
.nav-right {
 background: url(/uploads/tf/nav_right.png) no-repeat top right;
 float: left;
 width: 11px;
 height: 41px;
}
.nav ul {
 /*width: 648px;*/
 height: 38px;
 float: left;
 margin: 0;
 padding-top: 3px;
 list-style: none;
 font-size: 15px;
}
.nav li {
 float: left;
 padding: 0 7px;
 background: url(/uploads/tf/split.png) no-repeat right center;
 position: relative;
 z-index: 1;
}
.nav li.last {
 background:none;
}
.nav li:hover {
 z-index:2;
}
.nav li a {
 display: block;
 line-height: 38px;
 overflow: hidden;
 float: left;
}
a .menu-left {
 background: url(/uploads/tf/menu_left.gif) no-repeat left top;
 width: 8px;
 height: 32px;
 line-height: 35px;
 display: block;
 float: left;
}
a .menu-mid {
 background: url(/uploads/tf/menu_mid.gif) repeat-x top left;
 height: 32px;
 line-height: 35px;
 display: block;
 float: left;
}
a .menu-right {
 background: url(/uploads/tf/menu_right.gif) no-repeat top left;
 width: 8px;
 height: 32px;
 line-height: 35px;
 display: block;
 float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
 background-position: 0 -37px;
 line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
 color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
 display:block;
}
.nav li .sub {
 display: none;
 position: absolute;
 top: 27px;
 left: 6px;
 background: url(/uploads/tf/submenu_top.png) no-repeat;
 width: 186px;
 padding-top: 9px;
}
.nav li ul {
 background: url(/uploads/tf/submenu_bg.png) repeat-y;
 width: 162px;
 height: auto;
 margin: 0;
 padding: 0 12px 10px;
 list-style: none;
 font-size: 14px;
}
.nav li:hover li,
.nav li.active li {
 width: 100%;
 padding: 1px 0 2px;
 border-bottom: 1px #C1D9F0 dashed;
 background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
 color: #09548B;
 background: none !important;
 line-height: normal;
 width: 156px;
 padding: 8px 3px 3px;
 text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
 color: #fff;
 background: #165B9F !important;
 text-decoration: none;
 line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
 color: #fff;
 background: #165B9F !important;
 text-decoration: none;
 line-height: normal;
}
/**/
.nav .btm-bg {
 background: url(/uploads/tf/submenu_bottom.png) no-repeat;
 width: 205px;
 height: 9px;
 overflow: hidden;
 clear: both;
}
.content {
 width: 670px;
 background: transparent url(/uploads/tf/content_bg.png) repeat-y;
 float: left;
 padding: 10px 20px;
}
.content h1 {
 color: #333;
 font-weight: 400;
 text-transform: uppercase;
 font-size: 18px;
 border-bottom: 1px dashed #C1D9F0;
}
.content h2 {
 font-weight: 400;
 text-transform: uppercase;
 font-size: 14px;
 padding-left: 10px;
 margin-bottom: -5px;
}
.content p {
 padding: 0 15px;
 text-align: justify; 
}
.content-bottom {
 width: 710px;
 background: transparent url(/uploads/tf/content_bottom.png) no-repeat;
 height: 13px;
 float: left;
}

hier der css-code
 
Solla

Solla

Aktives Mitglied

AW: Betriebsblindheit verhindert ordentliches Layout

Na also so wie es aussieht solltest Du die Navi, wenn Du sie zentriert haben willst auf gar keinen Fall mit float: left positionieren.
Was hältst Du von margin: 0 auto;

B.G.
Solla

P.S.: Das Validieren der gesamten Seite ist wirklich wichtig, da gibt es noch ne Menge Flüchtigkeitsfehler! Lass Deine Seite doch einfach mal durch: The W3C Markup Validation Service überprüfen, Du wirst staunen, was da noch alles im Argen ist!
 
F

fexx

Aktives Mitglied

AW: Betriebsblindheit verhindert ordentliches Layout

Solla schrieb:
Na also so wie es aussieht solltest Du die Navi, wenn Du sie zentriert haben willst auf gar keinen Fall mit float: left positionieren.
Zum Vergrößern anklicken....

Hast du dich vielleicht verschaut?? :)

lightview schrieb:
HTML: 
.navigation {
}
.alignleft {
 float: left;
}
Zum Vergrößern anklicken....



Solla schrieb:
Was hältst Du von margin: 0 auto;
Zum Vergrößern anklicken....
Wie gesagt, funktioniert nur mit einer definierten Breite in diesem Element.
 
Solla

Solla

Aktives Mitglied

AW: Betriebsblindheit verhindert ordentliches Layout

Hoppla, stimmt! Hatte ich ganz übersehen!

Sorry!
Danke für die Berichtigung!

Hab es eben mal mit Firebug durchprobiert - spricht ja nichts gegen ne feste Breite im nav-wrapper.

Insgesamt ist der Code ziemlich verquer! Hast Du den ganz alleine gemacht, oder hast Du den aus mehreren Quellen rauskopiert und zusammengestückelt?

HTML: 
.nav-wrapper {
    clear: both;
    width: 700px;
    margin: 0 auto;

HTML: 
.content {
    background: url("/uploads/tf/content_bg.png") repeat-y scroll 0 0 transparent;
    padding: 10px 20px;
    width: 670px;
    margin: 0 auto;

Und dann muss nur noch der Eigentliche Inhaltsbereich nach oben versetzt und vermutlich auch das Logo zentriert werden.

Siehe Bild:


Uploaded with

Ist natürlich nur ne Notlösung zu dem von Dir bereits erstellten CSS, aber perfekt ist das nicht. Ich würde Dir empfehlen die Seite nochmal in Ruhe neu aufzusetzen! Aber das ist natürlich Deine Entscheidung!

Viel Erfolg!

B.G.
Solla
 
Zuletzt bearbeitet:
D

Doitsu

Aktives Mitglied

AW: Betriebsblindheit verhindert ordentliches Layout

Also 1. der Quelltext ist wirklich schrecklich.
2. ist ein wrapper eigentlich da, um alle Elemente auf der Seite auszurichten.
3. hast du die loesung bereits im #wrapper & #footer angewendet, warum also nicht auch im #header?

/ Edit:
Sehe gerade, du hast es 'fast' gemacht, du hast beim Header die Route vergessen.
Stichwort: Logisch aufgebautes CSS, dann passiert so was nicht!
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 148 (Mitglieder: 6, Gäste: 142)
Robots: 741

Statistik des Forums

Themen
118.635
Beiträge
1.538.476
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben