Different CSS for Menu & Exhibits

aherrmann / 2010-01-16 05:45:11   

Hello,

first off, I searched for an answer to my question, yet to no avail. This is what I am attempting to do:

I would like the links in the menu to have a different behavior than the links within the exhibits. This is my site:

http://www.thedeskof.org

As you can see, all links have a dotted underline in a:link, a:hover, and a:visited state. When in the a:hover state, the line disappears and instead a gray box forms around the type. This is exactly what I want the links to do within each exhibit, BUT, and as you can see, the links have the same behavior in the menu. There I would to ho have them with no underline whatsoever, just the gray form around it when being hovered over.

I can’t get it to work so links in the exhibit behave differently than the ones in the menu. It’s always a trade-off: either they’re all dot-underlined/gray box, or none have an underline and just the gray box when hovered over.

I am not very CSS/web savvy, but I hope I could get my problem across. Any help is greatly appreciated!

Alex

aherrmann / 2010-01-16 15:26:21   

It appears that I have placed this in the wrong category, my apologies for that…

kim_c / 2010-01-16 15:59:12   

i think #menu a {properties} and #menu a:hover {properties} will be enough. Then all the links inside the menu will follow that.

aherrmann / 2010-01-16 17:55:34   

I’m not quite sure I understand what you mean. You’re saying that I add ‘a properties’ to the #menu section in the style.css?

This is the current code:

  1. body {
  2. ¬†¬†¬†¬†font-size: 10px;
  3. ¬†¬†¬†¬†font-family: Verdana, sans-serif;
  4. ¬†¬†¬†¬†background: #fff;
  5. }

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; color: #000000; border-bottom:1px dotted #cccccc;}
a:active { text-decoration: none; border-bottom:1px dotted #cccccc;}
a:visited { text-decoration: none; color: #000000; border-bottom:1px dotted #cccccc;}
a:hover { text-decoration: none; color: #ffffff; background: #cccccc; }

a img { border: none; }

#menu {
    width: 200px;
overflow: auto;
top: 0;
bottom: 0;
    left: 0;
position: fixed;
height: 100%;
background-color: #ffffff;
}

#menu ul {
    list-style: none;
    margin: 0 0 0 0;
}

#menu ul li.section-title { }
#menu li.section-title { font-weight: bold; }

AandM / 2010-01-17 04:06:45   

This is what I did and it works fine.

Under the a:link etc. list that you've already got add new definitions for #menu:

  1. #menu a:hover { text-decoration: none; color: #FFF; background-color: #000; }
  2. #menu li.active a { text-decoration: none; color: #FFF; background-color: #FF6A6A; }
  3. #menu li.active a:after { content: " >>>"; letter-spacing: -2px; }

The last two highlight the link in the menu which is currently open in the main window.

brainhurricano / 2010-06-17 00:18:45   

Hey there,
I have the same issue, except the other way around. I like how my menu-links look like, but would like to make adjustments to the links displayed in the exhibits. This is the only thread I found coming close to the topic (which surprised me). So I tried fitting it to my problem, adding a section
#menu a:link
#menu a:active etc.
into which i copy the style that i like for the menu, so i could make changes for all other links in the section on the top
a:link { }
a:active { } etc.
but they don't display. it looks the same. i wasn't sure what the reason was, and added the #content selectors in front of them, hoping they would be recognized. wrong.
soo... i don't know. so far i really like searching and playing, but here i'd appreciate a hint.
i think it must have to do something with either creating an id, a contextual selector or a class. but i don't know which and how it would be called, so indexhibit recognizes it.
All the best and thank you. Indexhibit is amazing. Eva

P.S. My website is www.brainhurricano.org

P.P.S. On a different note, but link-related: I don't understand why the text next to my embedded video in the videography section is showing up as a link. Ideas?
(I seem to remember that i mistakenly entered a < a > < / a >, wrapping the text at some point? Now it disappeared in the textbox but could that be it? If so, how can I undo this?

arsondpi / 2010-06-17 08:31:12   

I'm not sure I understand. In your contact page menu links and contact link behave differently. Indeed your #content a:link and #menu a:link are working. Hold down shift and hit refresh a few times in case of a browser cache error.

Plus you need to validate your page - for example In your pre-nav are you have:

  1. <a href='http://www.brainhurricano.org/index.php'/Home/' />Home</a>

Which has wrong syntax...

brainhurricano / 2010-06-17 14:37:33   

Alright! Usually my Firefox is pretty good about refreshing. Now, I had to delete the history, and indeed my declarations are working. Nice!

Thanks for pointing out my pre-nav bug. I fixed what I had entered in the pre-nav area, and I think it is good now. I also found a CSS validator and checked (despite not knowing how "validating one's page" really works and what it is for) and I got:
I/O Error: Unknown mime type : text/html,text/html;charset=utf-8

Now, what do I do with this?
Thaaaank yooouuu!

This thread has been closed, thank you.