• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 856
  • Last Modified:

if...then in CSS

Hello all, a friend of mine is trying to do something in CSS that I can do in a snap in ASP.

Essentially he has top navigation (below)
<div id="nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../portraits/index.html">Portraits</a></li>
<li><a href="../weddings/index.html">Weddings</a></li>
<li><a href="../product/index.html">Product</a></li>
<li><a href="../editorial/index.html">Editorial</a></li>
<li><a href="../contact/index.html">Contact</a></li>
</ul>
</div>

And when you're in a specific directory (take "Weddings" for example) that would have some sort of style to it.  Perhaps a background color or an underline, just something to signify that when you're IN that directory, it will be different from the rest of the navigation.


Here's the actual CSS if you need it:

#nav{
      position:relative;
      height:30px;
      
}

#nav ul{
      margin:1px 0px 0px 0px;
      padding:0px 0px 0px 50px;
}

#nav li{
      font-weight:bold;
      list-style:none;
      float:left;
      padding-right:22px;
}

#nav a:link,
#nav a:visited,
#nav a:active{
      color:#666;
      text-decoration:none;
      padding-left:6px;
      border-left:solid 3px #fff;
}

#nav a:hover{
      color:#333;
      border-left:solid 3px #666;
}

Any ideas on how to do this?
0
mattybrigh
Asked:
mattybrigh
  • 6
  • 4
  • 3
  • +2
5 Solutions
 
rstraderCommented:
how about something like this one from Dan at simplebits.com
 
http://www.simplebits.com/bits/css_tabs.html
0
 
GrandSchtroumpfCommented:
CSS is for styling, not for modifying content.
If you want to style your selected item differently, you'll need to identify it (using a class or an id):

<li class="selected"><a href="../weddings/index.html">Weddings</a></li>

You can do that either using some sever-side language (ASP, PHP, or any other) or using some client-side language (javascript + DOM), but not with CSS.
Then you use CSS to modify the way your selected item looks.
0
 
jeaton32Commented:
If I understand correctly, I believe what you're asking is possible with CSS.

A List Apart has an article about this very topic. A navigation bar with the currently selected page highlighted, done only with CSS.

Sliding Doors of CSS  -  http://www.alistapart.com/articles/slidingdoors/
Sliding Doors of CSS, Part II  -  http://www.alistapart.com/articles/slidingdoors2/

The two articles go through designing a top navigation bar, and then they identify the current tab through the use of conditional descendant selectors.

Hope this helps!

Josh
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Jakob_ECommented:
Hi,

Actually you CAN do a serverside solution (in this case ASP)...

Your menu with a few changes
1) A class nav[X] has been added to each li tag
2) Pages have ben changed to ASP
3) A QueryString "Section" have been added to each link
   (each section number matching the number in the li "nav" class)


<div id="nav">
  <ul>
    <li class="nav0"><a href="../index.asp?section=0">Home</a></li>
    <li class="nav1"><a href="../portraits/index.asp?section=1">Portraits</a></li>
    <li class="nav2"><a href="../weddings/index.asp?section=2">Weddings</a></li>
    <li class="nav3"><a href="../product/index.asp?section=3">Product</a></li>
    <li class="nav4"><a href="../editorial/index.asp?section=4">Editorial</a></li>
    <li class="nav5"><a href="../contact/index.asp?section=5">Contact</a></li>
  </ul>
</div>

On each page include your stylesheet (here named stylesheet.asp):

<style type="text/css" media="screen">
 @import "stylesheet.asp?<%= Request.QueryString %>";
</style>

As you see you are including an ASP file with your QueryString


Now create your stylesheet as an ASP file:

<%@ language="vbScript" %>
<% option explicit %>
<%
  ' Change file MIME Type to a css file
  Response.ContentType ="text/css"

  Dim section
  If Request.QueryString("section")<>"" Then
    Section = Request.QueryString("section")
  Else
    Section = 0
  End If
%>

