CSS - Drupal - Center Align View/Block/div - Preview with Firebug 1

[kjv1611]

I feel silly asking these things, but for the CSS piece, I've ever so slightly tipped my toes into the waters of CSS, and so rarely and far between that I've not gained anything much useful to date.

The main issue is that I want a particular piece in a website to be centered, not the entire site. And my problem is I want to find where in the CSS code I can add an alignment argument (or whatever other argument I need) in order to center-align the section.

The secondary issue is that in using Firebug (which looks pretty straight-forward), I've yet to be able to find a way to get it to work... so I'm guessing I'm doing something wrong.

The site I'm referring to is an "in development" site which you can find here:

http://www.parkwoodbaptistchurch.us/d7dev

The part I want to center is the piece in the middle that rotates/flips images.

Right now that section is only images, but eventually, it could have some text as well, I've just not used any there so far.

I'm hoping I can use this as a learning experience with both CSS and Firebug for debugging/testing.

Here's the information behind the site and all:
1. Using Drupal 7 as the CMS to build the site
2. The div is generated by a Block which is part of a View (Drupal terms)
3. The visuals (theme) was designed by me in a program called Aristeer. (found at

http://www.artisteer.com)

- I really like it so far, and hoping to use it as a tool to further learn in this area... some day... as well.
4. From everything I can find online thus far, people suggest that the centering has to be done via CSS. I've tried editing the CSS in a few different suggested spots (theme's CSS and the Views Slideshow module's CSS). So far, nothing seems to change anything.

If anyone can help shed some light on any of the above. And sorry if it isn't clear enough. If you need more information, please let me know. If it's something more in your opinions to either Drupal or Artisteer, then perhaps I'll go the route of asking in their forums.

Thanks in advance for any help.

"But thanks be to God, which giveth us the victory through our Lord Jesus Christ." 1 Corinthians 15:57

 

[kjv1611]

Okay, with Firebug, I've been able to mess up that piece... I was able to get the flipping images to change from being basically in the middle of the site to the upper left of the site on top of other stuff.. definitely not what I wanted to do. But at least I could see a change this time.

So now I just need to find out how to center align that view....


"But thanks be to God, which giveth us the victory through our Lord Jesus Christ." 1 Corinthians 15:57

 

[Vragabond]

In CSS, you center by applying auto left and right margins to the block level element that you want centered. Read in more detail here:

http://www.maxdesign.com.au/articles/center/

For you, you would need to apply margin: 0 auto; (shorthand for automatic margins on left and right and 0 margin on top and bottom) to your #views_slideshow_cycle_teaser_section_frontpagegallery-block, although I fear this element is created by the script that creates the slideshow. Any way, you can try the Firebug to find the best element (or to create an extra element) to apply that styling to.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[kjv1611]

Thanks! I'll do some looking and trying with that later tonight or else in the next couple days.

I'll post back asap with results.

"But thanks be to God, which giveth us the victory through our Lord Jesus Christ." 1 Corinthians 15:57

 

[kjv1611]

Okay.. still haven't gotten to test with this, but I did at least glance at it.. hopefully tomorrow night.

"But thanks be to God, which giveth us the victory through our Lord Jesus Christ." 1 Corinthians 15:57

 

[kjv1611]

Well, so far, I did get to attempt a little, and did find a way to get it centered in FireBug, but couldn't find where to fix that in the actual website. I think you may be right about the script possibility, however. So only way to change that would be to modify the module that creates the slideshow, I suppose.

Thanks for your mentions so far. Hopefully I'll have more time later to dig into it. It isn't a total game breaker. Most people don't care or notice, it's just a personal thing.



"But thanks be to God, which giveth us the victory through our Lord Jesus Christ." 1 Corinthians 15:57

 

[spamjim]

The element is positioned by CSS, not the module. Tweak your theme, not the module.

 

[kjv1611]

Thanks... I'll try looking there... sometime soon, hopefully. I know it won't be tonight... or tomorrow.. maybe Friday evening or some time Saturday. But I will get to it soon, so I can post back ... thanks for the added bit of direction.

"But thanks be to God, which giveth us the victory through our Lord Jesus Christ." 1 Corinthians 15:57