whatnow Posted March 12, 2006 Share Posted March 12, 2006 Calling all experts.I have a link that is a header (h1). I am trying to make it so that when any part of that link is hovered over the first part changes to a lighter color and the second part, rest of the link, changes to a darker color. this would happen when your cursor moves over any part of the link, the change would happen to both parts of the link at the same time.I have tried serveral different methods, and I got it so that the color changes correctly, BUT only for it's section. I need it so that when any part of the link is hightlighted both sections change to different specified colors. and also I can post the last effort.Any Ideas? :)Does this make sense? Is the problem understood?Thanks Link to comment Share on other sites More sharing options...
scott100 Posted March 12, 2006 Share Posted March 12, 2006 Hi there, if you use the span tag within the anchor tag you can use different colors, here's one i made earlier <head><style>a.example{color: blue;text-decoration: none}a:hover.example{color: lightblue;text-decoration: underline} a.example span{color: blue;text-decoration: none}a:hover.example span{color: darkblue;text-decoration: underline} </style></head><body><h1><a href="#" class="example">This <span>is a link</span></a></h1></body> Link to comment Share on other sites More sharing options...
whatnow Posted March 12, 2006 Author Share Posted March 12, 2006 thanks, I'll try it. let you know how things work. Link to comment Share on other sites More sharing options...
whatnow Posted March 13, 2006 Author Share Posted March 13, 2006 thank you that was what I needed. I tried and tried and could not figure it out.would you call the 'span' a child? Link to comment Share on other sites More sharing options...
scott100 Posted March 13, 2006 Share Posted March 13, 2006 Glad to help.In CSS a parent element is an element that contains other elements. All elements that are contained within that parent are called "child" elements.So that means the span is a child (of a child). The span is located within the anchor which is located within the Header. Link to comment Share on other sites More sharing options...
whatnow Posted March 13, 2006 Author Share Posted March 13, 2006 Hi there, if you use the span tag within the anchor tag you can use different colors, here's one i made earlier <head><style>a.example{color: blue;text-decoration: none}a:hover.example{color: lightblue;text-decoration: underline} a.example span{color: blue;text-decoration: none}a:hover.example span{color: darkblue;text-decoration: underline} </style></head><body><h1><a href="#" class="example">This <span>is a link</span></a></h1></body> <{POST_SNAPBACK}> thanks for your help.this does not do quite what I need. this code here a.example span needs to be and show up red let's say. if I change it to red the browser does not display it red. is this maybe cause there is a line above with the hover attribute?ideas-- other work aroundsI tried to put them in different orders and got different resultsbut not the desired results.was reading somewhere vistited had to be before hover etc. I am out of ideas. Link to comment Share on other sites More sharing options...
scott100 Posted March 13, 2006 Share Posted March 13, 2006 this does not do quite what I need. this code here a.example span needs to be and show up red let's say. if I change it to red the browser does not display it red. <{POST_SNAPBACK}> I am a bit confused here I have changed the a.example span to red and it works fine Have i missed something, i have also changed it so that all sections appear as different colors, if i have misunderstood use these colors to explain what you want to happen.cheers<head><style>a.example{color: blue;text-decoration: none}a:hover.example{color: green;text-decoration: underline}a.example span{color: red;text-decoration: none}a:hover.example span{color: yellow;text-decoration: underline}</style></head><body><h1><a href="#" class="example">This <span>is a link</span></a></h1></body> Link to comment Share on other sites More sharing options...
whatnow Posted March 14, 2006 Author Share Posted March 14, 2006 well now it works!!!!!!!!!!!!! didn't before.'m checking to see what's going on. maybe a typo . . . .really thank u for helping Link to comment Share on other sites More sharing options...
whatnow Posted March 14, 2006 Author Share Posted March 14, 2006 ok here's a list of questions.1. when do I need a . 'dot' a : 'colon' and a space in css.I know you can not have a space forgot where but what is the logic of a.example span?2. is it better form to have an anchor <a href> inside a header <h1>or other way around? (in html)ex: <h1><a href="file.html">hello world</a></h1> vs <a href="file.html"><h1>hello world</h1></a>3. there is no need for id right, because everything that id does you can do the same thing with class, right? correct me. id is for ease of use and easier to program with.ex #navbar{}<div id=navbar>vs.navbar{}<div class="navbar">.5 there must be a faq or maybe a white paper that answers stuff like this. I have looked around the net abit, but there is so much info! w3schools is a good resource. but have not been able to answers these so far.this is not a expert question and embrassed after asking for experts. I thought I needed the top experts cause I had pulled my hair out trying to figure this site out earlier. Link to comment Share on other sites More sharing options...
scott100 Posted March 14, 2006 Share Posted March 14, 2006 1. div.p = styles all p's contained within a div onlydiv p = styles all div and p's: Psuedo class for anchor tag ie hover2. i dont think it makes a difference as long as they are well formed<a><h1></h1></a> = good<a><h1></a></h1> = bad3. class is used when you want to apply styles to more than one element. id is used when you want to style only one element, because id's are unique and no 2 elements should have the same one. eg what if you wanted to change one style of a tag belonging to a class, you could access it by it's id.5. i got all my info from a bookHope i've answered all correctly, if not others are free to correct. Link to comment Share on other sites More sharing options...
whatnow Posted March 14, 2006 Author Share Posted March 14, 2006 1. OK OK, alright, thanks , am a happy camper now3. had n't thought of that. make sensethanks scott100, you r a BIG help, make sure your boss know that Link to comment Share on other sites More sharing options...
boen_robot Posted March 14, 2006 Share Posted March 14, 2006 1. div.p = styles all p's contained within a div onlydiv p = styles all div and p's That's not exactly right. Here yo go:div.p = styles every div with class p.div p = styles all p's contained within a div only.div, p = styles all div and p's Link to comment Share on other sites More sharing options...
scott100 Posted March 14, 2006 Share Posted March 14, 2006 Thanks boen robot, i couldnt quite remember what the order was. Link to comment Share on other sites More sharing options...
whatnow Posted March 14, 2006 Author Share Posted March 14, 2006 That's not exactly right. Here yo go:div.p = styles every div with class p.div p = styles all p's contained within a div only.div, p = styles all div and p's<{POST_SNAPBACK}> so is it correct to say, div.p is the same thing as div p?wait, that's not right. can you expand on that?thanks Link to comment Share on other sites More sharing options...
boen_robot Posted March 14, 2006 Share Posted March 14, 2006 so is it correct to say, div.p is the same thing as div p?wait, that's not right. can you expand on that?thanks The codediv.p {CSS properties here} Will apply the CSS properties to all divs in the (X)HTML who look like this: <div class="p">Some content to be styled</div><div>But this content won't, because it doesn't have a class p.</div> And a code in the CSS which looks like this: div p {CSS properties here} Will apply the styles to all p elements inside div ones, like this: <p>This content is not going to be styled.</p><div>This content is not be styled either, but <p>this one will, because this p element is inside a div.</p><div> Following the above logic, the code: div, p {CSS properties here} Will style both div and p elements. Example: <p>This element is going to be styled</p><div>And this one too</div> Link to comment Share on other sites More sharing options...
scott100 Posted March 14, 2006 Share Posted March 14, 2006 div.p is probably confusing you - .p has nothing to do with a paragraph it's a class name ie <div class="p">could easily bediv.mydiv<div class="mydiv"> Link to comment Share on other sites More sharing options...
Jonas Posted March 14, 2006 Share Posted March 14, 2006 And there's also styling based on attibutes, for example if you have a table cell that spans two table columns. td[colspan=2] {}combined with the following html:<table><tr><td colspan="2">Content here will be styled</td></tr><tr><td>Content not styled</td><td>Content not styled</td></tr></table> I know (X)HTML is moving away from attributes to CSS, but I can see this fully becoming useful when all browsers support form styling, in a transition period before we get fully functional xforms, so you can for example style all input tags with attribute type="button" or type="textbox"input[type=submit] {color: red;}<input type="button" value="Submit" />Will give a submit button with red text.Then you can have textboxes with gray background:input[type=textbox] {background-color: #ccc;}<input type="textbox" /> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now