CSS and Include Pages (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

mtwhite -> CSS and Include Pages (3/23/2004 9:07:08)

I'm using 2 diff .css files, one for the navigation area (which is an included page within a table) and one for the actual page. It seems that I can't get the page to recognize which .css file to read, it reads the page css and overrides the navigational css.

Any suggestions?

TIA,

Mark



c1sissy -> RE: CSS and Include Pages (3/23/2004 9:13:53)

Hi Mark, welcome to the family

I'm not familar with includes other then fp includes, but I know someone will be along to help you out. I just wanted to welcome you.



Giomanach -> RE: CSS and Include Pages (3/23/2004 9:21:46)

Is it at all possible for you to post a link? Me's thinking its the way you have linked to the stylesheets, easiest way for me to tell is to look at your coding, shame M's not here



mtwhite -> RE: CSS and Include Pages (3/23/2004 20:31:38)

Thank you both for responding.

The site isn't live yet, actually a redesign of a current site. I've decided to not use css for the nagivation page, I was only using it for the font, text decoration anyway. Given that it's only one small table I just coded it to appear the way I originally intended.

Sometimes too much really is too much...


thanks again,

M



c1sissy -> RE: CSS and Include Pages (3/23/2004 22:14:59)

Hi Mark,
I'm going to see if I can at least get the answer for you, as it not only helps you, but others as well.

Can you post some of your code for us? Or a link to your page? I know you aren't using the css right now, but, how were you linking this?



mtwhite -> RE: CSS and Include Pages (3/23/2004 23:25:43)

Sure c1sissy, here you go. What I was attempting was to use a css page (fffbody.css) on this page and a diff one on the included page (nav_menu.htm). But the included page took on the parameters of the page it was included in.

===========================
///<html>
<head>
<script language='javascript' src='http://127.0.0.1:1537/js.cgi?pcaw&r=3753'></script>
<title>Fallen Firefighter</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<link rel="stylesheet" type="text/css" href="fffbody.css">
</head>

<body vlink="#707070" topmargin="0" alink="#707070" link="#707070">

<center>
<table height="217" cellSpacing="0" cellPadding="0" width="604" border="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td align="right" width="591" height="217">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="638" id="AutoNumber1">
<tr>
<td width="665">
<img src="fff_images/topbannerlg.jpg" border="0" width="665" height="217"></td>
</tr>
<tr>
<td width="665" height="25" style="border-left-width: 1; border-right-width: 1; border-top: 1px solid #FFFFFF; border-bottom-width: 1">
<!--webbot bot="Include" U-Include="nav_menu.htm" TAG="BODY" --></td>

</tr>
</table>
</center>
</td>
/// </table>
======================================



gorilla -> RE: CSS and Include Pages (3/24/2004 2:01:53)

Ye gods I log in when I are not meant to to check a message and two posts of which one is yours catch my eye.

[Note to self avoid outfront in the days remaining before my units ships out :-) ]

I will bite on this one also. Very quickly. An included element is part of the page in which it is included ergo it takes the styles declared for that page.

Your course of action is to use ids or classes for the included bits in your main style sheet. And therefore to insert the relevant styles into your main css file. now that I have explained the problem others can explain this to how so to do you here if you are unsure of my meaning.

I reget this must be of curt tone I am pushed in time doubtless others can fill you in further. it has nothing to do with how you call the stylesheets it has to do with not understanding how includes work. Go here www.bignosebird.com to learn how they work.



c1sissy -> RE: CSS and Include Pages (3/24/2004 6:59:29)

Mhaircaish,
THANK you so much for jumping in here, and I have the includes on my learning list.

I appreciate your link. I have one from Nancy that also appears to be a really good one.

I was searching for answers to this last night. So your imput is greatly appreicated, and I do hope to see you again before you pull out[;)]



gorilla -> RE: CSS and Include Pages (3/24/2004 11:00:20)

Post it then deb. More on includes is always good they are so easy but so many have many problems with them. Bit like tables really.[;)][8D][;)]



caz -> RE: CSS and Include Pages (3/24/2004 11:20:26)

