Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?
von Joost Gestern um 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04

»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03

» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41

» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in Entdeckt die neue Option Servimg Premium
( 2 )


» Beitrag von Joost in  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
( 2 )


» Beitrag von T.G. in Zugangsdaten vergessen/verloren
( 1 )


» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )


» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )


[phpBB2] Sliderbilder vollflächig darstellen lassen?

2 verfasser

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von silberling Mo 19 Aug 2013 - 10:06

hallo!

ich möchte gerne das bild vom slider vergrössern, damit das bild rechts und links bis zum schwarzen nach aussen gehen und oben bzw. unten auch zum schwarzen rand reichen. habe zwar schon die gesamten werte vom code geändert jedoch bin ich nie zu dem ergebnis gekommen wie ich mir dies vorstelle lt foto.

derzeitige slider:
[phpBB2] Sliderbilder vollflächig darstellen lassen? S257


so sollte es aussehen:
[phpBB2] Sliderbilder vollflächig darstellen lassen? Mor

derzeitige portalcode:
Code:
<center><table border="0" bgcolor="#141414"><tr><td width="895"></center>
<center><iframe src="http://test1000.forumieren.com/h5-slider-breiter-neu" width="99%" height="304" frameborder="0" scrolling="no"></iframe></center>
derzeitige slider html code:
Code:
<!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8">
      <style type="text/css">
    
     /*
       Resets defualt browser settings
       reset.css
    */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
    :focus { outline:0; }
    a:active { outline:none; }
    body { line-height:1; color:black; background:white; }
    ol,ul { list-style:none; }
    table { border-collapse:separate; border-spacing:0; }
    caption,th,td { text-align:left; font-weight:normal; }
    blockquote:before,blockquote:after,q:before,q:after { content:""; }
    blockquote,q { quotes:"" ""; }

    /*
       Page style
    */

    body {
            background-color: transparent;
       font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
       letter-spacing:0;
       color:#434343;
       top center;
       position:relative;
       text-shadow:0 1px 0 rgba(255,255,255,.8);
       -webkit-font-smoothing: subpixel-antialiased;
    }

    #container {
       width:880px;
       padding:1px;
       margin:0 auto;
       position:relative;
       z-index:0;
    }

    #example {
       width:900px;
       height:350px;
       position:relative;
    }

    #frame {
       position:absolute;
       z-index:0;
       width:1039px;
       height:341px;
       top:-3px;
       left:-80px;
    }

    /*
       Slideshow
    */

    #slides {
       position:absolute;
       top:15px;
       left:4px;
       z-index:100;
    }

    /*
       Slides container
       Important:
       Set the width of your slides container
       Set to display none, prevents content flash
    */

    .slides_container {
       width:870px;
       overflow:hidden;
       position:relative;
       display:none;
 border:1px solid #000000;
    }

    /*
       Each slide
       Important:
       Set the width of your slides
       If height not specified height will be set by the slide content
       Set to display block
    */

    .slides_container a {
       width:870px;
       height:270px;
       display:block;
    }

    .slides_container a img {
       display:block;
    }

    /*
       Next/prev buttons
    */

    #slides .next,#slides .prev {
       position:absolute;
       top:115px;
       left:5px;
       width:24px;
       height:43px;
       display:block;
       z-index:101;
    }

    #slides .next {
       left:842px;
    }

    /*
       Pagination
    */

    .pagination {
       margin:-16px auto 0;
       width:65px;
   position: absolute;
   z-index: 102;
   right: 400px;
    }

    .pagination li {
       float:left;
       margin:0 1px;
       list-style:none;
    }

    .pagination li a {
       display:block;
       width:12px;
       height:0;
       padding-top:12px;
       background-image:url("http://i39.servimg.com/u/f39/18/36/42/68/pagina12.png");
       background-position:0 0;
       float:left;
       overflow:hidden;
    }

    .pagination li.current a {
       background-position:0 -12px;
    }

    /*
       Footer
    */

    #footer {
       text-align:center;
       width:880px;
       margin-top:9px;
       padding:4.5px 0 18px;
       border-top:1px solid #dfdfdf;
    }

    #footer p {
       margin:4.5px 0;
       font-size:1.0em;
    }

    /*
       Anchors
    */

    a:link,a:visited {
       color:#599100;
       text-decoration:none;
    }

    a:hover,a:active {
       color:#599100;
       text-decoration:underline;
    }
    
   </style>
   
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
       <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script type="text/javascript">
    
   (function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)
    
     </script>
       <script>
          $(function(){
             $('#slides').slides({
                preload: true,
                preloadImage: 'http://i43.servimg.com/u/f43/17/63/75/60/loadin10.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true
             });
          });
       </script>
    </head>
    <body>
       <div id="container">
          <div id="example">
             <div id="slides">
                <div class="slides_container">
                   <a title="BILDTITEL" target="_blank"><img src="http://img545.imageshack.us/img545/127/o0vw.png" width="870" height="270"></a>
              <a title="BILDTITEL" target="_blank"><img src="http://img23.imageshack.us/img23/7359/s53k.png" width="870" height="270"></a>
              <a title="BILDTITEL" target="_blank"><img src="http://img694.imageshack.us/img694/8060/k677.png" width="870" height="270"></a>
             <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="http://img534.imageshack.us/img534/3315/n8it.png" width="870" height="270"></a>
                </div>
                <a href="#" class="prev"><img src="http://i39.servimg.com/u/f39/18/36/42/68/preil_10.png" width="24" height="43" alt="Arrow Prev"></a>
                <a href="#" class="next"><img src="http://i39.servimg.com/u/f39/18/36/42/68/preil_11.png" width="24" height="43" alt="Arrow Next"></a>
             </div>

          </div>
       </div>
    </body>
    </html>

