[SOLVED] bar1 images filling problem
 

Hi,
I've tried different things from the forum, but nothing works. Maybe it's because there are multiple images?
I googled found something about div's, but it pushed my body and right/left sidebars up under my %page.
My screen looks great, on other screens sizes not so good.
I set min and max playing around subtracted 70px padding times2=140 from the number to see if it helped. So tired, don't really want to pull out any more hair :(. here is my <a href="http://www.vintagepreciousboutique.com>boutique</a> Thanks.

take a deep breath, grab a glass of wine and relax. Now try and explain what you are trying to do. I don't understand what Bar1 Images filling is. Are you trying to put images in the menubar1?

LOL, I just may do that, though I don't drink, this stuff kinda makes you want to I may have some cooking wine ;).

I have 5 images in my %bar1 area I inserted them from bfa_header_config.php between $horizontal_bar1 = '<div class="horbar1"> and ;</div>';
}
as instructed on another thread.

My screen pixels must be 1098px because 5 images @ a width of 220+219+220+219+220=1098 and looks good on my screen, however other screen sizes on the right side there is empty space.
I tried playing with max and min px from other threads and took off for 70px padding on each side @140. After some google websearh I read about inserting some div tags gave it a try and my body portion went under my page menu bar so of course I deleted them. When I expand the image sizes bigger when setting the max pixels @1440 to equal 1440px width total the 5th image moves to the far left on top of the body like a 2nd row.

Thanks. :)

You could set pyour page width to a FIXED size. Then if seen on smalled screens, they would have to scroll.

What effect do you want on a smaller screen?

Hi,
I didn't want to make anyone scroll was concerned about making potential customers work at seeing all available product. I viewed alot of boutique/clothing sites to see what was usuall and found they had a padded look & was hoping to do the same. I also hoped for a grid view for my product at 3 columns across.
I set it fixed at 990px and hated to remove the padding, but did then I changed the 5 images to 198ea and that 5th pic is doing a second row again. I left it that way so it can be viewed now.

Is there maybe a way to calulate the correct image widths for a fluid with set to max and min numbers, forcing maybe the 5 images fluid? What if it's possible to insert something a border around all 5 images to force them to stay inside, it's okay if some on right and left get slightly cut off I'd rather that happen then not fill the space nicely. Only I don't know the code, my div try if that even applies in this case was a disaster as I probably didn't have it right. :o
Thank you so much for helping me! :) :) :)

Did you think about using the new widget areas instead of the bar. Define 5 cells in the header with this
Then add a text widget to each area. In the text part add the code you currently have adding a 'class=full' so the image will resize
Try this and see if it does what you want.

Hi,
I put it to fluid @ 99%
63px padding to get the pictures to strech across the width on my screen. On other computers it makes two rows with the 5th picture making a 2nd row. On the good side it makes it in the header space instead of on top of the left side bar & body. Hmm. Now I understand more about what the widget I read about so much is ;). Maybe it's not possible? What about making one super large pic and let the sides cut off and doing an image map I read about on google, only I don't know how to code the widget's 1st line? So close yet so far away :confused: Thanks again. :)

Hi,
I found this http://www.smashingmagazine.com/2009...fluid-layouts/
#3 Images In A Fluid Layout, it's like rocket science to me, but maybe I can figure something out with my barely basic knowlege of this stuff. :o

okay, I'm set @ 750px min on one computer that is 800px the 4th & 5th image make a second row. My computer looks perfect and on a larger one there is a space to the right. I give up on making it stretch I'd be happy with no scroll and one row of 5 images for min 750px anything below 750px view, big sigh, can't help it. going to make my images=no more than 750 though there will be a huge space on the right. sorry to go on and on, just talking to myself, lol.

1) did ou create teh new widget area?
2) did you add a text widgett to each area?
3) did you put the <a...> code in the text area of each of the 5 new widget areas?

Hi,
Yes, that is if I understand it correctly. Here it is:

%logo %bar1
<?php bfa_widget_area('name=My header Widgets&cells=5&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>
<a href="http://www.vintagepreciousboutique.com"><img src="http://vintagepreciousboutique.com/wp-content/uploads/2009/10/cominsoonb.gif" border="0" height="200" width="220" class="size-full"></a>
<a href="http://www.vintagepreciousboutique.com"><img src="http://vintagepreciousboutique.com/wp-content/uploads/2009/10/comingsoonp.gif" border="0" height="200" width="220" class="size-full"></a>
<a href="http://www.vintagepreciousboutique.com"><img src="http://vintagepreciousboutique.com/wp-content/uploads/2009/10/cominsoonb.gif" border="0" height="200" width="220" class="size-full"></a>
<a href="http://www.vintagepreciousboutique.com"><img src="http://vintagepreciousboutique.com/wp-content/uploads/2009/10/comingsoonp.gif" border="0" height="200" width="220" class="size-full"></a>
<a href="http://www.vintagepreciousboutique.com"><img src="http://vintagepreciousboutique.com/wp-content/uploads/2009/10/cominsoonb.gif" border="0" height="200" width="220" class="size-full"></a>
%bar2 %pages

Just to see if I didn't I tried adding the 1st part before each <a href and they made 5 rows so I figured the above the way I have it is maybe correct. :confused:
Thanks :)

If you put that all i the header area that is wrong.

1) put '<?php bfa_widget_area('name=My header Widgets&cells=5&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>' in the header with %logo and %bar1

2) view the site home page twice to make sure the widget areas are created

3) go to dashboard->appearances->Widgets - you should now see 5 new widget areas. Drag the 'text' widget onto each area.

4) in each text widget's text area (man that's a mouth full) put one of the

Oh My Gosh!!!!!
Beautiful!!!!!
I could cry tears of joy, I almost fell down the stairs!
Wow, it puts tiny padding to center the images and spread it across! Wow!
Thank you! Thank you! Thank you!!! :) :) :)
As soon as I'm able I'm giving a bigger donation then I had already in mind, yeah! :)
I feel like running a victory lap around the block!