Forum Moderators: not2easy

Message Too Old, No Replies

Display links depending on page

DISPLAY: None,

         

howrich

3:59 pm on Dec 9, 2003 (gmt 0)

10+ Year Member



Hi,

I am trying to make a menu bar in CSS and want certain links to disappear depending on what page I am on. I have seen on [ericmeyeroncss.com...] website he has done the same thing, but I am so confused as to how to do it. It has something to do with media type and block display and none.

Can anyone explain how I can make things disappear on certain pages and reappear on others?

Ralph

TryAgain

5:21 pm on Dec 9, 2003 (gmt 0)

10+ Year Member



Seems to me that, depending on which page you are, he just links to a different css, for example:

one page:
<link rel="stylesheet" type="text/css" href="/ui/bonus.css" media="all">

another page:
<link rel="stylesheet" type="text/css" href="/ui/proj.css" media="all">

and different css sheets hide different div's

Reflection

6:12 pm on Dec 9, 2003 (gmt 0)

10+ Year Member



Here is an easier solution.

Give your body an id <body id="different">

If you want to hide certain links(make sure to give the links a class, ex: class="hide") when you are on the page that is labeled 'different' use the following css...

body#different a.hide {display:none;}

howrich

6:18 am on Dec 10, 2003 (gmt 0)

10+ Year Member



What is the differents beteween media="all" and media="screen" as that is really what is confusing me.

joolsm

1:11 pm on Dec 10, 2003 (gmt 0)

10+ Year Member



Howrich - having just had problems with print and screen @media rules and display:none which DrDoc has been very helpful with.

@media all covers aural, braille, embossed, handheld, print, projection, screen, tty and tv

Each one can be a separate rule.

EG I want #foo to display on screen but not in print.

So @media.print{
#foo{
display:none;
}
}

Bingo - it's on the screen but not printed.

Jools