By sfa on

Hi All, I may be missing something but is there any reason why drupal creates class names that has spaces in them like "first menu-1-1-2". These then cannot be targetted using CSS, right?

⋅ Categories: Drupal 5.x

Comments

jdrichmond’s picture

jdrichmond commented

I'm not a CSS expert by any means, but I found an interesting article on why you might want to use CSS class names with spaces.
http://www.search-this.com/2007/04/25/optimize-your-css-with-multi-class...
http://blogs.msdn.com/petel/archive/2006/06/07/621115.aspx

These two articles talk mainly about using Multiple Classes not how to select a class specifically that contains spaces. I believe the answer is here: http://www.w3.org/TR/REC-CSS2/selector.html. It talks about pattern matching and how to select CSS elements. Looks like you have to enclose your class name with quotes in order to select a CSS element that contains spaces.

sfa’s picture

sfa commented

Thanks! Those links are brilliant.

Tergenev’s picture

Tergenev commented

I had some trouble getting the CSS to address the proper bit of content when that content had a Drupal-created class with spaces, something such as:

class="views-field views-field-title" (Yes, I'm trying to theme a Views table; seemingly a common quest around here.)

I used the links above to figure out the issue. I finally got the output to respond to the CSS by replacing the spaces with periods.

So, to center the title in the table column, this worked:

.views-field.views-field-title {
padding-left:0px;
text-align:center;
}

Note that the padding-left setting is there merely to override the 5px left padding I had established in all views table cells by setting:

.views-field {
padding-left:5px;
}

I hope this is clear.

nevets’s picture

nevets commented

See my comment below, those are two class names "views-field" and "views-field-title", using just ".views-field-title" should also work.

Tergenev’s picture

Tergenev commented

I just tried that, but it did not work. (I expected it to work. But it didn't.)

In my example, changing attributes using .views-field-title in the CSS file does not reach the object on the page.
But changing them using .views-field.views-field-title does reach the page. (Tested in Firefox and Chrome. Drupal 6.x.)

nevets’s picture

nevets commented

The CSS rule for .views-field-title would need to be after the one for .views-field

Tergenev’s picture

Tergenev commented

Yes, I placed the .views-field-title definition below the .views-field definition, and they reached the page.

You are correct and I am an idiot.

nevets’s picture

nevets commented

Actually those are two class names, 'first' and 'menu-1-1-2'. While html element can only have one id, the can have any number of class names.

nicl’s picture

nicl commented

Yes - mostly drupal spits out a whole load of classes, each representing a different aspect of the item.

To select an element use (in descending order of specificity):

1. an id (or combination of id's)

#id {styling: here;}
#id1#id2 {styling: here;}

2. a combination of id's and classes

#id.class {styling: here;}
(add ids and classes as desired)

3. a class or combination of classes

.class1.class2 {styling: here;}
.class {styling: here;}

5. by element

p {styling: here;}
a:link {styling: here;}

etc.

There are other more complex forms of selectors too but this is enough for most cases.

Also note!

.class1.class2

is different from

.class1 .class2

(note the space in the second). The space denotes a parent-child relationship. i.e. .class1 .class2 selects an item with .class2 within a hierarchy headed by .class1. Whereas, .class1.class2 selects an item which has both class1 and class2 on it (and ignores parent items).

All of the examples above could include spaces between selectors depending on what you need.

pradhan’s picture

pradhan commented

No CSS will reach this. Shown below is the html.

I tried this per the posts above, replacing the spaces with . but it still doesn't reach the page.

.field.field-type-filefield.field-field-imager .field-items {
display: inline;
width: 220px;
}

These are listing images which currently post vertically on my page
http://www.retlabgraphics.com/rjcarnahan/node/34

I am trying to get them to line up in-line. Can anyone help/suggest how to get there! Thank you!
Pradhan

nicl’s picture

nicl commented

Hi Pradhan,

your selector wasn't working because img elements default to display: block and you are not applying your style to the img elements themselves. But even doing that, the img elements are nested in divs which also display: block by default so you would have to display: inline to those too, and so on...

There is a better way to get the effect you want (see below) using the CSS 'float' property.

Also, you don't need so many selectors.

To display your images side by side make the following changes.

Use the CSS 'float' command on the img elements.

e.g.

img {
float: left;
}

or, more specific (as example)

#left img {
...
}

(Or you could use the node id to get really specific - e.g. #node-34 img {...} )

I'm also not sure why you have assigned float and width properties to your left div. You could remove those to allow 3 images to align side by side (after applying float to the img elements).

--

It's really worth reading up on CSS as although it is a relatively easy language to learn it still required learning and has some confusing/complex bits.

Nic

pradhan’s picture

pradhan commented

Thanks Nic...but I didn't create those selectors at all. All of that code was generated by drupal. I was a bit shocked to see it. I am using ImageCache Actions using a canvas, and that seems to have been responsible for the complicated selectors because before that, I was able to align them with a simple

display: inline;

I applied a canvas so as to center the images in a gallery, vertically. I succeeded doing this with views:

http://www.retlabgraphics.com/rjcarnahan/new_art

This is experimental for me...I was shocked to see those elements on the page! Ah...but I have another idea! I don't do this often enough and CSS is evolving, Drupal is evolving so each time I build a page (once a year), I have to review it all again.

Thanks so much for your help!
Pradhan

nicl’s picture

nicl commented

Hi Pradhan,

I think you have misunderstood me. I know you didn't create the selectors. I was suggesting you ignore them in your CSS though. The CSS I gave you will work with the existing code on your pages.

Drupal adds lots of extra divs/classes etc. so that themers have lots of flexibility in customising the display of their sites. Yes, it is overkill for most uses though.