help. help. help.

Help plz. CSS trying to kill me. In a very geeky way.

Okay, I set up a CSS with all links are bold, red. Problem: the a name links for internal page jumps are *also* red and bold now. Is there a way to fix this from the style sheet or do I need to do an in-line for this page to stop that from happening? Is there a way to differentiate A HREF from A Name?

Style sheet below cut.





BODY {background: #FFFFFF;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
}

a{text-decoration:none; color:#990000; font-weight:bold}
a:hover {color:#ff0000;}

H1 {font-family: Tahoma; font-size: 20pt; text-align: center;}
P {font-family: Tahoma; font-size: 10pt; text-align: left;}
P.first {font-family: Tahoma; font-size: 10pt; text-align: left; text-decoration: underline}
P.scnd {font-family: Tahoma; font-size: 16pt; text-align: left; font-weight: bold;}
P.thrd {font-family: Tahoma; font-size: 10pt; text-align: right; font-weight: bold;}
P.frth {font-family: Tahoma; font-size: 10pt; text-align: left; font-weight: bold;}
P.fifth {font-family: Tahoma; font-size: 9pt; text-align: left;}
P.sixth {font-family: Tahoma; font-size: 14px; text-align: center; color: #FFFFFF;}

ul {list-style-type: square; font-family: Tahoma; font-size: 10pt; text-align: left;}
ol {list-style-type: square; font-family: Tahoma; font-size: 10pt; text-align: left;}

#back {background:#003366; height: 72px;}
#heartlayout {margin:0px auto; border:1px; padding:10px;}
#header {border:1px; height:100px; padding:1px;}
#content {margin-top:1px; padding-bottom:1px}
#content div {border:5px; float:left}
#content-left {width:20%;}
#content-right {width:75%;}
#bottom {clear:both; text-align:right;}


New Chapter - HR
p.first - underlined points
p.scnd - new topics under chapters
p.thrd - bottom links to next chapters
p.frth - top links to previous chapters
p.fifth - links bottom
p.sixth - images

internal relation to names are in bold unless otherwise indicated.

Comments

[summertea.livejournal.com]

You can set up a class for internal links (class="internal" in HTML, .internal in the CSS). I believe CSS can't tell the difference between internal and external links. To CSS, it's all just "a".

(Someone correct me if I'm wrong. XD;)

[ms-nerd.livejournal.com]

You're right. Unless you set up a class defining external and internal links, it doesn't know the difference.

[ileliberte.livejournal.com]

Do you want to change the a href link colors to something different? You can do that by defining a subclass of a links, like:
a.newlinks{text-decoration:none; color:#990000; font-weight:bold}
a.newlinks:hover {color:#ff0000;}
and then go into the html page and add 'class="newlinks"'to the a href tags, so yes, you will have to go into the html page to add those, it can't be just fixed through the stylesheet as far as I know.

[ileliberte.livejournal.com]

Also, #newlinks would be an id and so you would want to use it just once since it's a unique identifier, .newlinks would be class and you can have both an id and a class for the same tag. And these commands will go into the < style >< /style > tag in the head of the document. If the stylesheet is external, make sure you don't have any css directly on the < a href > or < a name > link itself in the body of the document since the style that comes last overrules the previous command if the elements overlap.

[ms-nerd.livejournal.com]

I had the same problem when I set up our website. My master css sheet has all links defaulting to navy blue so I had to define each set of links for each page:

This is in the style tag:

#pmenu1 a {text-align: right; color:white; font-weight:bold; text-decoration:none; font-family: arial, helvetica, sans-serif; font-size: 12pt;}
#pmenu1 a:hover{color:silver ; font-weight:bold;}
menulinks2 {position:center;}

This is in the body: (replace [ ] with < >)
[div id="pmenu1"]
[a href="index.html" class="menulinks"]home [/a]
[a href="avionics.html" class="menulinks"] avionics[/a]
[a href="fbo.html" class="menulinks"] fbo[/a]
[/div]

etc.

You can see it in action here: http://www.penta-aviation.com/ If you look at the code, you can see that for every page, because I wanted it a different colour I had to define the a href colours for each menu.

My page is a jumble of css and regular code but hey it works! I'm slowly getting everything moved over to css though.

I hope this helps!!! If this doesn't post properly, just go to http://www.penta-aviation.com and look at my code.

[seperis.livejournal.com]

It really does. I like this!

now to see if I can implement it.

Hmm. What's really confusing me is that i use a variatoin, minus div tags, of this style sheet for my own webpage and I haven't had this problem with a names. *thoughtful* Hmm.

[tienriu.livejournal.com]

Hi -

As above, you can set it up in a class, i.e.:

.internal_link {
text-decoration: underline;
color: #000000;
}

And call it this way: < a name = "[blah]" class="internal_link" >test test< / a>

Or, if your internal < a name > links have ID tags (i.e. test test</ a>
you can reference them this way:

#ID_NAME {
text-decoration: underline;
color: #000000;
}

cheers
TR ()

[seperis.livejournal.com]

Okay, I'm--lousy at this. I mean, it's all--*sighs*. This is embarrassing.

Where, exactly, do I put the code?

#back {background:#003366; height: 72px;}
#heartlayout {margin:0px auto; border:1px; padding:10px;}
#header {border:1px; height:100px; padding:1px;}
#content {margin-top:1px; padding-bottom:1px}
#content div {border:5px; float:left}
#content-left {width:20%;}
#content-right {width:75%;}
#bottom {clear:both; text-align:right;}
<--here?

Also, does it make a difference that the a name link is also set to P Class="scnd" ?

[tienriu.livejournal.com]

Heya -

You can put it anywhere (so where you've said "<-- here" is fine). CSS styles can be overwritten though so the lower in the list the better. (For instance, any inline styles you have on the page will overwrite anything you have in your .css page)

It doesn't make a difference that the A name link is set to a P class.

HOWEVER, if all your a name links are in that P class you can just tell that P class to style the a name links.

In other words, you don't need to go back and make changes to every A name link you have.

If your A name links are set up this way:

< a name=" [blah] " class="scnd" >

Then in your CSS stylesheet, make your modifications. For example:

.scnd {
/* your other code */
color: #00000;
text-decoration: none;
}

If however your A name links are set up this way:

< p class="scnd" >
< a name= "[blah]" > test test < /a >
< /p >

Then to change your A name links, do this:

.scnd a:link {
text-decoration: none;
color: #000000;
}

This tells your page that any links within the class 'scnd' should be styled in a certain way.

Hope this makes sense!

TR