Please help change ID CSS to CLASS CSS

[JAB Creations]

I do not use IDs for CSS as I tend to refer to IDs with Javascript. Therefor I have a conflict of interest in a way...

Anyway here is the code but I just can't figure out how this is all put together as I never use this method.

My css tends to look like this...
li.menu {}

Here is the code...also I do not know what these menus say but I know they are in Spanish?

CSS

#nav, #nav ul{
float: left;
width: 755px;
padding: 0;
margin: 0;
list-style: none;
border: solid #ffffff;
border-width: 4px 0px 4px 0px;
line-height: 1;
z-index: 100;
}

#nav a {
display: block;
font: normal 11px arial;
color: #ffffff;
text-decoration: none;
padding: 1px 0px 1px 5px;
}

#nav li ul a {
display: block;
font: normal 11px arial;
color: #ffffff;
text-decoration: none;
padding: 1px 0px 1px 5px;

}

#nav li {
float: left;
width: 125px;
background: #315BA2;
}

#nav li ul {
position: absolute;
width: 125px;
left: -999em;
border: 1px solid #315BA2;
background: #ffffff;
font-weight: bold;
}

#nav li li {

width: 125px;

}

#nav li:hover ul {
left: auto;
font: 11px bold arial;
color: #ffffff;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #9DC1DD;
}

HMTL

<ul id="nav">
<li id="first"><a href="#">¿Quienes Somos?</a>
<ul>
<li><a href="resena.php">Reseña</a></li>
<li><a href="mision.php">Misión</a></li>
<li><a href="vision.php">Visión</a></li>

<li><a href="historia.php">Historia</a></li>
</ul>
</li>

<li><a href="programas.php">Programas y Servicios</a>
<ul>
<li><a href="curriculum.php">Curriculum por Edades</a></li>
<li><a href="centros.php">Centros</a></li>

<li><a href="nutricion.php">Nutrición</a></li>
<li><a href="transporte.php">Transporte</a></li>
<li><a href="enfermedades.php">Enfermedades</a></li>
<li><a href="emergencias.php">Emergencias</a></li>
</ul>
</li>

<li><a href="#">Ventajas y Calidad</a>
<ul>
<li><a href="filosofia.php">Nuestra Filosofía</a></li>
<li><a href="modelo.php">Modelo Educativo</a></li>
<li><a href="recurso.php">Recurso Humano</a></li>
<li><a href="instalaciones.php">Diseño de Instalaciones</a></li>

<li><a href="lista.php">Lista de Calidad</a></li>
</ul>
</li>

<li><a href="sitios.php">Sitios de Interés</a>
<ul>
<li><a href="sitios.php">Premios, prensa</a></li>
<li><a href="sitios.php">Convenios</a></li>

<li><a href="sitios.php">Colegios</a></li>
<li><a href="sitios.php">Asociaciones</a></li>
<li><a href="sitios.php">Fundaciones</a></li>
</ul>
</li>

<li><a href="#">Tour y Fotos</a>

<ul>
<li><a href="fotos.php">Fotos Niños</a></li>
<li><a href="mapa.php">Mapa del Tour</a></li>
<li><a href="fotosinstalaciones.php">Fotos Instalaciones</a></li>
</ul>
</li>

<li id="last"><a href="contacto.php">Contáctenos</a>

<ul>
<li><a href="contacto.php">Registracion</a></li>
<li><a href="contacto.php">Teléfono</a></li>
<li><a href="contacto.php">Dirección</a></li>
<li><a href="contacto.php">Correo Electrónico</a></li>
<li><a href="contacto.php">FAQs</a></li>

</ul>
</li>
</ul>

[tedster]

To change an id to a class, follow this approach. If the id is "nav", just change all the CSS rules that say #nav so that they now say .nav -- and then change all the id="nav" attributes in the HTML to say class="nav"

However, there's no inherent conflict between using id in javascript and using id in css. It can be very useful to use a CSS id (which is only applied once in any html document) for unique rules -- and then also apply a class to the same element to pick up other more widely applied css rules.

The differentiator: an ID is unique - an "identity". It's used once in each html document. A class can have any number of members.

[bedlam]

However, there's no inherent conflict between using id in javascript and using id in css...

This is quite right. Moreover, ids used for javascript tend to make themselves useful for applying styles to an element as well. Similarly, ids used for css come in handy if you need to do a little client-side dom scripting. This is especially true since many of the things that the dom is most useful for involve changing css of particular elements on the fly.

