Page 1 of 1
centre widget and have a forecast one side and web cam image
Posted: Mon 03 Mar 2014 10:09 am
by ace2
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.....
Re: centre widget and have a forecast one side and web cam i
Posted: Mon 03 Mar 2014 12:49 pm
by ace2
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!!!!
Re: centre widget and have a forecast one side and web cam i
Posted: Mon 03 Mar 2014 1:26 pm
by beteljuice
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 -->
Re: centre widget and have a forecast one side and web cam i
Posted: Mon 03 Mar 2014 1:30 pm
by hills
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.
Re: centre widget and have a forecast one side and web cam i
Posted: Mon 03 Mar 2014 2:37 pm
by ace2
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!!!!!
Re: centre widget and have a forecast one side and web cam i
Posted: Mon 03 Mar 2014 4:03 pm
by beteljuice
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 ?
Re: centre widget and have a forecast one side and web cam i
Posted: Mon 03 Mar 2014 9:04 pm
by hills
Wow!! That looks great, well done!
Re: centre widget and have a forecast one side and web cam i
Posted: Tue 04 Mar 2014 12:25 am
by ace2
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
Re: centre widget and have a forecast one side and web cam i
Posted: Tue 19 Aug 2014 10:07 am
by ace2
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???
Re: centre widget and have a forecast one side and web cam i
Posted: Wed 20 Aug 2014 3:47 am
by beteljuice
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 ....
Re: centre widget and have a forecast one side and web cam i
Posted: Wed 20 Aug 2014 4:13 am
by ace2
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.....