By fedo on

hi,
i am a newbie...i spent hours trying to center the slideshow but with no result.

here is the code from firebug

<!-- /.block -->
    <div id="block-views-doc-slider-block-1" class="block block-views contextual-links-region">
<div class="contextual-links-wrapper contextual-links-processed"></div>
<div class="content">
<div class="view view-doc-slider view-id-doc_slider view-display-id-block_1 view-dom-id-c523f4273d62d7fdb056cc05abb68294">
<div class="view-content"><div class="skin-default">
<div class="views-slideshow-controls-top clearfix">
<div id="views_slideshow_slide_counter_doc_slider-block_1" class="views-slideshow-slide-counter views_slideshow_slide_counter"></div></div>
<div id="views_slideshow_cycle_main_doc_slider-block_1" class="views_slideshow_cycle_main views_slideshow_main viewsSlideshowCycle-processed">
<div id="views_slideshow_cycle_teaser_section_doc_slider-block_1" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative; width: 600px; height: 792px;">
<div id="views_slideshow_cycle_div_doc_slider-block_1_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: 7; opacity: 1;">
<div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
<span class="views-field views-field-field-doc-image">
<span class="field-content doc_slider_style">
<img width="600" height="787" src="http://localhost/sites/default/files/styles/doc_slider/public/documents/%C6%92%C2%BFd%20%C6%92T%C2%BC%C2%AC%C6%92%C3%BF%20001.jpg?itok=ezVK62Xy"></img></span></span></div></div>
<div id="views_slideshow_cycle_div_doc_slider-block_1_1" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 6;"></div>
<div id="views_slideshow_cycle_div_doc_slider-block_1_2" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-3 views_slideshow_cycle_hidden views-row-odd" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5;"></div>
<div id="views_slideshow_cycle_div_doc_slider-block_1_3" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-4 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4;"></div>
<div id="views_slideshow_cycle_div_doc_slider-block_1_4" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-5 views_slideshow_cycle_hidden views-row-odd" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3;"></div>
<div id="views_slideshow_cycle_div_doc_slider-block_1_5" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-6 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2;"></div>
<div id="views_slideshow_cycle_div_doc_slider-block_1_6" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-7 views_slideshow_cycle_hidden views-row-odd" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1;"></div></div></div>
<div class="views-slideshow-controls-bottom clearfix"></div></div></div></div></div></div>
      <!-- /.block -->
⋅ Categories: Drupal 7.x

Comments

fedo’s picture

fedo commented

anybody.... plz i am desperate

mcfilms’s picture

mcfilms commented

It's so much easier if you can point to a live site. When people say "use firebug" they are really telling you to inspect the CSS with firebug, not so much the HTML.

If the width of the slideshow object is specified in the css, you can center it by adding this to your theme's stylesheet:

.view-doc-slider{
  margin:0 auto;
}

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

fedo’s picture

fedo commented

thanks for reply...
i am working on localhost, no webhosting yet...
i tried the code above but it didnt work

fedo’s picture

fedo commented

any ideas?!

gausarts’s picture

gausarts commented 
#block-views-doc-slider-block-1 {
  width: 960px; /*Ajust to expected width */
  float: none; /* just in case you do global float somewhere to .block */
  margin: 0 auto;
}

love, light n laughter

fedo’s picture

fedo commented

thanks for reply...
i put it in my theme's style.css but didnt work either

gausarts’s picture

gausarts commented

Maybe a screenshot will help. That will describe better what to achieve when surrounding elements or space may cause an issue. Or you can test via firebug what may have caused the issue.

love, light n laughter

mylocaltrades’s picture

mylocaltrades commented

#block-views-doc-slider-block-1 .view-doc-slider{
text-align: center;
}

Offering Drupal website services to the UK - www.my-local-trades.co.uk

fedo’s picture

fedo commented

thanks... this worked for the controls but not the image

carlos.menjivar’s picture

carlos.menjivar commented

Try This:

#block-views-doc-slider-block-1 .view-doc-slider{
    text-align: center;
}
#block-views-doc-slider-block-1 #views_slideshow_cycle_main_doc_slider-block_1{
    margin-left:auto;
    margin-right:auto
}
fedo’s picture

fedo commented

when i open the page the image appears centered but after a second it goes right...!!!
the controls stay centered

carlos.menjivar’s picture

carlos.menjivar commented

Well, that embedded style in each slide will take priority over the css:
style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4;

you could override it with jQuery

$(document).ready(function() {
   //remove current style
   $('.views-slideshow-cycle-main-frame-row').removeAttr("style");
   //Add new style
   //$('.views-slideshow-cycle-main-frame-row').attr("style",newValue);
 });
fedo’s picture

fedo commented

thank you very very much... it finally worked

dubs’s picture

dubs commented

This CSS works for me: -

.views-slideshow-cycle-main-frame { width:100% !important; text-align:center;}
.views-slideshow-cycle-main-frame-row { width:100%;}

No fiddly JS required...

mb7419’s picture

mb7419 commented

Thank you it really ended a pretty long & frustrating search