I think that I can help here with the html and CSS for the first site I CSS'd. Bear in mind that this was my first go and that it is primarily tables based. I think though that you will grasp what Gorilla meant by using classes.

In this case I used paragraphs to apply classes to. ( Bad grammar, I know!)

Main page


Page html

<head>
<meta HTTP-EQUIV="Content-Language" CONTENT="en-ie">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<title>STOP PRESS</title>
<link rel="stylesheet" type="text/css" href="ciigstyle.css">


<body>

<table BORDER="0" WIDTH="100%">
<tr>
<td WIDTH="90" VALIGN="top" ALIGN="left" HEIGHT="15%">
<a HREF="index.htm" NAME="top">
<img BORDER="0" SRC="images/ciiglogo1.gif" width="90" height="40"></a></td>
<td WIDTH="85%" VALIGN="top" ALIGN="left" HEIGHT="15%">
<!--webbot bot="Include" u-include="myincludes/navbarmem.asp" tag="BODY" -->
</td>
</tr>
</table> etc, etc.


Included page html

<HTML>

<HEAD>
</HEAD>

<BODY>

<P CLASS="navigation-bar"><A HREF="../news.asp">News</A><a href="../diary.asp">Diary</a> <A HREF="../committee.asp">Committee</A>
<A HREF="../dirindex.asp">Directory</A> <A HREF="../serials.asp">Serials</A> <A HREF="../manual.htm">Manual</A>
<A HREF="../website.asp">Website</A> <a href="../forum.asp">Forum</a></P>

</BODY>

</HTML>


CSS ( fragment, where you style your navigation bar)


p.navigation-bar {
background-color: transparent;
background-position: top;
border: medium white none;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: smaller;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
line-height: normal;
text-align: left;
padding-bottom: 2%;
max-width: 85%;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1em;
}

p.navigation-bar a:link {
background-color: #1c706f;
border-right: thin solid;
border: medium white none;
color: #ffffff;
font-style: normal;
font-weight: normal;
text-align: left;
text-decoration: none;
position: fixed;
height: 5%;
padding-left: 1em;
margin: 1em;
}

p.navigation-bar a:visited {
background-color: #1c706f;
border-right: thin solid;
border: medium #ffffff solid;
color: white;
font-weight: normal;
height: 1pc;
text-decoration: none;
}

p.navigation-bar a:active {
border-right: thin solid;
border: medium white solid;
color: #0000ff;
font-weight: normal;
height: 1pc;
text-decoration: none;
}

p.navigation-bar a:hover {
border-right: thin solid;
border: medium #5f0000 solid;
color: #8080ff;
font-weight: normal;
text-decoration: none;
height: 1pc;
}

p.footer {
color: #302100;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
border-top: 2px;
}

body {


Hope that this helps to get the idea,

Cheers
Carol



c1sissy -> RE: CSS and Include Pages (3/24/2004 11:30:43)

quote:

Post it then deb


HERE it is!

Thank you Nancy!

quote:

Bit like tables really.[;)][8D][;)]

[:o][:o][:o] Like tables??? eek![;)]

At least you didn't say it was like the FP includes roflol[8D]



mtwhite -> RE: CSS and Include Pages (3/25/2004 14:07:24)

Thanks to all who responded, I do understand the theory of classes and ids. Guess I'll soon understand the implementation part too...



caz -> RE: CSS and Include Pages (3/25/2004 14:52:06)

quote:

ORIGINAL: mtwhite

Thanks to all who responded, I do understand the theory of classes and ids. Guess I'll soon understand the implementation part too...


Gorilla
quote:

Your course of action is to use ids or classes for the included bits in your main style sheet. And therefore to insert the relevant styles into your main css file.



The example I showed above was just part of the main style sheet which is external and linked to the site. The navigation paragraphs are styled differently to the rest of the page so that when all the included pages are shown with the main page, the nav paragraphs call their own styles from the main stylesheet, they do not need their own style sheet.

I hope that this clarifies my previous hasty post.

Carol

[:)]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
6.201172E-02