Jump to content

Using more than one CSS stylesheet


tyme
 Share

Recommended Posts

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 by tyme
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Qchem
Link to comment
Share on other sites

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 by Darkelve
Link to comment
Share on other sites

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 by tyme
Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...