13 replies [Last post]
jttotoro
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2005-08-04
Posts: 7
Points: 0

I am in the middle of migrating a static xhtml website to a Content Management System (CMS). The site was developed by a hired vendor and is css layout, standards compliant etc... they did a great job. Now as I move it over to our CMS i am noticing a problem of using some div tags with some of the proprietary (java) navigation tags in the template building.

In the left hand navigation the sub navs that appear as a block item
On this page the third level or "subnav" contains "Traditional Undergrad" , "International Students" etc...
http://www.norwich.edu/admissions/applying.html

Currently on the static site the code in the left hand nav is:
<div id="leftnav">
<a href="applying.html">Applying</a>
<div id="subnav">
<a href="undergrad.html">Traditional Undergrad</a>
<a href="international.html">International Students</a>
<a href="transfer.html">Transfer Students</a>
<a href="architecture.html">5 Year Architecture Program</a>
</div>
<a href="quickfacts.html">Quick Facts</a>

In the CMS you CANNOT put that subnav div around those subnav items (java poop)

I tried assigning a class to each item and no luck (changed the style sheet by replacing the #subnav with .subnav)
<div id="leftnav">
<a href="applying.html">Applying</a>

<a href="undergrad.html"class="subnav">Traditional Undergrad</a>
<a href="international.html"class="subnav">International Students</a>
<a href="transfer.html"class="subnav">Transfer Students</a>
<a href="architecture.html" class="subnav">5 Year Architecture Program</a>

<a href="quickfacts.html">Quick Facts</a>

So my workaround in the CMS template was a div for each link in the java tag so:
<div id="leftnav">
<a href="applying.html">Applying</a>

<div id="subnav"><a href="undergrad.html">Traditional Undergrad</a></div>
<div id="subnav"><a href="international.html">International Students</a></div>
<div id="subnav"><a href="transfer.html">Transfer Students</a></div>
<div id="subnav"><a href="architecture.html">5 Year Architecture Program</a></div>

<a href="quickfacts.html">Quick Facts</a>

My Question:
Is this just bad practice? To many divs?
Can I do this a better way and stay compliant?
Thanks!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Is this Div-itis or valid workaround?

can you use an unordered list?

Anonymous
Anonymous's picture
Guru

Re: Is this Div-itis or valid workaround?

jttotoro wrote:
...the proprietary (java) navigation tags...
I was going to say to dump the java but I did not see any embedded in your markup. :?

Quote:
<div id="subnav"><a href="undergrad.html">Traditional Undergrad</a></div> 
<div id="subnav"><a href="international.html">International Students</a></div> 
<div id="subnav"><a href="transfer.html">Transfer Students</a></div> 
<div id="subnav"><a href="architecture.html">5 Year Architecture Program</a></div>
You can only use an ID name once per page. If you want a class named "subnav" instead of surrounding the anchor with a div tag why not do something like this:<a class="subnav" href="transfer.html">Transfer Students</a>

jttotoro
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2005-08-04
Posts: 7
Points: 0

Is this Div-itis or valid workaround?

Cant dump the java as it dictates the navigation in the cms.

In my example 2 I tried the class="subnav" it does not work. tried it a number of ways... also tried the <span class="subnav">

You make a great point on the naming of the ID once per page. forgot about that.

maybe ill post some pages might be easier to illlustrate that way
Thanks for your help ill post again in a bit

Anonymous
Anonymous's picture
Guru

Is this Div-itis or valid workaround?

jttotoro wrote:
Cant dump the java as it dictates the navigation in the cms.
Uh, there is no java. :? :? :?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Is this Div-itis or valid workaround?

When you say "Java" do you mean Java or Javascript?

Javascript can be used for menuing systems, especially ones with nesting involved, to show/hide nested elements. One of the ways that JS gets the handle of an object is GetElementbyId(whatever) which will search through the document object tree until if finds something with id="whatever". That is why ids must be unique. For this type of thing you have to be very very clear on your terminology.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

jttotoro
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2005-08-04
Posts: 7
Points: 0

Is this Div-itis or valid workaround?

Let me clarify:
This is proprietary Java (not javascript) used in the CMS (more specifically the CMS is built off Documentum). There is no substitute for the Java nav tags as it dictates the whole structure of the website built within the CMS. This java nav tag prevents me from putting a div id around the subnav elements. So I need to find a way besides using a div id to apply a style ("subnav") to the subnav elements. The class thing doesnt seem to work... any suggestions?

I did not nclude the java tags in the code because this is at the template level of development. The final output on our webserver though is straight xhtml. The CMS uses .jsp templates and stores the content in xml docs... combines those to output html (xhtml)
if i get time today ill show you the template programming.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Is this Div-itis or valid workaround?

#subnav {
	background: url(../images/common/subnav_bottom.gif) #808080 bottom no-repeat;
	padding: 0 0 1px 0;
}