/* Your styles */
#nav      { position:relative; height:30px; }
#nav ul  { margin:1px 0 0 0; padding:0 0 0 50px; }
#nav li   { font-weight:bold; list-style:none; float:left; padding-right:22px; }
#nav a:link,
#nav a:visited,
#nav a:active    { color:#666; text-decoration:none; padding-left:6px; border-left:solid 3px #fff; }
#nav a:hover    { color:#333; border-left:solid 3px #666; }

/* Section style
    If the stylesheet is included with section=2 the line below will show as
    .nav2 a { background:#efefef; color:#000 !important; }    
    Creating a special style on your "Weddings" menu item                            */

.nav<%= section %> a { background:#efefef; color:#000 !important; }



Best,
Jakob E


Note!  You can't use Request.ServerVariables("HTTP_REFERER") in your stylesheet.
Explorer do the stylesheet import before "execution" - pointing back at your previous page.
 








0
 
rstraderCommented:
you can do this with just HTML/XHTML and CSS

you will need to add an "id" to each li
<div>
<ul id="nav">
<li id="home_tab"><a href="../index.html">Home</a></li>
<li id="portraits_tab"><a href="../portraits/index.html">Portraits</a></li>
<li id="weddings_tab"><a href="../weddings/index.html">Weddings</a></li>
<li id="product_tab"><a href="../product/index.html">Product</a></li>
<li id="editorial_tab"><a href="../editorial/index.html">Editorial</a></li>
<li id="contact_tab"><a href="../contact/index.html">Contact</a></li>
</ul>
</div>


then you need to add the same id to the "body" tag for each respective index.html page

so ../index.html would have <body id="home">
../portraits/indes.html would have <body id="portraits">
and you get the point

then you can write a single CSS declaration that "highlights" each selected tab like so

body#home #home_tab a,
body#portraits #portraits_tab a,
body#weddings #weddings_tab a,
body#product #product_tab a,
body#editorial #editorial_tab a,
body#contact #contact_tab a, {
    border-bottom: 4px solid #696
    padding-bottom: 2px;
    color: #363;
}

or whatever styling you want to apply to the tab that one would be an underline or to use an image you could
...
body#contact #contact_tab a, {
color: #000;
background: url(image.gif) no-repeat bottom center;
}


HTH -- I got this from Dan Cederholm "Web Standards Solutions" book when I was trying to do the same thing
0
 
GrandSchtroumpfCommented:
> you can do this with just HTML/XHTML and CSS
The only difference is that you mark the <body> instead of marking the selected <li>.
The only advantage of that technique is when you only use SSI (and no server-side scripting language) and that you want to place your the code for the navigation in an include.
The main inconvenient is that you have to modify the CSS whenever you add a new link... The "standards" say that you should separate the presentation (CSS) from the content (HTML)... so that's not a very good example of following the "standards".
0
 
rstraderCommented:
>GrandSchtroumpf
The "standards" say that you should separate the presentation (CSS) from the content (HTML)... so that's not a very good example of following the "standards".

I don't think this mixes presentation and content, could you explain what you mean?

you also said
"You can do that either using some sever-side language (ASP, PHP, or any other) or using some client-side language (javascript + DOM), but not with CSS."

When I saw this technique, I was amazed at the flexibility of CSS by using an id or even class on the <body> element to mark what page the user is on.  It is a creative CSS solution for "a friend of mine is trying to do something in CSS that I can do in a snap in ASP".

No disrespect intended, just hope I didn't misunderstand the original question,  if I did - thanks for correcting me. ;o)

0
 
GrandSchtroumpfCommented:
> I don't think this mixes presentation and content, could you explain what you mean?
It does in a way.  If you want to add a link (modify the content without altering its structure), you also need to add a selector to your css ruleset (modify presentation).

Using a class or id on the body is an excellent technique that i use very often, but i don't think it's appropriate in this case.  As i said, the only difference is that you mark the <body> instead of marking the selected <li>.  If you can mark the <body> why can't you mark the <li> instead?
0
 
Jakob_ECommented:
> I don't think this mixes presentation and content, could you explain what you mean?
I agree with GrandSchtroumpf


... and one more sollution:
If you can't use serverside scripting you could try javascript to set your active menuitem:

1) Create a class holding the style of the active menu element
#nav .selected { background:#efefef; color:#000 !important; }

