Layoutproblem und kleine Frage...
Journal: sternenmeer
S1 oder S2: S2
Layout Stil: Flexible Squares
Account Art: Bezahlt
Kurzbeschreibung des Problems: Auf meiner Tags Seite rutschen der Titel und die Navlinks ein kleines Stück nach unten.
Auf meiner Tags Seite verrutscht der Header zusammen mit den Navlinks und dem Titel ein paar Millimeter nach unten. Im Mozilla Firefox verrutscht außerdem die Sidebar einen kleinen Tick nach rechts, so dass das Bild (dass ich in der Sidebar habe) vom Background der Tags Seite überdeckt wird.
Da ich das nicht so richtig beschreiben kann, sind hier Screenshots.
Meine 'Recent' Seite
Meine Tags Seite
Das gleiche passiert, wenn ich mich auslogge, so dass ich nur noch meinen 'Friends-only' Post sehe. Wenn ich mich aber wieder einlogge, ist das Problem behoben. Muss ich das verstehen?
/* ------ MAIN ------ */ body { background-color: #ffffff; color: #777777; font-family: "verdana", sans-serif; font-size: 10px; margin-top: 0px; } a, a:link, a:visited { color: #BB1C56; text-decoration: none; } a:hover { color: #999999; text-decoration: none; } blockquote { padding: 15px; border: 1px dashed #CECECE; color: #777777; font-size: 10px; line-height: 13px; font-family: "Verdana", sans-serif; background-color: #F8F8F8; text-align: justify; } ::-moz-selection { color: #F5F5F5; background: #63A8F6; } p, td{ } code, kbd, pre, tt { font-family: monospace; } /* ------ CONTAINING ELEMENTS ------ */ #lj_controlstrip {position: fixed; z-index: 20;} #lj_controlstrip_search {display: none} #content { width: 850px; margin-left: auto; margin-right: auto; text-align: justify; background-color: #FFFFFF; } #maincontent { position: relative; top: 15px; background-color: #FFFFFF; color: #777777; text-align: center; margin-left: 353px; z-index: 15; } #sidebar { position: fixed !important; top: 45px !important; right: 702px; background-color: #FFFFFF; background-image:url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/rote-Orchidee6.jpg); background-position:top right; background-repeat:no-repeat; color: #777777; float: left; text-align:left; width: 353px; height: 600px; } #header { position: fixed !important; right: 205px; color: transparent; width: 850px; font-family: "Verdana", sans-serif; font-size: 11px; text-align: left; text-transform: uppercase; background-color: transparent; z-index: 15; } #footer { background-color: #FfFfFf; margin-left: 388px; padding: 5px; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; color: #5D5D5D; z-index: 20; } /* ------ HEADER ------ */ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{ color: #bb1c56; text-decoration: none; } div#header a:hover, div#footer a:hover{ color: #999999; text-decoration: none; } ul.navheader { padding-top: 5px; padding-left: 173px; margin: 0px; } ul.navheader li { display: inline; padding: 7px; font-weight: bold; } li.view {color:#e2e2e2;} .title { color: #e2e2e2; padding-left: 176px; padding-top: 5px; font-size: 15px; font-weight: bold; text-transform: none; } .subtitle {display: none; } /* ------ SIDEBAR ------ */ #sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link, .sbarcalendarposts a:visited{ padding: 0px; text-align: center; } #sidebar .sbarcalendarposts a:hover { padding: 0px; text-align: center; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ color: #BB1C56; text-decoration: none; } div#sidebar a:hover { color: #999999; } .defaultuserpic { padding: 10px 10px 10px 10px; text-align: center; background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/userpic.jpg); background-position: center; background-repeat: no-repeat; margin-right: 186px; margin-top: 15px; } .sbarbody { list-style: none; } .sbarbody2 { list-style: none; text-align: right; margin-top: 0px; margin-right: 18px; } table.calendar { margin-right: 214px; margin-left: 18px; } .sbarcalendar { padding: 1px; text-align: center; font-family: "Verdana", sans-serif; font-size: 10px; } .sbarcalendarposts { border: 1px solid #CECECE; text-align: center; font-family: "Verdana", sans-serif; font-size: 10px; } ul.sbarlist { padding-left: 0px; margin-left: 0px; list-style: none; } li.sbaritem { text-align: right; text-transform: lowercase; padding: 3px 2px 2px 0px; border-bottom: 1px solid #cccccc; margin: 3px 206px 3px 20px; list-style: none; } li.sbaritem a { padding: 3px 2px 2px 0px; list-style: none; color: #BB1C56; } li.sbaritem a:hover { padding: 3px 2px 2px 0px; color: #999999; } li.sbartitle { padding: 15px 5px 15px 5px; margin-right: 186px; background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/sidebarheader.jpg); background-position: center; background-repeat: no-repeat; list-style: none; text-align: center; color: #5d5d5d; font-family: "Verdana", sans-serif; font-size: 10px; font-weight: bold; } /* ------ MAINCONTENT ------ */ .ljuser img { width: 0; height: 0; background-repeat: no-repeat; /* IE */ background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/flower_red.png)!important; padding: 16px 0px 0px 16px !important; } .ljuser img[src="http://stat.livejournal.com/img/user.gif"] { background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/flower_red.png) !important; padding: 16px 0px 0px 16px !important; } .ljuser img[src="http://stat.livejournal.com/img/community.gif"] { background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/butterfly_red.png) !important; padding: 16px 0px 0px 16px !important; } .subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{ padding: 0 10px 14px 0; background: url("http://s43.photobucket.com/albums/e397/sternen-nest/icons/flockednn2.gif"); } .subject img { width: 0; height: 0; background-repeat: no-repeat; /* IE */ background-image: url("http://s43.photobucket.com/albums/e397/sternen-nest/icons/flockednn2.gif"); padding: 15px 14px 0 0; } span.ljuser a b { padding: 2px 0 2px 0; color: #BB1C56; } span.ljuser a:hover b { padding: 2px 0 2px 0; color: #999999; } ul.ljtaglist li { list-style: none; margin-bottom: 5px; } ul.ljtaglist { color: #606060; padding: 10px 0px 10px 0px; } .subcontent { background-color: #ffffff; padding-left: 20px; } .entry { padding: 5px; color: #777777; text-align: justify; } .entry_text { margin-left: 20px; margin-right: 5px; line-heigth: 110%; } hr { color: transparent; height: 1px; border-style : none; border-bottom: 2px solid #CECECE; } .entry ul li, ol li, li { padding-left: 0px; margin-left: 0px; list-style-type: circle; list-style-position: outside; } .userpic { background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/userpic.jpg); background-position: center; background-repeat: no-repeat background-color: #FFFFFF !important position: relative; float: right; padding: 10px 10px 10px 10px; margin-right: 7px; margin-left: 10px; z-index: 10; } .userpicfriends { background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/userpicfriends.jpg); background-position: bottom center; background-repeat: no-repeat; background-color: #FFFFFF !important; position: relative; float: right; padding: 10px 10px 10px 10px; margin-right: 7px; margin-left: 10px; text-align: center; z-index: 10; } .date { padding-top: 5px; padding-bottom: 5px; padding-left: 10px; text-align: left; color: #5d5d5d; top: 5px; font-size: 8px; } .subject { font-weight: bold; padding-bottom: 5px; padding-top: 0px; padding-left: 10px; color: #5d5d5d; font-size: 13px; border-bottom: solid #cccccc 1px; } .subject a, .subject a:link, .subject a:visited { color: #BB1C56; } .subject a:hover { color: #999999; } .datesubject { background-color: transparent; padding: 0px; text-align: left; } .currentlocation { display: none; } .currentmusic {display: none; } .currentmood {position: relative; top: -15px; padding-left: 20px; } .currents strong, .currentmood strong { color: #777777; font-weight: normal; text-transform: lowercase; } .ljtags { text-transform: lowercase; padding-top: 30px; } .ljtags a, .ljtags a:link, .ljtags a:visited { color: #BB1C56; text-transform: lowercase; } .currentlocation a, .currentlocation a:link, .currentlocation a:visited { color: #BB1C56; text-transform: lowercase; } .currentlocation a:hover, .ljtags a:hover { color: #999999; font-weight: lighter; } .comments { border-top: solid #cccccc 1px; text-align: left; padding: 7px; position: relative; text-transform: none; } div.comments a, div.comments a:link, div.comments a:visited{ color: #BB1C56; } div.comments a:hover { color: #999999; text-decoration: none; } /* ------MAINCONTENT -- ENTRY, REPLY PAGES ------ */ .datesubjectcomment { margin-top: 0px; text-align: left; padding: 5px; color: #5d5d5d; font-size: 10,5px; background-color: #FfFfFf; border-bottom: solid #cccccc 1px; } .userpiccomment { background-color: #FFFFFF !important; background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/userpic.jpg); background-position: center; background-repeat: no-repeat position: relative; padding: 10px; margin: -5px 7px 0px 2px; z-index: 10; float: left; } .box { margin: 10px 0px 20px 30px; text-align: left; clear:right; } form div.box { text-align:center; } div#content input, div#content textarea, div#content select { color: #555555; border:#4E4E4E solid 1px; background-color:#FFFFFF; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; color: #777777; } .replytosubject { font-weight: bold; padding-bottom: 5px; padding-top: 0px; padding-left: 10px; color: #5d5d5d; font-size: 13px; border-bottom: solid #cccccc 1px; } .replytoposter { color: #5d5d5d; font-size: 11px; text-transform: lowercase; padding-left: 10px; } .commentreply { text-align: justify; position: relative; margin: 10px; line-heigth: 110%; color: #777777; } .commentbox { padding-top: 15px; padding-bottom: 20px; text-align: left; background-color: #FFFFFF; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #BB1C56; } .datesubjectcomment a:hover { color: #999999; } .commentboxpartial { padding: 10px; margin: 10px; background-color: #FFFFFF; } .commentinfo { margin-top: 10px; width: 100%; } /* ------ MAINCONTENT -- YEAR/ACHIVE PAGES ------ */ ul.year { text-align: center; padding: 10px; margin-top: 0px; margin-left: 20px; } ul.year li { display: inline; } table.yeartable { margin-left: auto; margin-right: auto; } table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px #CECECE solid; color: #777777; } table.yeartable td.yearday { text-align: center; color: #999999; } td.yearmonth { color: #BB1C56; border-style: none; } /* ------ FOOTER ------ */ ul.navfooter{ padding: 0px; margin: 0px; } ul.navfooter li { display: inline; padding: 10px; } .clearfoot { clear: both; } /* ------ MISC ------ */ .clear { height: 10px; font-size: 0.01px; } .skiplinks { text-transform: lowercase; text-align: center; padding: 10px 0 10px 0; } .separator { height: 20px; } * html div.subcontent { /* fixes an IE reply page bug */ height: 1%; clear: none; } * html div.box#commentform { /* fixes an IE reply page bug */ position: absolute; border-width: 1px; border-style: solid; border-color: #000000; background-color: #ffffff; }
Davon abgesehen habe ich noch eine kleine Frage. Ich würde gerne wissen, wie man auf den Kommentarseiten diese grauen Buttons gegen eigene Bilder tauschen kann. Ich habe das bei einigen Journals gesehen. Gibt es dafür vielleicht ein Tutorial?
Bild
S1 oder S2: S2
Layout Stil: Flexible Squares
Account Art: Bezahlt
Kurzbeschreibung des Problems: Auf meiner Tags Seite rutschen der Titel und die Navlinks ein kleines Stück nach unten.
Auf meiner Tags Seite verrutscht der Header zusammen mit den Navlinks und dem Titel ein paar Millimeter nach unten. Im Mozilla Firefox verrutscht außerdem die Sidebar einen kleinen Tick nach rechts, so dass das Bild (dass ich in der Sidebar habe) vom Background der Tags Seite überdeckt wird.
Da ich das nicht so richtig beschreiben kann, sind hier Screenshots.
Meine 'Recent' Seite
Meine Tags Seite
Das gleiche passiert, wenn ich mich auslogge, so dass ich nur noch meinen 'Friends-only' Post sehe. Wenn ich mich aber wieder einlogge, ist das Problem behoben. Muss ich das verstehen?
/* ------ MAIN ------ */ body { background-color: #ffffff; color: #777777; font-family: "verdana", sans-serif; font-size: 10px; margin-top: 0px; } a, a:link, a:visited { color: #BB1C56; text-decoration: none; } a:hover { color: #999999; text-decoration: none; } blockquote { padding: 15px; border: 1px dashed #CECECE; color: #777777; font-size: 10px; line-height: 13px; font-family: "Verdana", sans-serif; background-color: #F8F8F8; text-align: justify; } ::-moz-selection { color: #F5F5F5; background: #63A8F6; } p, td{ } code, kbd, pre, tt { font-family: monospace; } /* ------ CONTAINING ELEMENTS ------ */ #lj_controlstrip {position: fixed; z-index: 20;} #lj_controlstrip_search {display: none} #content { width: 850px; margin-left: auto; margin-right: auto; text-align: justify; background-color: #FFFFFF; } #maincontent { position: relative; top: 15px; background-color: #FFFFFF; color: #777777; text-align: center; margin-left: 353px; z-index: 15; } #sidebar { position: fixed !important; top: 45px !important; right: 702px; background-color: #FFFFFF; background-image:url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/rote-Orchidee6.jpg); background-position:top right; background-repeat:no-repeat; color: #777777; float: left; text-align:left; width: 353px; height: 600px; } #header { position: fixed !important; right: 205px; color: transparent; width: 850px; font-family: "Verdana", sans-serif; font-size: 11px; text-align: left; text-transform: uppercase; background-color: transparent; z-index: 15; } #footer { background-color: #FfFfFf; margin-left: 388px; padding: 5px; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; color: #5D5D5D; z-index: 20; } /* ------ HEADER ------ */ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{ color: #bb1c56; text-decoration: none; } div#header a:hover, div#footer a:hover{ color: #999999; text-decoration: none; } ul.navheader { padding-top: 5px; padding-left: 173px; margin: 0px; } ul.navheader li { display: inline; padding: 7px; font-weight: bold; } li.view {color:#e2e2e2;} .title { color: #e2e2e2; padding-left: 176px; padding-top: 5px; font-size: 15px; font-weight: bold; text-transform: none; } .subtitle {display: none; } /* ------ SIDEBAR ------ */ #sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link, .sbarcalendarposts a:visited{ padding: 0px; text-align: center; } #sidebar .sbarcalendarposts a:hover { padding: 0px; text-align: center; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ color: #BB1C56; text-decoration: none; } div#sidebar a:hover { color: #999999; } .defaultuserpic { padding: 10px 10px 10px 10px; text-align: center; background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/userpic.jpg); background-position: center; background-repeat: no-repeat; margin-right: 186px; margin-top: 15px; } .sbarbody { list-style: none; } .sbarbody2 { list-style: none; text-align: right; margin-top: 0px; margin-right: 18px; } table.calendar { margin-right: 214px; margin-left: 18px; } .sbarcalendar { padding: 1px; text-align: center; font-family: "Verdana", sans-serif; font-size: 10px; } .sbarcalendarposts { border: 1px solid #CECECE; text-align: center; font-family: "Verdana", sans-serif; font-size: 10px; } ul.sbarlist { padding-left: 0px; margin-left: 0px; list-style: none; } li.sbaritem { text-align: right; text-transform: lowercase; padding: 3px 2px 2px 0px; border-bottom: 1px solid #cccccc; margin: 3px 206px 3px 20px; list-style: none; } li.sbaritem a { padding: 3px 2px 2px 0px; list-style: none; color: #BB1C56; } li.sbaritem a:hover { padding: 3px 2px 2px 0px; color: #999999; } li.sbartitle { padding: 15px 5px 15px 5px; margin-right: 186px; background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/sidebarheader.jpg); background-position: center; background-repeat: no-repeat; list-style: none; text-align: center; color: #5d5d5d; font-family: "Verdana", sans-serif; font-size: 10px; font-weight: bold; } /* ------ MAINCONTENT ------ */ .ljuser img { width: 0; height: 0; background-repeat: no-repeat; /* IE */ background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/flower_red.png)!important; padding: 16px 0px 0px 16px !important; } .ljuser img[src="http://stat.livejournal.com/img/user.gif"] { background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/flower_red.png) !important; padding: 16px 0px 0px 16px !important; } .ljuser img[src="http://stat.livejournal.com/img/community.gif"] { background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/butterfly_red.png) !important; padding: 16px 0px 0px 16px !important; } .subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{ padding: 0 10px 14px 0; background: url("http://s43.photobucket.com/albums/e397/sternen-nest/icons/flockednn2.gif"); } .subject img { width: 0; height: 0; background-repeat: no-repeat; /* IE */ background-image: url("http://s43.photobucket.com/albums/e397/sternen-nest/icons/flockednn2.gif"); padding: 15px 14px 0 0; } span.ljuser a b { padding: 2px 0 2px 0; color: #BB1C56; } span.ljuser a:hover b { padding: 2px 0 2px 0; color: #999999; } ul.ljtaglist li { list-style: none; margin-bottom: 5px; } ul.ljtaglist { color: #606060; padding: 10px 0px 10px 0px; } .subcontent { background-color: #ffffff; padding-left: 20px; } .entry { padding: 5px; color: #777777; text-align: justify; } .entry_text { margin-left: 20px; margin-right: 5px; line-heigth: 110%; } hr { color: transparent; height: 1px; border-style : none; border-bottom: 2px solid #CECECE; } .entry ul li, ol li, li { padding-left: 0px; margin-left: 0px; list-style-type: circle; list-style-position: outside; } .userpic { background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/userpic.jpg); background-position: center; background-repeat: no-repeat background-color: #FFFFFF !important position: relative; float: right; padding: 10px 10px 10px 10px; margin-right: 7px; margin-left: 10px; z-index: 10; } .userpicfriends { background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/userpicfriends.jpg); background-position: bottom center; background-repeat: no-repeat; background-color: #FFFFFF !important; position: relative; float: right; padding: 10px 10px 10px 10px; margin-right: 7px; margin-left: 10px; text-align: center; z-index: 10; } .date { padding-top: 5px; padding-bottom: 5px; padding-left: 10px; text-align: left; color: #5d5d5d; top: 5px; font-size: 8px; } .subject { font-weight: bold; padding-bottom: 5px; padding-top: 0px; padding-left: 10px; color: #5d5d5d; font-size: 13px; border-bottom: solid #cccccc 1px; } .subject a, .subject a:link, .subject a:visited { color: #BB1C56; } .subject a:hover { color: #999999; } .datesubject { background-color: transparent; padding: 0px; text-align: left; } .currentlocation { display: none; } .currentmusic {display: none; } .currentmood {position: relative; top: -15px; padding-left: 20px; } .currents strong, .currentmood strong { color: #777777; font-weight: normal; text-transform: lowercase; } .ljtags { text-transform: lowercase; padding-top: 30px; } .ljtags a, .ljtags a:link, .ljtags a:visited { color: #BB1C56; text-transform: lowercase; } .currentlocation a, .currentlocation a:link, .currentlocation a:visited { color: #BB1C56; text-transform: lowercase; } .currentlocation a:hover, .ljtags a:hover { color: #999999; font-weight: lighter; } .comments { border-top: solid #cccccc 1px; text-align: left; padding: 7px; position: relative; text-transform: none; } div.comments a, div.comments a:link, div.comments a:visited{ color: #BB1C56; } div.comments a:hover { color: #999999; text-decoration: none; } /* ------MAINCONTENT -- ENTRY, REPLY PAGES ------ */ .datesubjectcomment { margin-top: 0px; text-align: left; padding: 5px; color: #5d5d5d; font-size: 10,5px; background-color: #FfFfFf; border-bottom: solid #cccccc 1px; } .userpiccomment { background-color: #FFFFFF !important; background-image: url(http://s43.photobucket.com/albums/e397/sternen-nest/layout/userpic.jpg); background-position: center; background-repeat: no-repeat position: relative; padding: 10px; margin: -5px 7px 0px 2px; z-index: 10; float: left; } .box { margin: 10px 0px 20px 30px; text-align: left; clear:right; } form div.box { text-align:center; } div#content input, div#content textarea, div#content select { color: #555555; border:#4E4E4E solid 1px; background-color:#FFFFFF; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; color: #777777; } .replytosubject { font-weight: bold; padding-bottom: 5px; padding-top: 0px; padding-left: 10px; color: #5d5d5d; font-size: 13px; border-bottom: solid #cccccc 1px; } .replytoposter { color: #5d5d5d; font-size: 11px; text-transform: lowercase; padding-left: 10px; } .commentreply { text-align: justify; position: relative; margin: 10px; line-heigth: 110%; color: #777777; } .commentbox { padding-top: 15px; padding-bottom: 20px; text-align: left; background-color: #FFFFFF; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #BB1C56; } .datesubjectcomment a:hover { color: #999999; } .commentboxpartial { padding: 10px; margin: 10px; background-color: #FFFFFF; } .commentinfo { margin-top: 10px; width: 100%; } /* ------ MAINCONTENT -- YEAR/ACHIVE PAGES ------ */ ul.year { text-align: center; padding: 10px; margin-top: 0px; margin-left: 20px; } ul.year li { display: inline; } table.yeartable { margin-left: auto; margin-right: auto; } table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px #CECECE solid; color: #777777; } table.yeartable td.yearday { text-align: center; color: #999999; } td.yearmonth { color: #BB1C56; border-style: none; } /* ------ FOOTER ------ */ ul.navfooter{ padding: 0px; margin: 0px; } ul.navfooter li { display: inline; padding: 10px; } .clearfoot { clear: both; } /* ------ MISC ------ */ .clear { height: 10px; font-size: 0.01px; } .skiplinks { text-transform: lowercase; text-align: center; padding: 10px 0 10px 0; } .separator { height: 20px; } * html div.subcontent { /* fixes an IE reply page bug */ height: 1%; clear: none; } * html div.box#commentform { /* fixes an IE reply page bug */ position: absolute; border-width: 1px; border-style: solid; border-color: #000000; background-color: #ffffff; }
;){kind=link}
;){kind=link}
;){kind=link}
!important;){kind=link}
;){kind=link}
Davon abgesehen habe ich noch eine kleine Frage. Ich würde gerne wissen, wie man auf den Kommentarseiten diese grauen Buttons gegen eigene Bilder tauschen kann. Ich habe das bei einigen Journals gesehen. Gibt es dafür vielleicht ein Tutorial?
Bild