#subnav a, #subnav a:visited {
	background-image: none !important;
	text-transform: none;
	padding: 3px 15px;
}

The above currently styles your subnav links using a contextual selector on the #subnav a links - it works well and looks good.

You demonstrate above that you can add classes or ids to the individual link items, but you can't wrap anything around them because it is hardcoded in the java. How are the links being generated - are they being read from a table and then wrapped in code, read as a block, or what? It is not clear to me why this cannot be wrapped as a subnav. Applying a .subnav class to the individual links is not as good because you want to ensure the entire background is covered by styling the div (coding the a's alone sometimes leaves 1px gaps in some browsers). If you are able to code the listed items, why can't the first link be:<div id="subnav"><a href="undergrad.html">Traditional Undergrad</a>and the last link be<a href="architecture.html">5 Year Architecture Program</a></div>The critical restriction on what you want to do still escapes me.

If you had <a class="subnav" ...>with the style

a.subnav {
	margin-top:-1px;/*gets rid of gaps*/
	padding: 4px 15px 3px ;/*increase top padding by 1px to compensate for -ve margin*/
	background-color: rgb(128, 128, 128);
	text-transform: none;
}
I think it would work and look about the same.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

jttotoro
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2005-08-04
Posts: 7
Points: 0

Is this Div-itis or valid workaround?

Quote:
The critical restriction on what you want to do still escapes me.

Its a crappy proprietary custom java tag thing. The logic escapes me as well!! You set numerical levels for your navigation and it reads through in a way that you cant wrap a div id around it... believe me i let the developers know... i guess the next patch fixes this

I a m going to give your code a shot. Also heard form another developer who suggested making subnav a class and adding !important; at the end of each attribute... didnt work... ill post a test and send a link
Thanks for all your help![/code]

jttotoro
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2005-08-04
Posts: 7
Points: 0

Is this Div-itis or valid workaround?

Alrighty
posted your solution
http://www.joshuaturner.net/nu/css/admissions/applying_class.html

your way works except cannot seem to get rid of the attributes specified in the "leftnav" div. It seems to be inheriting the all caps (text transform:) from the "leftnav" and NOT inheriting the over state of a dark grey background... working on it... any suggestions welcome

PS please excuse the sloppy css vocabulary in this post
Thanks again!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Is this Div-itis or valid workaround?

First of all, always be careful using !important - it can bite you. It is the last ditch hack for when a browser doesn't properly follow the cascade or weigh specificity. Here is what I would do. Using this code

#leftnav a.subnav:link,
#leftnav a.subnav:visited { 
 margin-top:-1px;/*gets rid of gaps*/ 
 padding: 4px 15px 3px ;/*increase top padding by 1px to compensate for -ve margin*/ 
 background-color: #808080 ; 
 background-image:none;
 text-transform: none; 
}
I get what I think you want. I made the styles stick by increasing the specificity through adding additional context with the #leftnav . An ID selector has way more specificity than anything else. Applying the same principles I think you can figure out how to do the hover states.

And remember, everything I just said is !important.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

jttotoro
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2005-08-04
Posts: 7
Points: 0

Is this Div-itis or valid workaround?

Laughing out loud Laughing out loud Laughing out loud Laughing out loud

Success!

Quote:
I think you can figure out how to do the hover states.

hmmm the socratic method.. i think you give me to much credit..
Is this right..? i dont think it is.

#leftnav a.subnav:over,
#leftnav a.subnav:hover {
background-color: #666;
}

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Is this Div-itis or valid workaround?

tsk tsk

#leftnav a.subnav:hover,
#leftnav a.subnav:active {
background-color: #666;
}

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

jttotoro
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2005-08-04
Posts: 7
Points: 0

Is this Div-itis or valid workaround?

:oops:
you should slap my wrist with a ruler... an !important ruler
thanks again