lg
silber
silberling
silberling
Meister
Meister

Männlich Beiträge : 277
Anmeldedatum : 02.02.13
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von Raylan Mo 19 Aug 2013 - 11:41

Hi, also ich hab mir das gerade mal angeschaut und festgestellt, dass du viele unterschiedliche Weiten verwendest also in deinem protalcode steht:

<td width="895px">

während die Bilder im Slyder haben:
<img src="https://2img.net/r/ihimizer/img545/127/o0vw.png" width="870" height="270">

zuguterletzt in dem Css code für den slydes container:
width:870px;

du müsstest also die Weiten der Bilder und die des Containers auf deine Forenbreite oder tabellenbreite Anpassen.....

so also ich hab mal deinen Iframe und den normalcode untereinander geschoben.
Das willst du als endresultat haben: (oben der jetzige iframe zustand unten der slyder nach deinem code mit von mir abgeändertem css & html)
[phpBB2] Sliderbilder vollflächig darstellen lassen? Resultat_zps05abe349

was habe ich gemacht? ich habe einfach in deinem css code sämtliche breiten auf deine laut tabelle um das Iframe gewünschten 895px gebracht:

Code:
/*
      Resets defualt browser settings
      reset.css
    */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
    :focus { outline:0; }
    a:active { outline:none; }
    body { line-height:1; color:black; background:white; }
    ol,ul { list-style:none; }
    table { border-collapse:separate; border-spacing:0; }
    caption,th,td { text-align:left; font-weight:normal; }
    blockquote:before,blockquote:after,q:before,q:after { content:""; }
    blockquote,q { quotes:"" ""; }

    /*
      Page style
    */

    body {
            background-color: transparent;
      font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
      letter-spacing:0;
      color:#434343;
      top center;
      position:relative;
      text-shadow:0 1px 0 rgba(255,255,255,.8);
      -webkit-font-smoothing: subpixel-antialiased;
    }

    #container {
      width:895px;
      padding:0px;
      position:relative;
      z-index:0;
    }

    #example {
      width:895px;
      height:350px;
      position:relative;
    }

    #frame {
      position:absolute;
      z-index:0;
      width:1039px;
      height:341px;
      top:-3px;
      left:-80px;
    }

    /*
      Slideshow
    */

    #slides {
      position:absolute;
      top:15px;
      left:0px;
      z-index:100;
    }

    /*
      Slides container
      Important:
      Set the width of your slides container
      Set to display none, prevents content flash
    */

    .slides_container {
      width:895px;
      overflow:hidden;
      position:relative;
      display:none;
 border:1px solid #000000;
    }

    /*
      Each slide
      Important:
      Set the width of your slides
      If height not specified height will be set by the slide content
      Set to display block
    */

    .slides_container a {
      width:895px;
      height:270px;
      display:block;
    }

    .slides_container a img {
      display:block;
    }

    /*
      Next/prev buttons
    */

    #slides .next,#slides .prev {
      position:absolute;
      top:115px;
      left:5px;
      width:24px;
      height:43px;
      display:block;
      z-index:101;
    }

    #slides .next {
      left:842px;
    }

    /*
      Pagination
    */
 
