Using More Than One Stylesheet - Same Page

[Guest]

I want to use a stylesheet for my general page layout (text, background) so I
can have a uniform site, but I also want to use a separate CSS for my
navigation so I can have several navigation areas on the same page.

For example, let's say I want a CSS for the left navigation, and a different
CSS for links on the right, but I also want the remainder of the page to be
uniform with the other pages.

Can anybody please explain how to do that or provide some examples?

P.S. I give each

 

[Trevor L.]

I want to use a stylesheet for my general page layout (text,
background) so I can have a uniform site, but I also want to use a
separate CSS for my navigation so I can have several navigation areas
on the same page.

For example, let's say I want a CSS for the left navigation, and a
different CSS for links on the right, but I also want the remainder
of the page to be uniform with the other pages.

Can anybody please explain how to do that or provide some examples?

P.S. I give each

I am flying by the seat of my pants here, because I don't quite know how
your page is set up.

One way to do it would be to place each of:
General page
Left navigation
Links on righr
in a separate <div> each with its own class
say
<div id="general" class="general">
<div id="left" class="left">
<div id="right" class="right">

Then set up your CSS with indvidual classes
..general {
position: absolute;
width: 70%; left 15%;
height: 100%;
background-image: url("images/display/04-08-24-1-bird-bath.jpg");
background-repeat: repeat;
background-attachment: fixed;
background-color: white ;
font-family: verdana,arial,helvetica,sans-serif;
font-size: small ;
color: black;
text-align: left;
text-decoration: none;
padding: 0;
margin: 0 auto;
border: black solid 1px;
/* add anything you want in here */
}

Similarly for
..left {
width 15%; left 0;
height: 100%;
/* add anything you want in here */
}
..right{
width 15%; left 85%;
height: 100%;
/* add anything you want in here */
}

Does this help at all?

 

[Murray]

You do not need to use separate stylesheets. It can all be combined in a
single one.

For multiple link styles on the same page, read these -

Pseudo-classes and container styles are what you need - here are some
tutorials.
http://www.mako4css.com
http://www.thepattysite.com/linkstyles1.cfm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm

 

[Kevin Spencer]

One thing to remember about Cascading Style Sheets is the first word:
"Cascading." They have a feature that is not often taken full advantage of,
in that you can define multiple styles for the same types of objects in
multiple style sheets. The order in which they appear determines which style
sheet is applied to the elements in the page. So, if you define a style for
a certain type of element at the top of the page, it affects all elements
below that, until it hits another style sheet that re-defines the style for
that element, after which it applies the second style. This might be useful
for your purposes.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.

 

[Chris Leeds, MVP-FrontPage]

you don't really need to do this.
you can set up a different class or ID for your navigational section and all
will be well.
Most of the time multiple css sheets are used for different presentations
(Print, Screen, Mobile, even brail).
If you look at www.contentseed.com I'm using multiple sheets with the
@import declaration to have a different print presentation. if you view it
with IE, and hit file/ print preview you'll see that the left navigation is
gone and I've switched out the header graphic. I did the graphic switch
because my thinking was, if it's important enough to someone to print it out
they should have the toll-free number (it's not like the links will work
from paper)

HTH

--
Chris Leeds,
Microsoft MVP-FrontPage

If you make web sites for other people, you should check out ContentSeed:
http://contentseed.com/