css question

By radiofranky on 13 Jan 2006 at 07:31 UTC

<div class="block block-event" id="block-event-1">

how do i input block block-event into css?

do i do #block-event-1 .block block-event? i tried it but it didn't work

i also tried

#block-event-1 block block-event
#block-event-1 block-event
#block-event-1 .block-event

they all failed to perform.

could a css expert show me what's the correct way? tks

[edit: added code tags to show hidden element -sepeck]

Comments

block-event-1

syawillim commented 13 January 2006 at 07:55

If you wanted to remove the border for example, you would insert #block-event-1 { border: 0; } into your css file.

www.slickfish.com.au
professional, affordable web site design, production and maintenance for small business

css is not only for for cascading stylesheets

dikini commented 13 January 2006 at 09:19

All blocks provided by modules are usually numbered. #block-event-1 will always be

#block-event-1 { wherever}

for all blocks:

.block { whatever css rules you need}

only for blocks from the event module:

.block-event { whatever css rules you need }

You can't and you don't need to use all of them at once - they are variants or aliases of the same element, but drupal applies them to different sets of elements, so you can minimise the amount of definitions.

Multiple CSS selectors

dman commented 13 January 2006 at 13:45

You're probably unaware of the hidden gem of stylesheet cascades - you can apply multiple styles to one element, with style names separated by spaces in the style parameter!

Strangely not a lot of people know that or use it.

The most specific match for your block would have been of the form: TAG.CLASS#ID

div.block-event#block-event-1{
...css
}

although #block-event-1 should be always specific enough without any other info.

In all cases a css pattern goes, TAG.CLASS#ID:PSEUDO , and you can leave out whichever bits you don't need.
TAG.CLASS div.block
.CLASS#ID .block#block1
.CLASS:PSEUDO .offsite:link
TAG:PSEUDO a:hover

- that answers your question, but for understanding ...

A style sheet defining:

.block{
width:150px;
}
.block-event{
border:1px solid blue;
}
#block-event-1{
background-color:red;
}

...would apply ALL those styles on top of each other to your div. It's up to you to decide which level of granularity you wish to use.

.dan.

http://www.coders.co.nz/

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}

IE Cache

notabenem commented 13 January 2006 at 13:55

As you can see in the other posts, your approach was correct. However, you did not see the expected results because of the cacheing mechanizm of IE (provided you use it).

I had the same problem with css and FCKEditor's jsconfig.js. Did whatever I could, but i did not see any change after editing these files even if I hit the "refresh" button in IE. The solution was to set the Cache mechanizm from "Automatic" to "Every visit of the page". Try it.

Matyas

Dunno if it was so, but...

dman commented 13 January 2006 at 14:43

Actually, I think the css in the OP was incorrect - spaces in the css selector imply nesting.

#block-event-1 .block block-event{}

would select the thing that is a block-event inside a thing that is a block inside a thing that's called #block-event-1.

BUT ANYWAY
For a quick refresh on IE, try CTRL-F5. It's an old Netscape trick to perform a hard cache flush, adopted by IE sometime between version 4 and 5. 'Tis good when testing CSS and JS.

.dan.

http://www.coders.co.nz/

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}