Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css layout for Google Weather API

    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.

    http://colfaxgrangecom.sites.qwestof...html/index.php

    This is the php, which includes the divs that I am to style using css...
    Code:
    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>';
      getWeather();?>
    And here is the portion of CSS that I'm using to organize the whole mess...
    Code:
    #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.
    Attached Thumbnails Attached Thumbnails Css layout for Google Weather API-ideal.jpg  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    </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?verbos...ml%2Findex.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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??

  • #4
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •