css affecting php include

Forum Moderators: not2easy

Message Too Old, No Replies

css affecting php include

Sabie

9:48 pm on Feb 16, 2006 (gmt 0)

Hi, I am a total greenie just learning css, I have hired someone to create css for me but he is not around right now. I created (with some help) a "hover" look for my links but now it is making my bottom menu links which are a php include do the same thing. Does css always affect includes? Is there some code I have to add to my css to prevent this from happening? This is my css. I don't expect a lesson here, just wanted to know if this is a issue that always occurs or is it just because my css is so bad? Thanks., S
A:HOVER {
color : #BC010A;
text-decoration : none;

background-position: ;
font: normal Verdana;
background-color: #EAE4E4;
background: #EAE4E4;
line-height: 1.2em;
font-size: medium;

coopersita

10:07 pm on Feb 16, 2006 (gmt 0)

You need to narrow down to which links you want that css to affect.

It doesn't matter whether it's an include or hard coded, a:hover will affect all link hovers (unless a more specific rule is found).

If for example, you just want your menu links to use your hover, and your menu is in a div or list with an id, you could target it via a descendant selector:

#menu a:hover {
color : #BC010A;
text-decoration : none;
background-position: ;
font: normal Verdana;
background-color: #EAE4E4;
background: #EAE4E4;
line-height: 1.2em;
font-size: medium;
}

The above code assumes that your menu is coded as:
<div id="menu"> your links here</div>

bedlam

10:16 pm on Feb 16, 2006 (gmt 0)

Well, first of all, if you paid for this CSS, ask for your money back. On the other hand, it's not bad if you're just getting started on your own.

A:HOVER {
color : #BC010A;
 text-decoration : none;
 background-position: ;
 font: normal Verdana;
 background-color: #EAE4E4;
background: #EAE4E4;
line-height: 1.2em;
font-size: medium;

Drastically improved, it looks like this:

a:hover {
/*
You only need one of 'background' or 'background-color': 
*/
 background:#eae4e4;
 color:#bc010a;
 text-decoration:none;
/* 
You can define 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' and 'font-family' in a 'font' declaration; no need for a separate font-size declaration:
*/
font:normal medium/1.2em verdana,vera,sans-serif;
}

The next thing is your question "Does css always affect includes?" The question doesn't really make sense, since includes become a part of the document including them. In other words, by the time a page with php or ssi includes reaches your browser, the webserver has seamlessly assembled all of your includes into a single document.

Any CSS referenced from or included in a given document will affect the whole document. When you'd like to style similar elements (such as links) differently depending on where they are in the page, it's usually best to define the styles according to the contexts in which the elements occur:

HTML:

<body>
<a href="foo/">Foo</a>
<div id="footer">
<a href="bar/">Bar</a>
</div>
</body>

CSS:

/* First, define the default properties for links: */
a:hover { /* Default link properties */ }
/* Then, define properties for the footer links: */
#footer a:hover { /* Footer link properties */ }

You should probably troll the internet looking for a css tutorial [google.com] or have a look through the css forum library [webmasterworld.com] to really figure out how the above code works, but it may get you started.

-b

Arthur_Abon

1:40 am on Mar 1, 2006 (gmt 0)

You can also try assigning a style only on the links you want affected.

In your CSS

a.sample
{
color: #FFFFFF;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration:none;
}

a.sample:hover
{
color: #000000;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration:underline;
}

In your HTML

<a href="#" class="sample">Sample Link Affected</a>
<a href="#">Sample Link Not Affected</a>