Templates and Projects support > Php templates

New Moon Phase Images for WB2_2b

<< < (2/5) > >>

Andy9164:
Hi Steve,
Believe it or not in my "Lots of Moons" folder on my pc I just happen to have them 0 to 100 and -0 to -100.

I only did these recently for someone on the Cumulus form and I was totally unaware that this was the easiest way to do it. I always used the moonphae and the percentatgeAbs tags. I ended up with more than 200 images originally as sometimes you would get FullMoon99, FullMoon100 etc so had to make copies and rename them. I wish I new about the <#moonpercent> before. But we live and learn. :)

So these are 100px  x 100px. Hopefully they will do what you need. If not give me a shout and I will see what I can do.


Not thinking of going to CumulusMX? I ditched my old laptop, bought a PI went to MX some time ago. There were some changes to be made in some of the files due to the new formatting rules but once I got that sorted its all good. I dont think there is any further development on Cumulus1 anymore. BTW if you go to MX you dont need the moon icons as I mentioned earlier..

Also got rid of my old Maplin (FineOffset) weather station and upgraded to one of the new Ecowitt models. Found it to be so more accurate.

If you need any help let me know.

Have fun.

Andy

Steve Bannister:
Hi andy,

Thanks for those, they work perfectly! I just resized them to 135x135 to fit the panel and they look great.

I thought I read that MX was for Windows 8 and above, and the school has Windows 7, but the Cumulus 1 works fine for what we need.

I'm just trying to write a couple of new pages for the template, which is taking me ages. I've copied the index page as a template and I'm adapting them for a 'Wind' page and a 'Night Sky' page. What's bugging me at the moment is the rounded edge image at the bottom (cont_bot) which has jumped to the left. Plus, I've made a larger panel for a Earth and Moon phase image, but I can't get it to appear, I've added it to the style.css sheet to know what I'm talking about, the image is in the right folder, but it just won't appear. Any ideas with PHP?

Have a look and you'll see what I mean;

http://www.eatonbrayweather.co.uk/nightsky.php

http://www.eatonbrayweather.co.uk/wind.php

Steve

Andy9164:
Hi Steve,
I think you have too many </DIV>'s under where it says "Moon Visible at" on Line 209. My comments in brackets

On the original WB2 index page it has:

</div> (his closes the DIV "pan night")
            </div> (this closes the DIV "right_h")
            <div style="clear: both"></div>
         </div> (this closes the DIV "razd_lr_h")
      </div> (this closes the div "content")

In your page you have the same but you dont have a DIV  "razd_lr_h" so you have an extra </div) and your </DIV>'s are working as follows

</div> (Closes DIV "pan nightlong")
            </div> (this closes DIV "right_h")
            <div style="clear: both"></div>
         </div> (this closes DIV "content")
      </div> (this closes the DIV "main")

Therefore your box div <div class="cont_bot" style="padding: 0px 0px 0px 120px"></div> is outside of the DIV "main". In CSS the DIV "main" is set to 1000px and is centred by margin: 0px auto in the css file. As you box is outside the div, it treats it as part of the page body and just sticks it on the left.

Take a backup of the files and then delete the last </DIV> highlighted above on both pages. Hopefully that will fix it

I simulated it here by adding an extra div.

http://midlifedad.me.uk/WB2_MX/

Andy

Andy9164:
For your second problem with the background / frame not showing.

Your background image is 270px x 395px but the div its trying to fit in to is only 270px x 250px so you are (I have to be careful here as I am speaking to a teacher) 145px short.

From what I can see the DIV have a class of pan.nightlong. If you look in CSS the class .pan is defined as 220 x 250 + 20 padding right and 20 padding left so it shows up as 270 x 250.

You could create a new class in CSS by combining pan and nighlong in to one new class like this

.pannightlong {
   width: 220px;
   height: 395px;
   padding: 0px 20px 0px 30px;
   margin-bottom:15px;
   font-size:120%;
   float:left;
   color: #000000;
        background: url(style/pan_nightlong.png) 0px 0px no-repeat;
}

Then change you html code on the page to..

<div class="pannightlong" style="margin-bottom:5px;">
                  <h2> Earth & Moon Phase </h2>

Let me know how it goes

Andy

Andy9164:
Alternatively change the class .nightlong as follows and then keep the html as it is.

I tested it, see attached image.

.nightlong {
    background: url(style/pan_nightlong.png) 0px 0px no-repeat;
    width: 220px;
    height: 395px;
    padding: 0px 20px 0px 30px;
}

Andy

Navigation

[0] Message Index

[#] Next page

[*] Previous page