Views Slideshow Zentrieren
Eingetragen von ClaymanX (5)am 17.08.2013 - 18:17 Uhr in
Hallo zusammen, hab ein Problem mit meiner Views Slideshow.
Und zwar hab ich erfolgreich einen Block erstellt der auf der Startseite eine Slideshow darstellen soll. Das einzige Problem was ich habe ist das die Homepage komplett Zentriert ist und der Block in dem die Slideshow
zu sehen ist hat nicht wie die ganzen anderen Blocks eine feste Größe (zentriert in der mitte) sondern nimmt die gesamte weite des Bildschirms an.
Der fehler ist das die Slideshow am linken rand des Bildschirm ist, aber in die mitte soll.
Hier ein Bild der Seite mit der Slideshow
http://imageshack.us/photo/my-images/845/gjb.jpg
und hier noch die Block unterteilung
http://imageshack.us/photo/my-images/706/iame.jpg
Für einige Tipps wäre ich sehr dankbar.
- Anmelden oder Registrieren um Kommentare zu schreiben
Mit CSS
am 17.08.2013 - 19:08 Uhr
Moin,
das ist kein Fehler, sondern normales Verhalten des Browsers. Abhilfe schaffst Du ganz einfach, indem Du dem Block mittels CSS eine feste Breite zuweist und margin left und right auf auto stellst.
Also
<div class="name-deines-blocks">im Quelltext oder mit Firebug finden und dann in der .css des Themes:.name-deines-blocks { width: x00px; margin: 0 auto; }Für mich ist es ein fehler
am 17.08.2013 - 20:03 Uhr
Für mich ist es ein fehler :P
also hab mir das mal mit Firebug angeschaut und denk das ich den Block namen gefunden habe
die Zeile lautet.
also habe jetzt in der sites/all/themes/namedesthemes/css/style.css einfach am ende .block block-views contextual-links-region{ width: x00px; margin: 0 auto; } eingefügt und abgespeichert.
Hat sich aber nichts verändert.
Könnte hilfreich sein
<div id="views_slideshow_cycle_main_slideshow-block" class="views_slideshow_cycle_main views_slideshow_main viewsSlideshowCycle-processed"><div id="views_slideshow_cycle_teaser_section_slideshow-block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative; width: 1200px; height: 418px;">
<div id="views_slideshow_cycle_div_slideshow-block_0" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-1 views-row-odd" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;">
<div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
Hab diesen abschnitt in
am 17.08.2013 - 20:14 Uhr
Hab diesen abschnitt in meiner Style.css gefunden. War für den vorinstallierten Slider der auch schön in der mitte war, er hat allerdings nicht die höhenveränderung angenommen die ich in den Image einstellungen eingestellt habe.
Könnte ich hier was für die höhe einstellen dann bräuchte ich den neuen Slider nicht.
/*==================== SLIDER =====================*/
#slider{
width: 1200px;
position: absolute;
;
}
#slider.loader{
background: #222222 url('../images/loader-d.gif') no-repeat center center;
height:60px;
}
.slides > li{
display: none;
-webkit-backface-visibility: hidden;
}
.slides img{
width: 100% !important;
max-width: 100%;
height: auto;
display: block;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
#slider .slides {zoom: 1;}
#slider .slides > li {position: relative;}
#slider .slides div{
position: absolute;
top: 43%;
left: 100px;
max-width: 400px;
}
#slider .slides h2{padding-bottom: 5px; }
#slider .slides h2 a{
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
text-shadow: 0 1px 1px #292929;
}
#slider .slides h2 a:hover{color: #E34B39;}
#slider .slides p{
color: #f2f2f2;
font-size: 15px;
font-family: 'Rokkitt', serif;
text-shadow: 0 1px 1px #292929;
}
.flex-direction-nav a{
text-indent: -9999px;
width: 44px !important;
height: 44px !important;
position: absolute;
top: 50%;
margin-top: -22px;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
.flex-direction-nav a.flex-prev{
left: -100px;
background: url('../images/slider-left-d.png') no-repeat;
}
.flex-direction-nav a.flex-next{
right: -100px;
background: url('../images/slider-right-d.png') no-repeat;
}
.flex-direction-nav a:hover{background-position: 0 -44px !important;}
#slider:hover .flex-direction-nav a,
.slider-blog:hover .flex-direction-nav a{display: block;}
Hab es geschafft die größe
am 18.08.2013 - 09:52 Uhr
Hab es geschafft die größe des Sliders zu ändern, die angaben waren in der
<?phpviews-view-fields--front-slider-block--block.tpl.php
?>