View Full Version : Links
Fragile17 02-15-2004, 09:56 PM If you need to see what I'm talking about, my url is www.freewebs.com/fragile19/home.htm
Ok, I've got my style sheet set so that all the links and text in the navigation area on the left look the way I want them. But in the content area (lighter pink color) I want to make my links gray, and my text dark pink. Can I do that? I tried making a separat link that still used A:link A:visited etc, but it didn't look any different
kittycat 02-16-2004, 12:08 AM To the div or whatever you have your content in add id="content" (or change content to whatever you want.
Then in your CSS add this, changing it to the attributes you want...
#content a:link { attributes }
#content a:visited { attributes }
#content a:active { attributes }
#content a:hover { attributes }
#content { attributes (font, colour etc you want to apply to the whole div) }
Fragile17 02-16-2004, 03:40 AM Ok I don't really understand where you want me to put those tags. I've got the style sheet set so that everything in the dark pink is the way I want it, but I want the links and text in the lighter pink to be different. So I add the id="content" to the link/text divs that I want to put in the light pink part, right? But I don't understand where you want me to put the other part, in my style sheet, or in the individual new divs that I put in the light pink part?
Blackdragonhide 02-16-2004, 09:44 AM in your stylesheet:
you can put
#divname a:link {color:#CCCCCC;}
etc etc in your stylesheet or in the head.
Fragile17 02-16-2004, 04:51 PM So I can make sort of like 2 sets of text/link attributes with different names that match the names of the divs.
Rosey 02-16-2004, 05:14 PM Yes you can.
Fragile17 02-16-2004, 06:01 PM Oh! Yay, thanks!
Fragile17 02-16-2004, 06:23 PM Ok it didn't work here's the pieces that I changed:
I changed all the div's that I wanted to be different from the origional style sheet to look like this:
<div id="nav" style="position:absolute;left:20;top:340"><a href="pictures.htm" title="Pictures of me, and people special to me">Pictures of me</a></div>
Then I added this to the style sheet under the origional set:
# nav A:link { text-decoration: none; color:"#FFC0C0"; }
# nav A:visited { text-decoration: line-through; color:"#808080"; }
# nav A:active { text-decoration: line-through; colot: "#808080"; }
# nav A:hover { color:#808080;text-decoration:none; ;height:8;}
and
# nav color: #FE8081;
If you want to, you can view the source from my home page.
bourdelson 02-16-2004, 06:35 PM Why not try a class instead?
.nav {A:link { text-decoration: none; color:"#FFC0C0"; }
A:visited { text-decoration: line-through; color:"#808080"; }
A:active { text-decoration: line-through; color: "#808080"; }
A:hover { color:#808080;text-decoration:none; ;height:8;}
color: #FE8081;
font-size: 12px;
And whatever else you want in that class, then in your div tags would be <div class="nav" style="blahblahblahhereisyourstuff">morestuffgoeshere</div>
Oh, and something I noticed...all of your links can be under one div. They don't need to have separate tags, like you have now. Also, the pixel positioning can go inside of the img tags, so it would be like...
<img src="headerjpg.jpg" style="position:absolute; left:0px; top:0px;">
You can do that with all of them, just so you don't have to keep doing <div id="nav" style="sdflsjfksdjf"><img src="thispic.jpg"></div> over and over again. :D
Fragile17 02-16-2004, 07:36 PM All of my links turned blue....and it still didn't work, I just can't get this. :-(
bourdelson 02-16-2004, 08:55 PM .content A:link { text-decoration: none; color:#808080; }
A:visited { text-decoration: line-through; color:#FE8081; }
A:active { text-decoration: line-through; colot: #FE8081; }
A:hover { color:#FE8081;text-decoration:none; height:8;}
.nav A:link { text-decoration: none; color:#FFC0C0; }
A:visited { text-decoration: line-through; color:#808080; }
A:active { text-decoration: line-through; color: #808080; }
A:hover { color:#808080;text-decoration:none; height:8;}
color: #FE8081;
font-size: 12px;}
Try it now and see if it works.
kittycat 02-16-2004, 09:49 PM I got it to work using this CSS code, basically the same as the one just above but with some changes:
BODY, TD, TABLE, TEXTAREA, INPUT, OPTION, SELECT
{
background-color: #FFC0C0;
font-family: Verdana,Arial;
color: #808080;
font-size: 12px;
}
.content A:link { text-decoration: none; color:#808080; }
A:visited { text-decoration: line-through; color:#FE8081; }
A:active { text-decoration: line-through; color: #FE8081; }
A:hover { color:#FE8081; text-decoration:none; height:8; }
.nav A:link { text-decoration: none; color:#FFC0C0; }
A:visited { text-decoration: line-through; color:#808080; }
A:active { text-decoration: line-through; color: #808080; }
A:hover { color:#808080;text-decoration:none; height:8; }
color: #FE8081;
font-size: 12px;
body {
scrollbar-arrow-color: #FE8081;
scrollbar-darkshadow-color: #FF9999;
scrollbar-track-color: #FFC0C0;
scrollbar-face-color: #FFC0C0;
scrollbar-shadow-color: #FF9999;
scrollbar-highlight-color: #FF9999;
scrollbar-3dlight-color: #FF9999; }
The stuff in bold you have to either get rid of or assign it to a value (body, one of the links, divs or whatever). Some of the links show up blue in the nav because you have id instead of class. The ones that do work will appear invisible because they're the same colour as the background.
Fragile17 02-17-2004, 12:38 AM Hopefully this is the last time that I'll have to bother you guys. I re-wrote the whole layout, and made much less div layers, but everything still isn't right. All of the text is showing up as the default color. All of the links are right except for one thing. The links in the content area are the right color, and the line-through shows up when I click on it, but the color doesn't change.
Rosey 02-17-2004, 12:49 AM links are stand along tags, you can't include them in things like that. For the id i'm wondering if the space didn't hinder it but with a class you have to do this:
a.nav:link { text-decoration: none; color:#FFC0C0; }
a.nav:visited { text-decoration: line-through; color:#808080; }
a.nav:active { text-decoration: line-through; color: #808080; }
a.nav:hover { color:#808080;text-decoration:none; height:8; }
Fragile17 02-18-2004, 02:05 AM I finally fixed it. I'm not 100% sure how I fixed it though. I was just playing around with different parts, and all of a sudden, it was fixed. Thank you guys, you helped me SO much! And you are so much nicer than people at other boards.
|