.pagination {
       margin:-16px auto 0;
       width:65px;
   position: absolute;
   z-index: 102;
   right: 400px;
    }

    .pagination li {
      float:left;
      margin:0px;
      list-style:none;
    }

    .pagination li a {
      display:block;
      width:12px;
      height:0;
      padding-top:12px;
      background-image:url("http://i39.servimg.com/u/f39/18/36/42/68/pagina12.png");
      background-position:0 0;
      float:left;
      overflow:hidden;
    }

    .pagination li.current a {
      background-position:0 -12px;
    }

    /*
      Footer
    */

    #footer {
      text-align:center;
      width:895px;
      margin-top:9px;
      padding:0px 0 18px;
      border-top:1px solid #dfdfdf;
    }

    #footer p {
      margin:0px 0;
      font-size:1.0em;
    }

    /*
      Anchors
    */

    a:link,a:visited {
      color:#599100;
      text-decoration:none;
    }

    a:hover,a:active {
      color:#599100;
      text-decoration:underline;
    }
allerdings hast du ja auch bilder verwendet, die du ebenfalls mit anderen Breiten als der gewünschten betitelt hattest, deshalb die änderung im Html:

Code:
<a title="BILDTITEL" target="_blank"><img src="http://img545.imageshack.us/img545/127/o0vw.png" width="895px" height="278px"></a>
              <a title="BILDTITEL" target="_blank"><img src="http://img23.imageshack.us/img23/7359/s53k.png" width="895px" height="278px"></a>
              <a title="BILDTITEL" target="_blank"><img src="http://img694.imageshack.us/img694/8060/k677.png" width="895px" height="278px"></a>
            <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="http://img534.imageshack.us/img534/3315/n8it.png" width="895px" height="278px"></a>
Danach hatte ich noch das problem dass einige margins und paddings das ganze etwas nach rechts verschoben hatten, aber auch das hab ich mit dem oben eingestellten CSS schon behoben.
Das alles musst du jetzt mal abändern auf die html seite des iframes einfügen. Mal schauen was passiert. (ich hoffe ja es funktioniert^^)

Zu guter letzt hat dein Iframe code noch Fehler. Du öffnest und schließt wahllos center und deine Tabelle hat nur einen Anfang kein Ende.
Spoiler:
(der Iframe Code korrigiert und mit abgeänderter Breite)

GlG Ray Very Happy
Raylan
Raylan
Geselle
Geselle

Weiblich Beiträge : 77
Anmeldedatum : 06.11.12
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von silberling Mo 19 Aug 2013 - 12:15

habe den slider abgeändert und er funktioniert auch fast. derzeit scheint es so wie ein border oder etwas anderes ca. 1-2px um das bild noch geht, da die bilder nicht komplett an den rang gelangen?

der jetzige code:
Code:
<!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8">
      <style type="text/css">
    
     /*
       Resets defualt browser settings
       reset.css
    */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
    :focus { outline:0; }
    a:active { outline:none; }
    body { line-height:1; color:black; background:white; }
    ol,ul { list-style:none; }
    table { border-collapse:separate; border-spacing:0; }
    caption,th,td { text-align:left; font-weight:normal; }
    blockquote:before,blockquote:after,q:before,q:after { content:""; }
    blockquote,q { quotes:"" ""; }

    /*
       Page style
    */

    body {
            background-color: transparent;
       font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
       letter-spacing:0;
       color:#434343;
       top center;
       position:relative;
       text-shadow:0 1px 0 rgba(255,255,255,.8);
       -webkit-font-smoothing: subpixel-antialiased;
    }

    #container {
       width:895px;
       padding:0px;
       position:relative;
       z-index:0;
    }

    #example {
       width:895px;
       height:350px;
       position:relative;
    }

    #frame {
       position:absolute;
       z-index:0;
       width:1039px;
       height:341px;
       top:-3px;
       left:-80px;
    }

    /*
       Slideshow
    */

    #slides {
       position:absolute;
       top:0px;
       left:0px;
       z-index:100;
    }

    /*
       Slides container
       Important:
       Set the width of your slides container
       Set to display none, prevents content flash
    */

    .slides_container {
       width:895px;
       overflow:hidden;
       position:relative;
       display:none;
 border:1px solid #000000;
    }

    /*
       Each slide
       Important:
       Set the width of your slides
       If height not specified height will be set by the slide content
       Set to display block
    */

    .slides_container a {
       width:895px;
       height:304px;
       display:block;
    }

    .slides_container a img {
       display:block;
    }

    /*
       Next/prev buttons
    */

    #slides .next,#slides .prev {
       position:absolute;
       top:115px;
       left:5px;
       width:24px;
       height:43px;
       display:block;
       z-index:101;
    }

    #slides .next {
       left:842px;
    }

    /*
       Pagination
    */

    .pagination {
       margin:-30px auto 0;
       width:65px;
   position: absolute;
   z-index: 102;
   right: 410px;
    }

    .pagination li {
       float:left;
       margin:0px;
       list-style:none;
    }

    .pagination li a {
       display:block;
       width:12px;
       height:0;
       padding-top:12px;
       background-image:url("http://i39.servimg.com/u/f39/18/36/42/68/pagina12.png");
       background-position:0 0;
       float:left;
       overflow:hidden;
    }

    .pagination li.current a {
       background-position:0 -12px;
    }

    /*
       Footer
    */

    #footer {
       text-align:center;
       width:895px;
       margin-top:9px;
       padding:4.5px 0 18px;
       border-top:1px solid #dfdfdf;
    }

    #footer p {
       margin:0px 0;
       font-size:1.0em;
    }

    /*
       Anchors
    */

    a:link,a:visited {
       color:#599100;
       text-decoration:none;
    }

    a:hover,a:active {
       color:#599100;
       text-decoration:underline;
    }
    
   </style>
   
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
       <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script type="text/javascript">
    
   (function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)
    
     </script>
       <script>
          $(function(){
             $('#slides').slides({
                preload: true,
                preloadImage: 'http://i43.servimg.com/u/f43/17/63/75/60/loadin10.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true
             });
          });
       </script>
    </head>
    <body>
       <div id="container">
          <div id="example">
             <div id="slides">
                <div class="slides_container">
                   <a title="BILDTITEL" target="_blank"><img src="http://img545.imageshack.us/img545/127/o0vw.png" width="895" height="304"></a>
              <a title="BILDTITEL" target="_blank"><img src="http://img23.imageshack.us/img23/7359/s53k.png" width="895" height="304"></a>
              <a title="BILDTITEL" target="_blank"><img src="http://img694.imageshack.us/img694/8060/k677.png" width="895" height="304"></a>
             <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="http://img534.imageshack.us/img534/3315/n8it.png" width="895" height="304"></a>
                </div>
                <a href="#" class="prev"><img src="http://i39.servimg.com/u/f39/18/36/42/68/preil_10.png" width="24" height="43" alt="Arrow Prev"></a>
                <a href="#" class="next"><img src="http://i39.servimg.com/u/f39/18/36/42/68/preil_11.png" width="24" height="43" alt="Arrow Next"></a>
             </div>

          </div>
       </div>
    </body>
    </html>
