DWT & CSS

S

Susan

When I applied a DWT to web pages, my external CSS style sheet did not work
anymore for those pages-the background color for links and type font. How
do you use both CSS and DWT with pages?

Susan
 
S

Susan

___________________________________________________________________________________________________________________________
External CSS
BODY {font-family: Verdana, Arial, Helvetica, San Serif;}
h2 {font-family: Rockwell, Verdana, Arial, Helvetica, San Serif; color:
navy;}
h3 {font-family: Pepita MT, Verdana, Arial, Helvetica, San Serif;}
A:hover {color: silver; background: navy}
A:active {color: red; background: #cccccc;}
A:link {color: blue; background: #cccccc;}
_______________________________________________________________________________________________________________________________
DWT
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- #BeginEditable "doctitle" -->
<title>New Page 2</title>
<!-- #EndEditable -->
<meta name="Microsoft Border" content="none">
</head>

<body>


<div align="center">


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" width="96%" id="table1">
<tr>
<td width="3%" rowspan="4">&nbsp;</td>
<td width="90%" colspan="3" height="23">
<img border="0" src="ESILL.gif" width="504" height="144"></td>
<td width="3%" rowspan="4">&nbsp;</td>
</tr>
<tr>
<td width="10%" valign="top">
<!--webbot bot="Navigation" S-Orientation="vertical"
S-Rendering="graphics" S-Theme="aftrnoon" S-Type="children"
B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
<td width="50%"><!-- #BeginEditable "MainContent" -->&nbsp;<!--
#EndEditable --></td>
<td width="10%">&nbsp;</td>
</tr>
<tr>
<td width="90%" valign="top" colspan="3">
<!--webbot bot="Navigation" S-Orientation="horizontal"
S-Rendering="graphics" S-Theme="aftrnoon" S-Type="children"
B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
</tr>
<tr>
<td width="90%" colspan="3">
<p align="center"><font size="4">This site is best viewed with Navigator
4.7
and up and<br>
Internet Explorer 5.5 and up</font><br>
<b><font color="#000099">©2004 Eastern Shore Institute for Lifelong
Learning
(ESILL)</font></b><br>
All rights reserved<br>
Site maintained by <a
href="mailto:[email protected]?subject=ESILL">Susan
Acree</a></td>
</tr>
</table>


</div>


</body>

</html>
 
S

Susan

I bet it is because my main content in the DWT is in a table cell and CSS
and tables have problems sometimes. I got to read up on CSS and tables.
 
M

Murray

The order of the pseudo-classes is quite important since there exists such a
thing as the RULE OF GREATER SPECIFICITES in CSS. This rule says generally
that the closer a style rule is to the element being styled, the higher its
priority will be. Since you have defined the link pseudo-class AFTER the
hover or the active pseudo-class, it will trump both, and you will lose the
effect of them.

Try changing the order from this -

A:hover {color: silver; background: navy}
A:active {color: red; background: #cccccc;}
A:link {color: blue; background: #cccccc;}

to this -

A:link {color: blue; background: #cccccc;}
A:hover {color: silver; background: navy}
A:active {color: red; background: #cccccc;}

and see what happens.

In fact, you could change it to this -

a { color:blue; background:#CCC; }
a:active { color:red; }
a:hover {color: silver; background: navy}

(this will hit all <a> tags, though, including named anchors and that may
not be what you want)
 
S

Susan

Problem is that I can apply the CSS to the website. The fonts and links will
change color. However when I apply the DWT to the website, the CSS no longer
works. When I have page with the DWT applied, and I try to apply the CSS in
with Design, Format, Style Sheet Links, the Style Sheet Links is grayed out.
It is as though you cannot apply CSS and DWT to page--it is one or the
other.

Susan
 
M

Murray

Well, that's because there is NO CSS in your DWT. You would have to do one
of these two things -

1. Make a link to the CSS file in your DWT, or
2. Embed the CSS rules in the head of the DWT file.
 
S

Susan

Gee I feel stupid! I applied the CSS to the DWT and it worked great. I
forgot about the link being embedded in the top of the web page and when
applied the DWT,
I could not find the link at the top of the page.
 
T

Tom Gahagan

Neither will a lot of other people because she had the courage to put it out
for consumption!!!!
Thanks Susan!!!!

Tom Gahagan
 
M

Murray

Yep - that's the benefit of these forums.

--
Murray

Tom Gahagan said:
Neither will a lot of other people because she had the courage to put it
out for consumption!!!!
Thanks Susan!!!!

Tom Gahagan
 
S

Stefan B Rusynko

FYI
you can also apply a custom editable css to each page if you add it in an editable region in your DWT as
<!-- #BeginEditable "pagestyles" -->
<style type="text/css"><!--
any embedded editable styles here
// --> </style>
<link rel="stylesheet" type="text/css" href="your.css">
<!-- #EndEditable -->




| Gee I feel stupid! I applied the CSS to the DWT and it worked great. I
| forgot about the link being embedded in the top of the web page and when
| applied the DWT,
| I could not find the link at the top of the page.
|
| | > Well, that's because there is NO CSS in your DWT. You would have to do
| > one of these two things -
| >
| > 1. Make a link to the CSS file in your DWT, or
| > 2. Embed the CSS rules in the head of the DWT file.
| >
| > --
| > Murray
| >
| > | >> Problem is that I can apply the CSS to the website. The fonts and links
| >> will change color. However when I apply the DWT to the website, the CSS
| >> no longer works. When I have page with the DWT applied, and I try to
| >> apply the CSS in with Design, Format, Style Sheet Links, the Style Sheet
| >> Links is grayed out. It is as though you cannot apply CSS and DWT to
| >> page--it is one or the other.
| >>
| >> Susan
| >>
| >> | >>> The order of the pseudo-classes is quite important since there exists
| >>> such a thing as the RULE OF GREATER SPECIFICITES in CSS. This rule says
| >>> generally that the closer a style rule is to the element being styled,
| >>> the higher its priority will be. Since you have defined the link
| >>> pseudo-class AFTER the hover or the active pseudo-class, it will trump
| >>> both, and you will lose the effect of them.
| >>>
| >>> Try changing the order from this -
| >>>
| >>> A:hover {color: silver; background: navy}
| >>> A:active {color: red; background: #cccccc;}
| >>> A:link {color: blue; background: #cccccc;}
| >>>
| >>> to this -
| >>>
| >>> A:link {color: blue; background: #cccccc;}
| >>> A:hover {color: silver; background: navy}
| >>> A:active {color: red; background: #cccccc;}
| >>>
| >>> and see what happens.
| >>>
| >>> In fact, you could change it to this -
| >>>
| >>> a { color:blue; background:#CCC; }
| >>> a:active { color:red; }
| >>> a:hover {color: silver; background: navy}
| >>>
| >>> (this will hit all <a> tags, though, including named anchors and that
| >>> may not be what you want)
| >>>
| >>> --
| >>> Murray
| >>>
| >>> | >>>> ___________________________________________________________________________________________________________________________
| >>>> External CSS
| >>>> BODY {font-family: Verdana, Arial, Helvetica, San Serif;}
| >>>> h2 {font-family: Rockwell, Verdana, Arial, Helvetica, San Serif; color:
| >>>> navy;}
| >>>> h3 {font-family: Pepita MT, Verdana, Arial, Helvetica, San Serif;}
| >>>> A:hover {color: silver; background: navy}
| >>>> A:active {color: red; background: #cccccc;}
| >>>> A:link {color: blue; background: #cccccc;}
| >>>>
_______________________________________________________________________________________________________________________________
| >>>> DWT
| >>>> <html>
| >>>>
| >>>> <head>
| >>>> <meta http-equiv="Content-Type" content="text/html;
| >>>> charset=windows-1252">
| >>>> <!-- #BeginEditable "doctitle" -->
| >>>> <title>New Page 2</title>
| >>>> <!-- #EndEditable -->
| >>>> <meta name="Microsoft Border" content="none">
| >>>> </head>
| >>>>
| >>>> <body>
| >>>>
| >>>>
| >>>> <div align="center">
| >>>>
| >>>>
| >>>> <table border="0" cellpadding="0" cellspacing="0"
| >>>> style="border-collapse: collapse" width="96%" id="table1">
| >>>> <tr>
| >>>> <td width="3%" rowspan="4">&nbsp;</td>
| >>>> <td width="90%" colspan="3" height="23">
| >>>> <img border="0" src="ESILL.gif" width="504" height="144"></td>
| >>>> <td width="3%" rowspan="4">&nbsp;</td>
| >>>> </tr>
| >>>> <tr>
| >>>> <td width="10%" valign="top">
| >>>> <!--webbot bot="Navigation" S-Orientation="vertical"
| >>>> S-Rendering="graphics" S-Theme="aftrnoon" S-Type="children"
| >>>> B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
| >>>> <td width="50%"><!-- #BeginEditable "MainContent" -->&nbsp;<!--
| >>>> #EndEditable --></td>
| >>>> <td width="10%">&nbsp;</td>
| >>>> </tr>
| >>>> <tr>
| >>>> <td width="90%" valign="top" colspan="3">
| >>>> <!--webbot bot="Navigation" S-Orientation="horizontal"
| >>>> S-Rendering="graphics" S-Theme="aftrnoon" S-Type="children"
| >>>> B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
| >>>> </tr>
| >>>> <tr>
| >>>> <td width="90%" colspan="3">
| >>>> <p align="center"><font size="4">This site is best viewed with
| >>>> Navigator 4.7
| >>>> and up and<br>
| >>>> Internet Explorer 5.5 and up</font><br>
| >>>> <b><font color="#000099">©2004 Eastern Shore Institute for Lifelong
| >>>> Learning
| >>>> (ESILL)</font></b><br>
| >>>> All rights reserved<br>
| >>>> Site maintained by <a
| >>>> href="mailto:[email protected]?subject=ESILL">Susan
| >>>> Acree</a></td>
| >>>> </tr>
| >>>> </table>
| >>>>
| >>>>
| >>>> </div>
| >>>>
| >>>>
| >>>> </body>
| >>>>
| >>>> </html>
| >>>> | >>>>> Show me your DWT page code, please.
| >>>>>
| >>>>> --
| >>>>> Murray
| >>>>>
| >>>>> | >>>>>> When I applied a DWT to web pages, my external CSS style sheet did
| >>>>>> not work anymore for those pages-the background color for links and
| >>>>>> type font. How do you use both CSS and DWT with pages?
| >>>>>>
| >>>>>> Susan
| >>>>>>
| >>>>>
| >>>>>
| >>>>
| >>>>
| >>>
| >>>
| >>
| >>
| >
| >
|
|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Top