SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS!!!

    Hi everybody, this is my first post

    I have made a PHP Script:
    PHP Code:
    <?php

        define
    ('QUERY_0''http://api.hostip.info/get_html.php?ip=');
        
    define('QUERY_1''http://www.google.com/ig/api?weather=');

    function 
    getWeather() {
        
       if (!empty(
    $_SERVER['HTTP_CLIENT_IP']))
        {
            
    $ip $_SERVER['HTTP_CLIENT_IP'];
        } elseif (!empty(
    $_SERVER['HTTP_X_FORWARDED_FOR']))
        {
            
    $ip $_SERVER['HTTP_X_FORWARDED_FOR'];
        }
        else
        {
            
    $ip $_SERVER['REMOTE_ADDR'];
        }

        
    $url0 QUERY_0.$ip;
        
    $ch0 curl_init();
        
    curl_setopt($ch0CURLOPT_URL$url0);
        
    curl_setopt($ch0CURLOPT_HEADER0);
        
    curl_setopt($ch0CURLOPT_RETURNTRANSFERTRUE);
        
    curl_setopt($ch0CURLOPT_FAILONERRORTRUE);
        
    $geo curl_exec($ch0);
        
    curl_close($ch0);
        if( 
    preg_match('/City: (.*)\nIP:/'$geo$matches) ){
            
    $results $matches[1];
        }else{
            
    $results 'getLocation failure';

        }

        
    $location urlencode($results);
        
    $url1 QUERY_1.$location;
        
    $ch1 curl_init();
        
    curl_setopt($ch1CURLOPT_URL$url1);
        
    curl_setopt($ch1CURLOPT_HEADER0);
        
    curl_setopt($ch1CURLOPT_RETURNTRANSFERTRUE);
        
    curl_setopt($ch1CURLOPT_FAILONERRORTRUE);
        
    $weather curl_exec($ch1);
        
    curl_close($ch1);
        
    $xml = new SimplexmlElement($weather);
    echo 
    '<div id="weather">';
    foreach(
    $xml->weather as $item) {

            foreach(
    $item->forecast_information as $new) {
                echo 
    $new->city['data'];
                }

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

                echo 
    '<div class="weatherIcon">';
                echo 
    '<img src="http://www.google.com/' .$new->icon['data'] . '"/><br/>';
            echo 
    $new->condition['data'];
                echo 
    $new->temp_f['data'];
                echo 
    $new->temp_c['data'];
                echo 
    $new->humidity['data'];
                echo 
    $new->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 
    $new->condition['data'];
                echo 
    $new->low['data'];
                echo 
    $new->high['data'];
                echo 
    '</div>';
                }

        }

    echo 
    '</div>';
    }

    getWeather();

    ?>
    This script returns the output below:
    HTML Code:
    <div id="weather">St John's, NL<div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/cloudy.gif"/><br/>Cloudy320Humidity: 87%Wind: W at 22 mph</div><div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/rain_snow.gif"/><br/>TueRain and Snow3032</div><div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/snow.gif"/><br/>WedSnow Showers3235</div><div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/rain_snow.gif"/><br/>ThuRain and Snow3035</div><div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/snow.gif"/><br/>FriSnow Showers2932</div></div>
    This is what it looks like:


    and here is what the actual XML looks like:
    Code:
    <xml_api_reply version="1">
    −
    <weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
    −
    <forecast_information>
    <city data="St John's, NL"/>
    <postal_code data="ST. JOHN'S, NL"/>
    <latitude_e6 data=""/>
    <longitude_e6 data=""/>
    <forecast_date data="2010-02-16"/>
    <current_date_time data="2010-02-16 23:26:51 +0000"/>
    <unit_system data="US"/>
    </forecast_information>
    −
    <current_conditions>
    <condition data="Cloudy"/>
    <temp_f data="32"/>
    <temp_c data="0"/>
    <humidity data="Humidity: 87%"/>
    <icon data="/ig/images/weather/cloudy.gif"/>
    <wind_condition data="Wind: NW at 18 mph"/>
    </current_conditions>
    −
    <forecast_conditions>
    <day_of_week data="Tue"/>
    <low data="30"/>
    <high data="32"/>
    <icon data="/ig/images/weather/rain_snow.gif"/>
    <condition data="Rain and Snow"/>
    </forecast_conditions>
    −
    <forecast_conditions>
    <day_of_week data="Wed"/>
    <low data="32"/>
    <high data="35"/>
    <icon data="/ig/images/weather/snow.gif"/>
    <condition data="Snow Showers"/>
    </forecast_conditions>
    −
    <forecast_conditions>
    <day_of_week data="Thu"/>
    <low data="30"/>
    <high data="35"/>
    <icon data="/ig/images/weather/rain_snow.gif"/>
    <condition data="Rain and Snow"/>
    </forecast_conditions>
    −
    <forecast_conditions>
    <day_of_week data="Fri"/>
    <low data="29"/>
    <high data="32"/>
    <icon data="/ig/images/weather/snow.gif"/>
    <condition data="Snow Showers"/>
    </forecast_conditions>
    </weather>
    </xml_api_reply>
    What I'm trying to achieve is pictured ^above^. I figure CSS is the best way to go about it but I don't know much about CSS. I'm kind of a noob to web design. Any examples would be greatly appreciated. I hope you all find this script useful

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Your gonna need to add some more elements/classes/formatting to that if you want to get the way it looks in your image exactly.

    Rough draft:
    Code CSS:
    #weather{
    	width:140px;
    	font-size:.8em;
    	background:#deffcb;
    	border-width:1px 1px 0 1px;
    	border-style:solid;
    	border-color:#ccc;
    }
    .weatherIcon{
    	border-bottom:1px solid #ccc;
    	padding:10px 5px;
    	overflow:hidden;
    }
    .weatherIcon img{
    	float:right;
    }
    I added some spaces and & deg ; (no spaces) for the degree symbol and some /'s, removed the <br /> tags, added another <div class="weatherIcon">St John's, NL</div> around the title part.
    Code HTML4Strict:
    <div id="weather">
      <div class="weatherIcon">St John's, NL</div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/cloudy.gif"/>
       Cloudy 32&deg; Humidity:87% Wind:W at 22mph
    </div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/rain_snow.gif"/>
       Tue:Rain and Snow 30/32&deg;
    </div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/snow.gif"/>
       Wed: Snow Showers 32/35&deg;
    </div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/rain_snow.gif"/>
       Thu: Rain and Snow 30/35&deg;
    </div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/snow.gif"/>
       Fri: Snow Showers 29/32&deg;
    </div>
    </div>
    Hope it helps.

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BPartch View Post
    Your gonna need to add some more elements/classes/formatting to that if you want to get the way it looks in your image exactly.

    Rough draft:
    Code CSS:
    #weather{
    	width:140px;
    	font-size:.8em;
    	background:#deffcb;
    	border-width:1px 1px 0 1px;
    	border-style:solid;
    	border-color:#ccc;
    }
    .weatherIcon{
    	border-bottom:1px solid #ccc;
    	padding:10px 5px;
    	overflow:hidden;
    }
    .weatherIcon img{
    	float:right;
    }
    I added some spaces and & deg ; (no spaces) for the degree symbol and some /'s, removed the <br /> tags, added another <div class="weatherIcon">St John's, NL</div> around the title part.
    Code HTML4Strict:
    <div id="weather">
      <div class="weatherIcon">St John's, NL</div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/cloudy.gif"/>
       Cloudy 32&deg; Humidity:87% Wind:W at 22mph
    </div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/rain_snow.gif"/>
       Tue:Rain and Snow 30/32&deg;
    </div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/snow.gif"/>
       Wed: Snow Showers 32/35&deg;
    </div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/rain_snow.gif"/>
       Thu: Rain and Snow 30/35&deg;
    </div>
    <div class="weatherIcon">
     <img src="http://www.google.com//ig/images/weather/snow.gif"/>
       Fri: Snow Showers 29/32&deg;
    </div>
    </div>
    Hope it helps.
    Thanks, your example is great! I really appreciate you taking the time to help me

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by o0110o View Post
    Thanks, your example is great! I really appreciate you taking the time to help me
    No prob. If you have more questions don't hesitate to post again.


Bookmarks

Posting Permissions

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