« previous next »
Pages: [1] 2

Author Topic: Multiple CSS files in one Page.....  (Read 3458 times)

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Multiple CSS files in one Page.....
« on: January 03, 2013, 10:02:03 AM »
Hi Jacques,

As you might have noticed, my new lay-out of the Weather Blues on my website has come along well.
However, there is one 'technicallity' I can't find a solution for:

As you suggested, I used the <table>  and <td> settings to get the buttons in the main (= left) menu aligned.
However, in the 'readDayfile.css' file, which is used for the 'Annual Data Summary', there are a lot of <table.  and <td> elements included for all columns on that page!!!
This interferes with my settings for the main menu buttons, so I can't use it. (on this page only).
Is there a solution to avoid this problem without the need to make too many changes in the 'readDayfile.css' file and mess up this well organized page?
I've already tried to re-arrange the entire order in the <head> section of the page, but that doesn't work....

Thanks,

Arthur
Logged

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Multiple CSS files in one Page.....
« Reply #1 on: January 03, 2013, 10:25:34 AM »
Hi Arthur,

As you mentionned, usually, we play with .css files order to obtain
desired effect; as the last one "wins"!!

But there is also order in the file itself! If at top of the file you put
a line as specific to your particular table:

#TopMenu table ...

and somewhere below this, there is a general table definition:

table...

Yous table will be redefined by this last layout!

Then, always try to be as specific as you can to not having "undesired"
effects. But it is not because you do a great job... that the script/snippet
use that knd of "rightness".

... and when things seems impossible to fit together, it could be a sign
that the page need to be redefined, because too complex!
Hope this help! ;)

Regards,
Jacques
Logged
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Multiple CSS files in one Page.....
« Reply #2 on: January 03, 2013, 12:55:39 PM »
HI Jacques,

Thanks for your reply.
I've tried EVERYTHING...., but things don't change on the page.
With your permission, I've attached both files ('dayfile.php' and 'readDayfile.css') maybe just for you to have a look at it and come to the conclusion it might be too complicated  :o
In the mean time, I'lll keep the 'dayfile.php page running as it is......

Thanks,

Cheers,

Arthur
Logged

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Multiple CSS files in one Page.....(picture)
« Reply #3 on: January 03, 2013, 01:00:04 PM »
Hi Jacques,

Forgot to attach the image as a result of combining both files I attached in previous message.....


Cheers,

Arthur
Logged

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Multiple CSS files in one Page.....
« Reply #4 on: January 03, 2013, 01:12:47 PM »
Hi Arthur,

Sorry, I see nothing with your files, as too many thing missing!
(You're far from original WB1)

Maybe with a link...

Jacques
Logged
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Multiple CSS files in one Page.....
« Reply #5 on: January 03, 2013, 02:10:11 PM »
Hi Jacques,

I currently have a page displayed for the Annual Data Summary at:
http://www.altonaweather.ca/dayfile.php
This is the page that shows the main menu buttons without an interruption from the 'readDayfile.css' file, although the page is not shwoing the same as all other pages. (buttons are not alighned).
When I use the 'buttonsnew2' settings like in all other pages, the main menu buttons in 'dayfile.php' show lke in previous attached image.
Is there a way to use anything else than <td> or <th> as I've used for the 'buttonsnew2'...???

Thanks,

Arthur
Logged

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Multiple CSS files in one Page.....
« Reply #6 on: January 03, 2013, 05:25:16 PM »
Hi Arthur,

Tables are the oldest way to position objects, newest standards "reject" tables
in a new "tableless" layout era. But tables are understand better by all browser
because they are there from so many time!

In new way to do things, DIVs are the key. Problem with that is because DIVs
are independant form each other! As contrast to tables "cells" that are alike from
column to column, DIVs are independant and need to be "formatted" individually.
A last problem with DIVs; they haven't really intended to be stacked vertically,
then you have to made them floatting... and floatting objects doesn't count in
layout, as they "float" over existing objects/text.

Then, to solve float problem, you have to have a non-float DIV container that give
only width and height!, an example:

<div style="height:300px; width: 450px">      <!-- Nothing specidied, then straight fixed position -->
   <div style="width:150px; float:left"    <!-- 1st column -->
     .....
   </div>
   <div style="width:150px; float:left"    <!-- 2nd column -->
     ...
   </div>
   <div style="width:150px; float:left"    <!-- 3rd column -->
      ....
   </div>
</div>

As you see you have a container that reserve an height of 300px
for all contained DIVs. That way you have 3 identical column with
a maximum height of 300px.

Hope this help.

Regards,
Jacques
Logged
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Multiple CSS files in one Page.....
« Reply #7 on: January 04, 2013, 11:52:36 AM »
HI Jacques,

Thanks so much. That really helped out 1 problem........  ::)
I did indeed the same for my Climate Change Archive page, dividing it into 3 colums..!!
However, the columns are fine, but HOW do I get the interspacing between the buttons (see attachment)
I've tried many ways with "padding"  and "margin", but either the columns are all in 1 line, but no spacing between buttons....

Thanks

Arthur
Logged

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Multiple CSS files in one Page.....
« Reply #8 on: January 04, 2013, 12:07:03 PM »
Hi Arthur,
I've kept that one for an other post... my fingers were lazy!  :))

That is pretty simple.... line-height is the solution! Actually,
you are on line-hegth according to text, without image!
put simply a line-height: 35px; or higher!

Regards,
Jacques
Logged
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Multiple CSS files in one Page.....
« Reply #9 on: January 04, 2013, 12:22:01 PM »
Hi Jacques,

Voila.......
Thanks again.
Worked out well, however............Not out of the woods yet..  :P
Look at the attachment (I'm working with it on my 'test page'), and you'll see the entire 2 columns are too low compared to the frame they have to fit in..!!
the [Site Map] button is exactly conform all other pages, but those 2 colimns need to 'go-up'...!!
Can I have the 'entire' <div> element (columns 2 and 3) move up a bit??

Thanks again Maestro

Cheers,

Arthur
Logged

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Multiple CSS files in one Page.....
« Reply #10 on: January 04, 2013, 12:38:45 PM »
Hi Arthur,

As I told you... working with floated objects is a "game of patience"
you have to work in many,many aspects to reach the same result
as a simple table!

For that one, you surely have something that take the upper place
in you box!! But, the "last thing to do" is a simple negative value!!

You could always do a margin: -20px; to position things... but you'll
experience that sometime we dream of being able to do margin: 21,375px!!

Cheers,
Jacques
Logged
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Multiple CSS files in one Page.....
« Reply #11 on: January 04, 2013, 01:49:41 PM »
Hi Jacques,

Indeed, you're right: It's been a 'game of patience'..  :))
With many 'px' and 'px' trials, I finally managed to get the buttons where they have to be with just a minimal 'shift' when you toggle between other pages in that section.
See: http://www.altonaweather.ca/dayfile.php

However, I do see this happening with other pages as well....
The ones that have their 'own' CSS file, like the 'gauges.css' or the realtime Cumulus console page ( 'wconsole.css) as well as in the [record] page with the 'record.css' file......
Those pages obviously 'follow' part of their own CSS settings and not entirely the 'styles2.css' as I've set for the 'buttonsnew2' section. Result: Even in those pages there is a very slight 'button-shift', but for now I'll take that 'little' 'imperfection  ;)

Thanks for your help!!!!

Cheers,

Arthur
Logged

Offline joew

  • Jr. Member
  • **
  • Posts: 36
    • TigerDenWX
Re: Multiple CSS files in one Page.....
« Reply #12 on: January 07, 2013, 12:16:43 PM »
Hi Arthur,

I'm looking for a favor? ;) Could I please get a copy of your "readDayfile.php" that builds the table from the "dayfile.txt"? I have been working off and on in trying to implement this page for a while since I first saw it on the WIKI pages of the Sandaysoft board and when I first saw your version I've been trying to model mine after yours!  :)

I've been able to figure out how to modify my copy of the "readDayfile.php" file to reflect highs/lows for all the pages, but have run into problems at the bottom of the table in coding the comments for 'table_msg1',  'table_msg2', and 'table_credits' !  So far everything I try just blows up my page! :(

So if you wouldn't mind sending me a copy of your "readDayfile.php" so that I can see where I'm going wrong, I would be deeply thankful!  :)

Cheers,
Joe

PS. If you want to see here's a link to what I have thus far: http://tigerden.hopto.org/tigerdenwx/dayfilesummary.php
Logged

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Multiple CSS files in one Page.....
« Reply #13 on: January 07, 2013, 02:04:59 PM »
Hi Joe,

No problem.
I hope the files will be attched correctly.
My 'readDayfle.php' and 'readDayfile.css' are from a different 'source' then WiKi, however as you've noticed it all displays well.

Hope this helps. If you've a problem with the attached files, please send me an email and I'll forward it by 'regular' mail..  ;)

Cheers,

Arthur
Logged

Offline joew

  • Jr. Member
  • **
  • Posts: 36
    • TigerDenWX
Re: Multiple CSS files in one Page.....
« Reply #14 on: January 07, 2013, 10:08:39 PM »
Hi Arthur,

Many thanks for the copies of your files!!

After comparing them with what I had done with the files I had originally downloaded and modified I determined that your copies were much better and more compact and displayed better  than mine, so I decided to use yours in place of mine.

So again many thanks!!! ^-^  :D  ^-^  :D

Cheers,
Joe
Logged
Pages: [1] 2
« previous next »