Results 1 to 6 of 6
Related
-
CSS code help with external sheet Forum: CSS Forum
Replies: 3 -
div tags / style sheet margin moves all my content Forum: CSS Forum
Replies: 0 -
create a table along the width of the sheet Forum: General Discussion
Replies: 1 -
basic css style sheet for print Forum: CSS Forum
Replies: 2 -
Style sheet shortcutting - possibilities? Forum: CSS Forum
Replies: 9
-
04-01-2003, 03:08 PM #1
inline style overuled by external sheet
I have an included page(a navigation menu), which when viewed in a browser on its own, shows my links and hover text in white and yellow correctly. I used an internal style sheet in the head tags.
When I view this page through a page that it is included in, the links revert to the external stylesheet, blue & red. I have placed the following inline code hoping it would force the include to use it - but no joy.
the link is here: http://www.sensibleweb.co.uk/test/asi/
The inline code is here:
<td align="right" valign="top" width="20%" style="
a:link color: #FFFFFF; text-decoration: none;
a:visited color: #FFFFFF; text-decoration: none;
a:hover color: #FFCC33; text-decoration: none;
a:active color: #FFFFFF; text-decoration: none"
>
<!--webbot bot="Include" U-Include="includes/menu.htm" TAG="BODY" --></td>
Can any one correct me please?
-
04-01-2003, 03:29 PM #2
Hiya Jackie.
inline styles are designed to apply more for the element they are placed in. Combine that with using :hover (pseudo classes) then you are going to get unpredictable results.
If I was you, I would give the td tag a classname (eg linktd) and setup the styles above it like this -
Code:td.linktd a { color: white; } td.linktd a:hover { whatever; }
If one of our members helps you, please click theicon to add to their reputation!
No support via email or private message - use the forums!
Before you ask, have you Searched?
-
04-01-2003, 03:45 PM #3
Thanks Dean
Sorry for being thick I have read about classnames but am a bit confused. Are you able to expand on your answer please?
-
04-01-2003, 03:51 PM #4
No worries.
Actually, I wrote a tutorial on how classes work , heres an exerpt -
Any rules beginning with a full-stop, (.), denote them as applying to a class, so that anything you put CLASS="little" in with its tag would have the .little rule applied to it.Code:.little { color: red; }
id's are similar, but should be unique and are accessed with #little instead.If one of our members helps you, please click theicon to add to their reputation!
No support via email or private message - use the forums!
Before you ask, have you Searched?
-
04-02-2003, 05:02 AM #5
Thanks Dean
Another kind person provided some help along the same recommendations as yourself and it works like you said. I will place it below in case it helps anyone else:
The <a class="menu" ... goes with every link in your menu, so you would have
Code:
<a class="menu" href="asi_conferences.htm">...
<a class="menu" href="commercial_communications.htm">...
<a class="menu" href="about_us.htm">...
And any others I've missed.
Then because they have been assigned to a class, the menu links will get the style from the menu class in your style sheet.
Just add Code:
a.menu:link{ color: #FFFFFF; text-decoration: none;}
a.menu:visited {color: #FFFFFF; text-decoration: none;}
a.menu:hover {color: #FFCC33; text-decoration: none;}
a.menu:active {color: #FFFFFF; text-decoration: none;}
to your external style sheet. It will only affect the links of class menu.
If you have a few minutes spare you could go through and remove all the font tags then restyle it using CSS
Tony
-
04-02-2003, 02:47 PM #6
Good stuff. Glad you got it working.
If one of our members helps you, please click theicon to add to their reputation!
No support via email or private message - use the forums!
Before you ask, have you Searched?
[Hostripples India] - Best Canada Linux SSD VPS Server!
02-15-2019, 12:46 AM in Web Hosting Forum