View Full Version : Css layout for Google Weather API

06-08-2010, 01:49 AM
Okay, I've been slaving on this for about 2 days now and am about to give up. I found a good resource on parsing google's weather data and pulling this onto my website using php. The problem I'm having is in organizing the data correctly, which seems to all be taking place in my css.

Here is a link to the current website and the horrible effect that I am currently getting.


This is the php, which includes the divs that I am to style using css...

echo '<div id="weather">';
foreach($xml->weather as $item) {
echo '<h4>Colfax, WA </h4>' ;
echo $item->current_conditions->condition['data'] . '<br/>';
echo '<div id="currentimg">' ;
echo '<img src="http://www.google.com/' .$item->current_conditions->icon['data'] . '"/> <br/>';
echo '</div>';

echo '<div="weatherdata">';
echo 'Temp: ' . $item->current_conditions-> temp_f['data'] . 'F/' . $item->current_conditions->temp_c['data'] . 'C<br/>';
echo $item->current_conditions-> humidity['data'] . '<br/>';
echo $item->current_conditions-> wind_condition['data'];
echo '</div>';

foreach($item->forecast_conditions as $new) {

echo '<div class="weatherIcon">';
echo '<img src="http://www.google.com/' .$new->icon['data'] . '"/><br/>';
echo $new->day_of_week['data'];
echo '</div>';


echo '</div>';

And here is the portion of CSS that I'm using to organize the whole mess...

#weather { width: 135px; height: 150px; background-image: url(../images/weather.png); margin: 0; padding: 20px; color:white; }
#weather h4 {text-align: center; padding:0; margin-bottom:2px; margin-top: 0; }
#currentimg { width: auto; height: auto; }
#weatherdata { width: auto; height: auto; padding: 0;}
#weathericon { float: left; width: auto; height: auto; padding: 0; margin:0;}

I've included an image of what I would like the finished weather div to look like, if it is at all possible. I'm also noticing that once I include the php code into my sidebar div, everything below the weather div seems to lose the parent properties of the sidebar (ie the links section on the page).

This is my second attempt at ever creating a website, so feel free to humor my lack of logic/experience in what I'm trying to achieve. ANY help would be greatly appreciated.

06-08-2010, 09:44 AM
</div><div id="weather"><h4>Colfax, WA </h4><div id="currentimg"><img src="http://www.google.com//ig/images/weather/sunny.gif"/> <br/></div><div="weatherdata">Temp: 53F/12C<br/>Humidity: 66%<br/>Wind: S at 2 mph</div><div class="weatherIcon">Tue<br/><img src="http://www.google.com//ig/images/weather/partly_cloudy.gif</div><div class="weatherIcon">Wed<br/><img src="http://www.google.com//ig/images/weather/chance_of_storm.gif</div><div class="weatherIcon">Thu<br/><img src="http://www.google.com//ig/images/weather/chance_of_storm.gif</div><div class="weatherIcon">Fri<br/><img src="http://www.google.com//ig/images/weather/rain.gif</div>

<div id="links">
There are some error in your markup and the #weather div is not properly wrapped by the #sidebar. See http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcolfaxgrangecom.sites.qwestoffice.net%2Fpublic_html%2Findex.php

06-08-2010, 07:43 PM
Thank you. I have corrected the errors and successfully integrated the links section into the sidebar. However, I am still unable to achieve the desired effect for the weather section. I would like the weather data to sit next to the "current weather" image, and the forecast weather to align in a straight line at the bottom of the weather section. How could I make this happen??

06-08-2010, 09:03 PM
I ended up getting close to the desired effect using floats. If anyone is looking to add weather to their site without ads or third party messages feel free to use this.