Joomla Module Encroaching!

HTML & CSS
1

Hi all,

http://joomlatest.chrisbartlett.net/

See the “Yahoo! Weather” area on the left? I’m trying to figure out why it is encroaching on the main content area. The CSS specific to this module is:


.weather_sp1{padding:5px}

.weather_sp1_c{margin:0 0 10px}

.weather_sp1_cleft{float:left}

p.spw_current_temp{font-size:18px;margin:-30px 0 0 15px}

.weather_sp1_cright{float:left;margin:0 0 0 -44px}

p.weather_sp1_city{font-size:24px;line-height:24px;font-weight:700;margin:15px 0 0;padding:0}

.block_even,.block_odd{text-align:center}

span.weather_sp1_temp,span.weather_sp1_list_temp{font-size:10px}

.list_even,.list_odd{width:100%;border-top:1px dashed #e0e0e0}

span.weather_sp1_list_day,span.weather_sp1_list_temp,span.weather_sp1_list_icon{height:32px;line-height:32px;display:block;float:left;width:33%}

img.spw_icon_big{height:96px}

img.spw_icon{height:32px}

…Although there may be built-in Joomla CSS also involved.

I’ve tried a few things to no avail. This one’s beyond me. Can anyone help, please?

Thanks!

Chris

2

OK, I fixed the:

Lowell, MA
Cloudy
Wind: S at 6 mph

… being too far left. It was the -44px margin causing that problem.

Now, I’d like to center the upper icon (currently cloudy) and temperature. Help?

Thanks!

3

Try this in your CSS:

.weather_sp1_cleft {
  float: none !important;
  text-align: center;
}

Then you’ll just have to center the cloud in the image itself.

4

Center the cloud in the image itself???

AH! I just realized that the cloud itself isn’t centered. Good catch!

Well, nothing I can do about that, unfortunately as the image gets pulled via script from Yahoo.

OK, gonna have to rethink this.

5

If it’s always going to be the same cloud image, or if all images have the same size and off-center nature, you could move them a bit further right … but it sounds a bit messy.

6

Indeed. I suspect that all the images will have the same issue. The only thing I can think of is to find all those images on Yahoo somewhere, save them locally on my server, fix them, and rewrite the script to fetch my images.

But seeing as how a programmer/developer I am not, that probably won’t fly, either. LOL!

7

If the images all have about the same empty space on the right, you could try something like this:

.weather_sp1_cleft {
  float: none !important;
  text-align: center;
}

.weather_sp1_cleft img.spw_icon_big {
  [COLOR="#FF0000"]margin-right:-60px;[/COLOR]
}
8

That’s pretty good, yeah!

The only thing is that I’ll just have to wait until the script gras other images. No way i can force that. So I’ll watch it for a week or so and see how it holds up.

Very cool.