tyme Posted March 11, 2004 Report Share Posted March 11, 2004 (edited) can you use more than one style sheet if you're using php to load more that one file? i.e., on my page I have the first page, which then loads the two side menus and the info at the bottom (all seperate PHP pages) - can i have a differeny style sheet for the side menus? 'cuz that would rule... Edited March 11, 2004 by tyme Quote Link to comment Share on other sites More sharing options...
scoopy Posted March 11, 2004 Report Share Posted March 11, 2004 can you use more than one style sheet Surely :D Alternative stylesheets http://www.w3.org/Style/Examples/007/alternatives.html Quote Link to comment Share on other sites More sharing options...
tyme Posted March 11, 2004 Author Report Share Posted March 11, 2004 i'm not sure that's what i was looking for, and if it is then i don't understand :-/ Quote Link to comment Share on other sites More sharing options...
scoopy Posted March 11, 2004 Report Share Posted March 11, 2004 Sorry, It was I who confused things here. Alternative stylesheets are intended to give website visitors a choice in how they view your pages. I would still think what you want is possible. Just give your stylesheets diff names and use diff classes. Should work. Quote Link to comment Share on other sites More sharing options...
tyme Posted March 12, 2004 Author Report Share Posted March 12, 2004 problem is i want to have different styles for links, depending on what part of the page... so for, say, the left side there's a bar above, below, and to the left of the link text when you hover, and on the right side there's a bar above, below, and to the right of the link when you hover on it... see what I'm saying? Quote Link to comment Share on other sites More sharing options...
scoopy Posted March 12, 2004 Report Share Posted March 12, 2004 I think I am beginning to understand... maybe not ;) try this: comment out this in the css: /* .boxright { border-style: none dashed none none; border-color: black; border-bottom-width: 1px; border-right-width: 1px; } .boxleft { border-style: none none none dashed; border-color: black; border-bottom-width: 1px; border-left-width: 1px; } */ add this: a:hover.left { color: silver; border-style: dashed none dashed dashed; border-color: black; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; } a:hover.right { color: silver; border-style: dashed dashed dashed none; border-color: black; border-top-width: 1px; border-bottom-width: 1px; border-right-width: 1px; then make your links look like this: <a href="http://www.mandrakeusers.org/" class="left">†Mandrake Users</a><br> Quote Link to comment Share on other sites More sharing options...
tyme Posted March 12, 2004 Author Report Share Posted March 12, 2004 didn't work :( but let's try something different... what i'd REALLY like is if the dashed lines under and above the links on the sides went the whole way across, instead of just from the left side to the end of the word. using: makes things ugly....got any better ideas? (yes i'm will to recode the page...i'd really like to know enough CSS to rid myself of tables) Quote Link to comment Share on other sites More sharing options...
scoopy Posted March 12, 2004 Report Share Posted March 12, 2004 Here's what I was getting with above code. (I notice I missed a bracket in there) Quote Link to comment Share on other sites More sharing options...
scoopy Posted March 12, 2004 Report Share Posted March 12, 2004 what i'd REALLY like is if the dashed lines under and above the links on the sides went the whole way across, instead of just from the left side to the end of the word. I was looking at something like this for my page. I found an example I was going to "reverse engineer" and customize for my site. Attached sample uses javascript and mouseovers. IF we get anymore involved in this... we will have to call in the master... :P PAUL ! (you have seen his page... right ?) http://www.loudas.com/ NavMouseOvers.html Quote Link to comment Share on other sites More sharing options...
Darkelve Posted March 12, 2004 Report Share Posted March 12, 2004 Tyme, I don't think you need any scripting for this at all. Scoopy was right suggesting to use different selectors, but I'm not sure why it doesn't work. Here's how I would do it and I'm sure this method works. You can see that on our homepage http://www.delijn.be/ , the top navigation bar is divided into two parts: the bottom part (longest line) and the top part. As you can see the links in the top part use underlines, the links in the bottom part no underlines and change color on hovering. You can find the style rules for this in www.delijn.be/css/sub.css All you have to do is to 'nest' your selectors in some kind of way, then identify the building blocks of your page. Say you have three building blocks: <div id="navigation">List of links here</div> <div id="content">Content here</div> <div id="footer">A footer</div> Then you could give all links in a particular style block a different presentation by using e.g. #navigation a:link,a:visited, a:active {color: #000000; text-decoration: none;} #content a:link,a:visited, a:active {color: #0033cc; text-decoration: underline;} #content a:hover {text-decoration: none;} #footer a:link,a:visited, a:active {color: #fffffff; text-decoration: underline, overline;} For more fine control, you can give a class to your links: <a href="link.html" class="nav">Option 1</a> <a href="link2.html" class="nav">Option 2</a> with: a.nav {text-decoration: none; font-weight: bold;} Hope this helps! Darkelve Quote Link to comment Share on other sites More sharing options...
Qchem Posted March 12, 2004 Report Share Posted March 12, 2004 (edited) I don't use php so I'm probably barking up the wrong tree, but couldn't you have each side menu as a different div, then you can set specifics for that div eg. div#lefmenu a:hover {border-color: rgb(30%,30%,60%);} div#rightmenu a:hover {border-color: rgb(50%,50%,60%);} Obviously changing these colours for what you want. If this isn't what you want perhaps you can link to the site..... HTH, [edit] looks like I was beaten to it by two mins - damn Edited March 12, 2004 by Qchem Quote Link to comment Share on other sites More sharing options...
Darkelve Posted March 12, 2004 Report Share Posted March 12, 2004 (edited) Reading this again, I think I'm starting to understand a little better. Basically, you want to have the 'hover' effects on your links to be the whole width of your menu, right? Remember that the styles you apply to the links themselves, will be applied to their containing box, which is somewhat smaller than the menu their in. Imagine looking how far the 'hover'-lines reach then drawing a rectangular box around the links, that should give you an idea how big they are. Perhaps you could try setting a width for your links so their containing boxes align exactly with the edges of your menu. Although I have to say I did not look at your website in detail. So I might be off the mark by a bit. But I do remember when playing around with CSS I had a problem like this, and solved it through similar means. Darkelve Edited March 12, 2004 by Darkelve Quote Link to comment Share on other sites More sharing options...
tyme Posted March 12, 2004 Author Report Share Posted March 12, 2004 (edited) how do i set a width for my links? cybrjackle: i had slightly changed your code and not commented out the other section, so maybe i did something wrong...i can't check it right now, as i'm at work and ssh is blocked (both inbound and outbound). but i'm probably going to work on this tonight (along with a couple other projects i want to do...) Edited March 12, 2004 by tyme Quote Link to comment Share on other sites More sharing options...
Qchem Posted March 12, 2004 Report Share Posted March 12, 2004 Try using the width property, you might need to place the links in seperate divs and I've not tired this... Quote Link to comment Share on other sites More sharing options...
tyme Posted March 13, 2004 Author Report Share Posted March 13, 2004 all i needed was: display: block; to do the full-width lining. i've done a decent amount of modifying of my css, not a whole lot but a good bit. now if only i could get rid of that shifting that occurs when you go over a link....i think it has to do w/padding or one of the other options but i can't figure it out :( Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.