|
| |
|
|
parrothead517
Posts: 6
Joined: 4/4/2008
Status: offline
 |
NEED HELP!! - 4/4/2008 23:49:10
I have designed a website at www.lindsaycoats.com/doggie/index.html. I want the links in the black areas to be white and then rollover to blue. This is how it is now. But ideally, I'd like the links in the gray section to be blue and rollover to white. I know this is possible, but hell if I can figure it out. :( Can anyone help me?!? Thank you!!
|
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: NEED HELP!! - 4/5/2008 2:51:26
Set up a basic rule in your stylesheet like this:
a:link {color:blue; text-decoration:none;}
a:visited {color:black; text-decoration:none;}
a:focus, a:hover, a:active {color:white; text-decoration:none;}
Then in the black areas of the HTML - give those divs or tables or whatever a class (e.g sidebar) then assign a rule for those links like this:
a.sidebar:link {color:white; text-decoration:none;}
a.sidebar:visited {color:gray; text-decoration:none;}
a.sidebar:focus, a.sidebar:hover, a.sidebar:active {color:blue; text-decoration:none;}
In other words everything but the areas with the class "sidebar" will have the first rule - you're then over-ruling that rule for areas with the class "sidebar".
Note - make sure you replace the rules currently in your stylesheet, also ensure that the link rules appear in this exact order as it effects whether they work properly or not.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
parrothead517
Posts: 6
Joined: 4/4/2008
Status: offline
|
RE: NEED HELP!! - 4/5/2008 13:11:39
Thank you for this - I'm still struggling with WHERE to put the sidebar rule. I have a .css file that rules the entire page. The black sections are tables. I guess my question is where do I define the rule and where do I apply it? I tried playing around and still couldn't get it to work.
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: NEED HELP!! - 4/5/2008 15:26:23
stick the class name in the tag like this:
<div class="sidebar">
or
<table class="sidebar">
depending on what you're using to lay out the page.
Then copy and paste the two link rules into the stylesheet after removing the current link rules.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
parrothead517
Posts: 6
Joined: 4/4/2008
Status: offline
|
RE: NEED HELP!! - 4/5/2008 17:21:29
I still seem to be having trouble. :( I really appreciate your help. Would I be able to email you my two files (a .dwt template and the .css file) you can see what I'm doing? I'd be happy to pay if you needed to charge me to assist. Let me know.
Thank you!
Lindsay
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: NEED HELP!! - 4/6/2008 10:00:27
Could you upload the page itself - that way we don't have to actually go create a page, save it, change the image locations etc etc. Saves a lot of time.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: NEED HELP!! - 4/6/2008 14:40:23
Ok so there's a few bits and pieces in the stylesheet that shouldn't be.
Scrap everything in the stylesheet now and replace it all with this (leave nothing else in there):
/* CSS Document */
BODY,TD {font-family: Arial, Helvetica, sans-serif;font-color: #000000;}
H1 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: x-large;
}
H2 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: large;
}
H3 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: medium;
}
BODY {font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
background-color: #ffffff;
}
A:link {
color: #0000ff;
font-weight: bold;
}
a:visited {
color: #0000ff;
font-weight: bold;
}
a:focus, a:hover, a:visited {
color: #ffffff;
font-weight: bold;
font-style:italic;
}
.style2 a:link {color: #FFFFFF; text-decoration:none;}
.style2 a:visited {color: #FFFFFF; text-decoration:none;}
.style2 a:focus, .style2 a.sidebar:hover, .style2 a.sidebar:active {color: #0000FF; text-decoration:none;}
That's that bit done.
Now in the markup itself you've got a couple of errors that will mean some of the links won't work as you want. You should have:
<td><div align="left" class="style2"><a href="page6.html"><img src="images/bone-bullet-black.jpg" width="30" height="16" hspace="5" border="0" align="absmiddle">PUPPY TRAINING </a></div></td>
in a couple of cases you've got:
<td><div align="left"><a href="az-service-area.html" class="style2"><img src="images/bone-bullet-black.jpg" width="30" height="16" hspace="5" border="0" align="absmiddle">SERVICE AREA </a></div></td>
Can you see - the class="style2" is in the link tag rather than the div tag. Now either is fine but the syntax is different in the stylesheet so you have to decide one or other. For it to work with how you've got it set up in the stylesheet it needs to be the former - with the class in the div tag not the link tag.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
parrothead517
Posts: 6
Joined: 4/4/2008
Status: offline
|
RE: NEED HELP!! - 4/6/2008 22:03:12
GENIUS!!! Thank you so so so so so so so much!!!!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