silberling
silberling
Meister
Meister

Männlich Beiträge : 277
Anmeldedatum : 02.02.13
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von Raylan Mo 19 Aug 2013 - 12:17

Jap ich dachte du wolltest die Border also hab ich folgendes CSS so gelassen wie es ist:
Code:
.slides_container {
      width:895px;
      overflow:hidden;
      position:relative;
      display:none;
 border:1px solid #000000;
    }
du müsstest vermutlich einfach 1 durch 0 ersetzen Wink funktioniert es jetzt?
Raylan
Raylan
Geselle
Geselle

Weiblich Beiträge : 77
Anmeldedatum : 06.11.12
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von silberling Mo 19 Aug 2013 - 12:21

hmm da passiert nix?
silberling
silberling
Meister
Meister

Männlich Beiträge : 277
Anmeldedatum : 02.02.13
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von Raylan Mo 19 Aug 2013 - 12:28

Also bei mir wirds am pc zwar ohne rand angezeigt aber das ist vermutlich auch so ne sache.... vllt versuch mal bei der iframe tabelle den background rauszunehmen....
Code:
<table border="0"><tr><td width="895px">
<center><iframe src="http://test1000.forumieren.com/h5-slider-breiter-neu" width="895px" height="304px" frameborder="0" scrolling="no"></iframe></center>
</td></tr></table>
oder du setzt das iframe einfach mal ohne die tabelle ein
Code:
<center><iframe src="http://test1000.forumieren.com/h5-slider-breiter-neu" width="895px" height="304px" frameborder="0" scrolling="no"></iframe></center>
ich glaube nicht dass es am css liegt, vllt an einer foreneinstellung aber ich sehs mir schnell nochmal bei mir an^^

Edit: also ich würde vermutlich lösung zwei bevorzugen, einfach weil du die tabelle dann im grunde gar nicht brauchst. Der Rand verschwindet in meinem Forum wenn ich den Background rausnehme, allerdings kann man dann theoretisch auch gleich die tabelle weglassen Wink
Raylan
Raylan
Geselle
Geselle

Weiblich Beiträge : 77
Anmeldedatum : 06.11.12
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von silberling Mo 19 Aug 2013 - 12:38

an dem lag es. thx nochmal!

lg
silber
silberling
silberling
Meister
Meister

Männlich Beiträge : 277
Anmeldedatum : 02.02.13
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von Raylan Mo 19 Aug 2013 - 12:39

Bitte schön, wenn ich helfen konnte ^_^
Raylan
Raylan
Geselle
Geselle

Weiblich Beiträge : 77
Anmeldedatum : 06.11.12
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten