Author Topic: Help with 'Internal CSS sheet'  (Read 2389 times)

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Help with 'Internal CSS sheet'
« on: January 22, 2013, 04:23:13 PM »
Hi,

Since my 'frustration-level' has reached the top, a 'help-cry' to the Forum  :'(

I've successfully implemented a nice page with Historic Graphs. (http://altonaweather.ca/historicgraphs.htm)
However, there is one thing that really BUGS me........
The buttons below the graphs (Temp, Pressure, Wind, Rain) are not highlighted when 1) active or 2) hover.
The code in the page is as follows:
<td class="buttonHeader">Temperature</td>
<td class="buttonHeader">Pressure</td
<td class="buttonHeader">Wind</td>
<td class="buttonHeader">Rain Daily</td>
<td class="buttonHeader">Rain Monthly</td>
</tr>
<tr>
<td class="td_thumbnails">
<input id="btnTemp" style="width: 130px; height: 35px" tabindex="1" type="button" value="1 month" onclick='changeImage("temp", 1);' /></td>
<td class="td_thumbnails">
<input id="btnPress" style="width:

So somewhere the line with <input id="btnTemp' etc, etc needs to get the correct code  >:(
I've tried the 'internal' style sheet with a million different settings, but nothing works....

Who has the answer???

Thanks,

Arthur
 

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Help with 'Internal CSS sheet'
« Reply #1 on: January 22, 2013, 09:26:54 PM »
Hi Arthur,
So many headache for a website... protect your head... think of a football helmet!!  :))
(Sorry, I love that icon!!)

For your buttons, you could see that link to have a longer explanation:
http://cssbutton.com/forms/

Usually, wee use <a href... for buttons effects, but this article will show you
that we could do a lot with input!

Hope this help you!

Regards,
Jacques
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Help with 'Internal CSS sheet'
« Reply #2 on: January 23, 2013, 11:43:39 AM »
HI Jacques,

Thanks for your reply and suggestion.
Interesting site you suggested, but it didn't solve my damn...... button problem  >:(

Is there a way to change the code into a <class> and not using the <input>.
Problem is (as described on the CSS website) I don't put anything in (they gave an example to put in a name in a box/button) but I only need to execute a button and have it coloured so you can see which button is active...??

Thanks,

Cheers,

Arthur

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Help with 'Internal CSS sheet'
« Reply #3 on: January 23, 2013, 06:22:12 PM »
Hi Arthur,

Ok! I see that this code is not part of your script or in any other way mandatory,
then I'm not a fan of using input outside of a form to do a button... but there is
so many way to achieve things!!

Also the "job" is not done by the input itself, but by the "onclick" event
(onclick='changeImage("temp", 1);), then replace all this by a more
classic approach. So begin with your html page:

<td class="td_thumbnails">
   <a href="#" onclick='changeImage("temp", 1);>1 month</a>
</rd>

Now, in your CSS file:

.td_thumbnails {
   width: 130px;
   height: 35px
   padding-top: 10px;    These 2 lines center your text in the button!
   text-align: center;
}
.td_thumbnails a {
   text-decoration: none;      Remove classic undelining!
}
.td_thumbnails a:hover {
   color: red;
}

Note that the "active" highlighting is not easy to add as it is a "pseudo-class"
possible for old way to do menus, as each menu point to an other page that have
the same menu, with just an "active" class moved to current item for that page:

<a href="PageNb1.html" class="active">1 month</a>
<a href="PageNb2.html">3 months</a>
...

Hope this will save your head (from bumping on the table!!)

Solution could be to add a 3rd parameter to your script,
ex: onclick='changeImage("temp", 1, ButtonActive);

Regards,
Jacques
« Last Edit: January 23, 2013, 06:54:41 PM by Mr.Meteo »
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Help with 'Internal CSS sheet'
« Reply #4 on: January 24, 2013, 01:38:49 PM »
Hi Jacques,

Thank you so much for your help and good advise!!!
Great!!!!
However, there is just one more.......but....????  :)
Have a look at the attachment. I managed to set the buttons below the graph IDENTICAL with the Main buttons on top of the page  ;) (and they even work!!!)
One thing, the 'visited' button does not return to the original.
'Hover'  and 'Active' are fine (like the buttons in Main Menu), but something isn't right......
It wasn't clear to me what you meant by the 'pseudo-class' settings and how to avoid this problem..
Can you explain again how I can get the correct 'hover' 'visited' and 'active' on 1 page??

Thanks,

Arthur

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Help with 'Internal CSS sheet'
« Reply #5 on: January 24, 2013, 06:24:09 PM »
Hi Arthur,

Your problem is probably due to the fact that you have not cleaned "input"
stuff! You have type="button" value="1 month" for all buttons, but
its not allowed for an <a.... then, your buttons react strangely! In firefox
and Chrome they are all (and stay!)  orange!

For the "pseudo-class" active, that is only because we write it class="active",
(as part of <a href="...) but this is not a css "command", this is a javascript
command included in htlm from a long time, like the hover, visited and focus.
They are not mentionned in your html page, but they react as an event! Active is
a little different as you have to include it in your page to show which item to highlight!

Hope this help you!

Regards,
Jacques
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Help with 'Internal CSS sheet'
« Reply #6 on: January 24, 2013, 07:22:06 PM »
Hi Jacques,

Thanks for the explanations.
Can I just 'delete' the part used for <input>..???

Is there a way to use an 'internal' CSS sheet (<style>xxxxxxxxxxxxx), within the html page, to have the :active work??

Thanks,

Arthur

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Help with 'Internal CSS sheet'
« Reply #7 on: January 24, 2013, 07:29:10 PM »
HI Jacques,

I've deleted the 'type=button'  and 'value = month' section from the html page.
Please check if the buttons are OK (and not all orange) since I don't have Firefox or Chrome to check...  :)

Thanks,

Arthur

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Help with 'Internal CSS sheet'
« Reply #8 on: January 24, 2013, 07:54:26 PM »
Hi Arthur,

At this hour, I'm not on Pc... then on Android Pad all are Orange!
On Dolphin, all are grey, until I choose 1, then all become Orange!
You'll have to install a few browser Arthur! ;)

... or at least, go to http://browsershots.org/
all browsers available in one screen (take a couple of minutes!)

Regards,
Jacques
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Help with 'Internal CSS sheet'
« Reply #9 on: January 25, 2013, 12:36:49 PM »
Hi Jacques,

Thanks for the hint.
Since it displays "relatively fine - a:active doesn't work" on my browser (IE9) and I've spent enough time with these bl..... buttons, I'll leave it as is for now, untill a new "wave of -button energy- try-outs" is coming over me  :(

Cheers,

Arthur