2) Create a javascript function to compare the document location with the href's in your menu.
    If location and menu href equals then the class is applied to the parent li element

function setActiveMenu(){
  var links=document.getElementById('nav').getElementsByTagName('a');
  for(var i=0;i<links.length;i++){
    if(document.location==links[i].href){links[i].parentNode.className='selected';}
  }
}

3) When your page has rendered (onload) call the function setActiveMenu

~ Jakob E


0
 
GrandSchtroumpfCommented:
> ... and one more sollution:
> If you can't use serverside scripting you could try javascript to set your active menuitem:
That was specified in my first post  ;°)

The idea is that you have to use some kind of marker somewhere on your page.  How you add it does not matter.  So, the answer is NO, you cannot do that with CSS alone.
0
 
Jakob_ECommented:
@GrandSchtroumpf
What I ment was - If serveside scripting is not available on the webserver.
Look at my example on how to do that (4'th post from the top).
It CAN be done using serverside scripting :)

~ Jakob E
0
 
Jakob_ECommented:
@GrandSchtroumpf
Well I read your post again and.. I do not disagree with you it's a matter of interpretation.

If you think of a sollution using only css syntax you're right. However the result of the serverside
manouvre is a cascading style sheet and in terms of setting up presentation seperated from
structure I think it counts as such.

If possiple (serverside scripting is available) I'll prefer using that since you're in complete control
of the result unlike javascript (if disabled on the client).  And as you wisely point out it also keeps
things seperated allowing you to add new links without changing your css or do we call it asp ;)

~ Jakob E
 

0
 
MrRioCommented:
Hey, to have styling unique to each page the best way (IMHO) is to class the body tag:

Portrait page has <body class="portraits">
Wedding page has <body class="weddings">

and so on...

then your html looks like this:

<div id="nav">
<ul>
<li id="homeLink"><a href="../index.html">Home</a></li>
<li id="portraitsLink"><a href="../portraits/index.html">Portraits</a></li>
<li id="weddingsLink"><a href="../weddings/index.html">Weddings</a></li>
<li id="productLink"><a href="../product/index.html">Product</a></li>
<li id="editorialLink"><a href="../editorial/index.html">Editorial</a></li>
<li id="contactLink"><a href="../contact/index.html">Contact</a></li>
</ul>
</div>

Then your beautiful css will look like:

#homeLink { /* What is normally looks like */ }
#portraitsLink { /* What is normally looks like */ }
#weddingsLink { /* What is normally looks like */ }

etc.. (this lets you have different backgrounds for each)
and for your selected look:

.portraits li#portraitsLink { /* What is looks like selected */ }

So.. IF the page is portraits (defined by our class) THEN do this style to it!
This is the most flexible way to do it, and allows you to reuse that class to restyle all sorts of other things per-page.

If the style applied to selected links is the same then simply seperate each one with commas:
.portraits #portraitsLink, .weddings #weddingsLink, etc { background-color: #333; }

Regards,
James
0
 
GrandSchtroumpfCommented:
Thanks for that effort MrRio, but that solution has already been posted (but with a body id instead of a body class).

The problem is that what you see as flexible, i see as the opposite of flexible.
The idea behind CSS is to define styling for a generic sturcture.  This way you can create new content (HTML) and apply your already defined style to get your final page.  If you start using per-page style, then it becomes non-flexible.
Also the W3C WAI says that you should give a consistant look accross the entire site, so per-page styling should not be needed.

However, giving a class to the body for a "class" of pages is perfectly fine and encourraged.  For instance you can use <body class="BookDetails"> for all your "book details" pages and <body class="AuthorDetails"> for all your "author details" pages.  This way you keep it generic.  You can add new pages without needing to change your style.
For a small site with only a few pages, you don't absolutely need to be generic, but it's always better to stay as generic as possible.

I already explained my point of view in the previous posts, but it does not hurt to clarify things.

=)
0
 
MrRioCommented:
Ah ok, I didn't realise this solution had already been posted and I take your point, I would of first suggested the simplest solution, adding class="selected" to the selected item but this has also been mentioned.
0
 
GrandSchtroumpfCommented:
no problemo, we're all here to discuss.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now