Help with CSS!

HTML & CSS
1

Hi everybody, this is my first post :slight_smile:

I have made a PHP Script:


<?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($ch0, CURLOPT_URL, $url0);
    curl_setopt($ch0, CURLOPT_HEADER, 0);
    curl_setopt($ch0, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch0, CURLOPT_FAILONERROR, TRUE);
    $geo = curl_exec($ch0);
    curl_close($ch0);
    if( preg_match('/City: (.*)\
IP:/', $geo, $matches) ){
        $results = $matches[1];
    }else{
        $results = 'getLocation failure';

    }

    $location = urlencode($results);
    $url1 = QUERY_1.$location;
    $ch1 = curl_init();
    curl_setopt($ch1, CURLOPT_URL, $url1);
    curl_setopt($ch1, CURLOPT_HEADER, 0);
    curl_setopt($ch1, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch1, CURLOPT_FAILONERROR, TRUE);
    $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:


<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:


<xml_api_reply version="1">
&#8722;
<weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
&#8722;
<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>
&#8722;
<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>
&#8722;
<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>
&#8722;
<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>
&#8722;
<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>
&#8722;
<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 :slight_smile:

2

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:

#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.

<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&#37; 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. :slight_smile:

3

Thanks, your example is great! I really appreciate you taking the time to help me :slight_smile:

4

No prob. :slight_smile: If you have more questions don’t hesitate to post again. :smiley: