Box adjustments in IndexT.htm Page

[avoorpool]

Hi Jacques,

I'd like to add another 'box' to the right-side of my Index Page (below the current 'Observation, Forecast etc, etc)
However, I want to add a larger box, as displayed in the 'System' page which is 'box_img3.png'.
I converted the original image (=box_img3.png) to the same width as the other ones (=270) and renamed it to box_img3-1.png.
When I enter this setting into the index page (<div class="box_img3-1" style="margin-top: 0px">) the box is not displayed.....
How can I change the size and have it displayed like the others???
Thanks,

Arthur

[avoorpool]

Hey Jacques,

Too quick in asking for 'help' 
Figured it out with adding the correct box-class in the Styles.css file......

Cheers,

Arthur

[avoorpool]

Hey Jacques,

Not done yet 
You know I'm 'picky' when it comes ot 'perfection', so I still need a little 'tweak' in the final image.

The box fits perfectly the 'empty' space in the right corner of the Index Page with a 'Live' Image of the Earth & Moon (I entered this as a result of the new 3 pages on the website, dedicated to the 3 major Planets in our Solar System (check out [Weather Info] and 'The Earth, The Moon and The Sun'...!!!)

However, all other boxes on the Index Page have the <h2> underlining matching the width of the box.
In this new box (box_img3-1) it covers the entire box and not only the text....
How can I edit this (maybe another change in 'styles.css' ....???)

Thanks,

Arthur

[Mr.Meteo]

Hi Arthur,

Nice addition to your site, I haven't see that one before (sun and moon phase)!
Your problem is that you haven't put "spacers" in the right place.
Instead of margin in inner Div, put padding in outer Div (class="box3-1").

Also, you could play with width of you picture iframe actually is 100%
but could be much smaller, as it isn't 100% of needed space, but 100% of
available space! <iframe id="earth-moon" width="100%" ....

Hope this help!

Regards,
Jacques

[avoorpool]

Hi Jacques,

I haven't tried any modifications, since it's not completely clear to me what you mean by iframe (haven't used that...)
It doesn't look so bad, I just wanted to have the dotted line the same size as in the other boxes....

On another note, I thought the Header Image in each page (= template) is a 'breaker' between the menu bars (I have 3 now) and the actual webpage content.
I swapped the header and menubars, so the menus are 'closer' to the page content and the header image is just a 'stand-alone' on the top of the page.
Let me know what you think

Cheers,

Arthur