I needed to switch this website to a fluid layout and I appear to be having problems. For some reason the gallery images are now pushed below my sidebars?
Also, how would I get the images to center rather then be aligned to the left?
Community Forums
About this topic
- Posted by triplemoons 1 year ago. There are 18 posts. The latest reply is from byron.
- This topic is
not resolved
-
-
I took a look at it, but wasn't able to figure out why it is doing that. I've never been very good at fluid designs, particularly with right and left columns, but hopefully there someone out here could help with the CSS.
BB
-
Usually it's a clear: both that's the problem, but I can't seem to find the culprit.
-
I found it...
<div class="photosmash_gallery"><form><input type="hidden" id="_moderate_nonce" name="_moderate_nonce" value="888dd56e25" /></form><div class='bwbps_gallery_div' id='bwbps_galcont_178'><span class='bwbps-rating-toggle'><a href='void(0);' title='Toggle image ratings'>Toggle ratings</a></span><div style='clear: both; margin: 0; padding: 0;'></div>See the random <div> that is wrapped around nothing? That's it. It's located in bwbps-layout.php.
Now just need to find where that clear is that's affecting the height of that box...
What about getting those thumbnails centered?
-
Answer to other clear problem is editing the css...
div.bwbps_pagination{
clear: both; <--- REMOVE THIS
margin: 5px auto;
text-align: center;
} -
I'll need to test that out. The reason it's there is that the Toggle Rating is floated right. Also, the pagination div might be used in paginations and need clearing...I'll need to test some of the other use cases.
BB
-
Ok well, it works flawless for me.
Still need some help getting those thumbnails centered...
-
In your case (this won't work for everyone because you only have 1 image per row), you could try:
.bwbps_gallery li {
width: 100%;
} -
No, that doesn't work right. That makes only one image per row appear. I need it to fit in the allotted space, but centered instead of all the way to the left.
-
Anyone else have any ideas?
-
Hey TM,
I was researching your problem and came across this tutorial for doing exactly what you're trying. I like the part in the title...'Slightly Trickier Than You Think'...no kidding! See if this does it for you:
http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/
BB
-
BTW, the genius part of that article is that it turns the DIV into a table:
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
} -
Thanks. I'll have to try this as soon as I get time. I'll let you know how I make out!
-
I couldn't figure out how to get this to work. I imagine it's because it requires the use of ids rather then classes...And the ids are used for something else in Photosmash. The most I got it to do was center single images.
-
So, I figured out it is working...If their is only one line of photos...
-
I'll take another look tonight...hmmm.
-
Anyone figure out a solution for this? I think it would be important to be built into the default gallery as I believe most of us desire that thumbnails be centered appropriately.
-
Hi TM,
I did some reading around the net on this recently and nobody had a way of making this work without tables. The trouble with tables...in your case...is that you want the # of images on the row to flex with the width of the screen.
All the suggestions I saw were trying to set the image widths, but that doesn't work in your case either.
If it's possible, it's way beyond me. But I'd love to know if you find a way...if the solution isn't to involved, I'd like to add it as a standard delivered Layout.
BB