A sort of weird example that occurs to me could be a simple slide show; imagine that you needed to build a simple gallery that would a) degrade nicely absent javascript, and b) cycle through the images if javascript were present.

You could build a tool like this in this way:

1. Give each image a unique id and place them in the page in a conventional way, with whatever styles are needed for positioning and appearance
   
2. If javascript is present, dynamically change the styles for each of those unique ids so that they're absolutely positioned one on top of the other.
   
3. Then (and this is where the id becomes really useful), simply use the script to change the z-index of each item, either automatically, or in response to a user-initiated event.
   

In reality, this is probably not a really great method for making a slide show, but maybe it shows that using ids only for javascript or only for css could be restrictive; for example, there is no particular reason for using ids to refer to the images in the hypothetical example. It would also be possible to get all the relevant images on the page and loop through an array of them and simply change the styles of image 'n' as needed, but the id can potentially make this simpler while providing a hook to hang styles on.

It seems to me that if you truly need to have distinct ids for use with javascript that you could achieve much the same thing by distinguishing the use of the id according to your own naming convention (e.g. #js_navigation / #css_header) without denying yourself access to the useful characteristics of the id selectors [w3.org].

-B

[g1smd]

For small translations babelfish is quite useful to find out roughly what the content of a page is about.

Never, ever, use the output of babelfish as content on a website though, as the quality of grammar, and accuracy of wording, is nowhere good enough for that purpose.

[JAB Creations]

This thread I posted was about helping me get rid of IDs for CSS and use class attributes. Since no one translated what I needed to know in to English I've been working on my own drop down menus.

[edited by: tedster at 11:58 pm (utc) on Aug. 27, 2005]

[tedster]

The Spanish language in your example is only used in the file names for pages and visible text -- CSS itself is exactly the same no matter the language of the website -- just like html itself, css is universal. So you can plug in your own choice for menu labels and page names.

[JAB Creations]

No... I meant translate a programming explenation in to English -- not Spanish in to English. I could not care less about the meanings of the words in the menu that I posted.

Simply adding a .nav and such did not achieve the goal. I come across a lot of id/css and I simply do not know how to translate it in to class/css which no one "translated" in to a form I understand.

The menu code is over sophistocated I feel and the id/css doesn't help my cause. So I just posted the code directly instead of replacing the original menu text with "menu".

[g1smd]

Well, the HTML: <tag id="xyz"> is paired with the CSS: #xyz {the style}

and

the HTML: <tag class="xyz"> is paired with the CSS: .xyz {the style}

so those notations are what you need to change.

[createErrorMsg]

which no one "translated" in to a form I understand

the code you posted only contains three IDs...nav, first and last. Here's a step-by-step for changing them into classes.

(1) Copy the code into notepad or some other simple text editor (I prefer Notepad2).

(2)Open the replace function. Type "id" into the find field, and "class" into the replace field. Run it on the whole document. You should get a "3 replacements made" message.

(3)Open the replace function again. Type "#" into the find field and "." into the replace field. Run it on the whole document. You should get a "12 replacements made" message. (Actually, it will probably say 14 changes made, as there are two href attributes in the code with a hash mark placeholder.)

(4)Use the code.

The problem may have been that you didn't swap out all the instances of the id selector (#) in the CSS. If you switch the html attribute from id to class, all the corresponding CSS selectors have to be changed, as well.

If this doesn't accomplish what you want, you may need to back up and approach your description of the problem again.

cEM

[g1smd]

I would replace id= with class= instead (not just id with class), simply to stop the find and replace function from finding the letters id inside a content word on the page, and making a false replace. I also step through the find and replace one item at a time, rather than selecting replace all.

[createErrorMsg]

In a small amount of text such as the sample menu posted above, I think going replace all is relatively harmless. But I see your general point.

cEM

[JAB Creations]

I simply replaced # with . and then changed id to class. I was still confused at that point but the code was still rendered the same way. I then figured out there was a still yet unknown method that I was gazing upon.

ul.nav li

This is a selector for any list-item that belongs to a list with a class of nav. You learn something new everyday!

[g1smd]

That type of selector is very very powerful.

If you find yourself repeating a class name over and over again in the HTML code, then simply attach that class name to a parent HTML block instead, and then use that "double" selector to "reach in" and style all of the child elements.

It works well with lists, tables, and forms, and with several other constructs using divs.

[JAB Creations]

Yes it is potentially a very powerful method that could be used and I believe to reduce the size of a stylesheet perhaps but perhaps more so on other people's layouts then mine at this moment in time.