centre widget and have a forecast one side and web cam image

ace2 · Post by **ace2** » Mon 03 Mar 2014 10:09 am

I'm trying to put on one line, weather station current conditions on the left, 7 day forecast in the middle and clickble web cam image on the right.

I'll really stuck!!!!

this is the 7 day forecast widget reduced to suit users.on.net/~ace2/indextest2.htm

my end result i want to have is to look like this

the weather widget code is

Code: Select all

<style> 
.sbTable { text-align: center;background-color: #678090; } 
.sbLoc1 { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold;text-transform: uppercase; color: #ffffff; } 
.sbLoc2 { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold; text-transform: uppercase;color: #ffffff; } 
.sbDay { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold;color: #ffffff; } 
.sbTemp { font-family:verdana;font-size:7pt; color: #ffffff; } 
.sbIcon { width:30px; height:30px; } 
.sbLink { font-family: Verdana, Helvetica, sans-serif;font-size:7pt; font-weight: bold;text-transform: lowercase;  } 
</style>
 
<!-- BEGIN 7 DAY HORIZONTAL WIDGET (don't forget the style sheet!) --> 

<div style=width:10% ;border:left;'><script type="text/javascript">var sbLoc=282;var sbDays=7; document.write('<scr'+'ipt src="'+document.location.protocol+'//'+( document.location.protocol.toLowerCase()=='https' ? 'secure' : 'www') + '.seabreeze.com.au/members/weather/shared/bar.aspx?loc='+sbLoc+'&days='+sbDays+'&icons=0"></scr'+'ipt>');  </script></div> 
<br />

with my cam and cumulus current conditions as

Code: Select all

<a href="cam.htm"><img src="snapshot.jpg" alt="snapshot.jpg"width=21% align="right" /></a>
<img src="images/icons/forecast_<#IsFreezing>_<#isdaylight>_<#forecastnumber>.png" alt="Current forecast icon" title="<#forecast>" />
<p>Forecast: <#forecast></p>

Also wanted a piece of text under web cam image saying clickable link,,

If some one can work this out for me, great.....

ace2 · Post by **ace2** » Mon 03 Mar 2014 12:49 pm

I even tried to put it into a table

Code: Select all

<style> 
.sbTable { text-align: center;background-color: #678090; } 
.sbLoc1 { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold;text-transform: uppercase; color: #ffffff; } 
.sbLoc2 { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold; text-transform: uppercase;color: #ffffff; } 
.sbDay { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold;color: #ffffff; } 
.sbTemp { font-family:verdana;font-size:7pt; color: #ffffff; } 
.sbIcon { width:30px; height:30px; } 
.sbLink { font-family: Verdana, Helvetica, sans-serif;font-size:7pt; font-weight: bold;text-transform: lowercase;  } 
</style>

<table>

<tr>
<td><img src="images/icons/forecast_0_0_1.png" alt="Current forecast icon" title="Settled fine" ></td>

<td><div style='width:50%;border:none;'><script type="text/javascript">var sbLoc=282;var sbDays=7; document.write('<scr'+'ipt src="'+document.location.protocol+'//'+( document.location.protocol.toLowerCase()=='https' ? 'secure' : 'www') + '.seabreeze.com.au/members/weather/shared/bar.aspx?loc='+sbLoc+'&days='+sbDays+'&icons=0"></scr'+'ipt>');  </script></div></td>
<td><a href="cam.htm"><img src="snapshot.jpg" alt="snapshot.jpg"width=21% align="right" /></a> </td>
</tr>
<tr>
</table>

but it just wont centre the widget at all..(and text missing from current forecast)plus screws the formatting up below...

I'm sure someones got the answer!!!!

beteljuice · Post by **beteljuice** » Mon 03 Mar 2014 1:26 pm

Try:

Code: Select all

<!-- PUT THIS IN THE <head> SECTION -->
<style type="text/css"> 
.sbTable { text-align: center;background-color: #678090; height: 120px; width: 100%; } /* modified */
.sbLoc1 { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold;text-transform: uppercase; color: #ffffff; } 
.sbLoc2 { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold; text-transform: uppercase;color: #ffffff; } 
.sbDay { font-family: Verdana, Helvetica, sans-serif;font-size:9pt; font-weight: bold;color: #ffffff; } 
.sbTemp { font-family:verdana;font-size:7pt; color: #ffffff; } 
.sbIcon { width:30px; height:30px; } 
.sbLink { font-family: Verdana, Helvetica, sans-serif;font-size:7pt; font-weight: bold;text-transform: lowercase;  } 
</style>
<!-- END head -->



<!-- forecast / widget / cam container (everything sized to forecast icon) -->
<div style="width: 100%;">
<table style="border-collapse: collapse; width: 100%;" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="padding: 0px; width: 120px;">
                <img style="width: 120px;" src="images/icons/forecast_<#IsFreezing>_<#isdaylight>_<#forecastnumber>.png" alt="Current forecast <#forecast>" title="Current forecast <#forecast>" />
            </td>
            <td style="padding: 0px;">
<script type="text/javascript">var sbLoc=282;var sbDays=7; document.write('<scr'+'ipt src="'+document.location.protocol+'//'+( document.location.protocol.toLowerCase()=='https' ? 'secure' : 'www') + '.seabreeze.com.au/members/weather/shared/bar.aspx?loc='+sbLoc+'&days='+sbDays+'&icons=0"></scr'+'ipt>');  </script>
            </td>
            <td style="width: 212px; padding: 0px;">
                <a href="cam.htm"><img style="height: 120px;" src="http://users.on.net/~ace2/snapshot.jpg" alt="Click for WebCam" title="Click for WebCam" /></a>
            </td>
        </tr>
    </tbody>
</table>
</div>
<!-- END forecast / widget / cam container -->

hills · Post by **hills** » Mon 03 Mar 2014 1:30 pm

hmmm.. I put that forecast into mine back in 2011 and I can remember it being a pain to get it how it is on my page, let alone trying to put it between a webcam and the other forecast. You're welcome to view my page source if that helps at all. From memory I also had to make changes to the .css file as well.

ace2 · Post by **ace2** » Mon 03 Mar 2014 2:37 pm

beteljuice wrote:try :

Your a legend Beteljuice.......

Also perfect but will do...

only 2 thing not right, forecast text missing and on reduce of window in IE, the whole line(pict x2 and widget) is over the page(extends past border), might be my IE(IE is shit anyway)

is it all possible to have text under the web cam image that say 'click picture to view)

I know i'm asking too much, But i'm almost bald, i can't afford to lose any more hair!!!!!

beteljuice · Post by **beteljuice** » Mon 03 Mar 2014 4:03 pm

ace2 wrote:... forecast text missing and on reduce of window in IE, the whole line(pict x2 and widget) is over the page(extends past border)

I deliberately left it 'clean' - forecast and webcam click instruction are on mouse-over.
Should you wish to ruin change it then in the appropriate <td> section(s) simply add
<br />blah blah blah

The line will break off the page with ANY browser if you reduce the page width enough !
It should resize 'down' to a more than acceptable width ?

hills · Post by **hills** » Mon 03 Mar 2014 9:04 pm

Wow!! That looks great, well done!

ace2 · Post by **ace2** » Tue 04 Mar 2014 12:25 am

I'm very happy with the results..

No way i could have done that!!!!!

my coding is very limited/basic

.................

so a big thank you to beteljuice

ace2 · Post by **ace2** » Tue 19 Aug 2014 10:07 am

Sorry to re open this one, but I can't figure out this problem, I've updated all my pages to HTML 5 and although this forecast container works fine, I've noticed the image from the web cam is 1 or 2 pixels below the forecast widget
After some testing, it seems to be the change to HTML 5 <head>, it's only effected if I change the head and meta to suit HTML 5.
Adjusting the size of image still doesn't solve it as it doesn't seem level with the rest...

Any ideas???

beteljuice · Post by **beteljuice** » Wed 20 Aug 2014 3:47 am

It seems to be the sbTable no longer fully honouring the nested border collapses,

In the CSS for sbTable try adding ..
margin-top: -3px;

Don't know why that value, and it's strange fiddle, but it works in FireFox ....

ace2 · Post by **ace2** » Wed 20 Aug 2014 4:13 am

beteljuice wrote:It seems to be the sbTable no longer fully honouring the nested border collapses,

In the CSS for sbTable try adding ..
margin-top: -3px;

Don't know why that value, and it's strange fiddle, but it works in FireFox ....

Perfect, i don't know why I didn't try that.

So once again thank you so much for your briliant work.....

Cumulus Support

centre widget and have a forecast one side and web cam image

centre widget and have a forecast one side and web cam image

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i

Re: centre widget and have a forecast one side and web cam i