By -Anti- on

I started my site using the barron theme, but I've changed it quite a lot.
One thing I haven't changed much is the list/menu css, posted below:

ul {
  margin: 0.5em 0 1em;
  padding: 0;
}

ol {
  margin: 0.75em 0 1.25em;
  padding: 0;
}

ol li, ul li {
  margin: 0.4em 0 0.4em .5em;
}

ul.menu, .item-list ul {
  line-height: 1.3em;  /* height of menu buttons */
  margin: 0.35em 0 0 -0.5em;
  padding: 0;
}

ul.menu ul, .item-list ul ul {
  margin-left: 0em;
}

ol li, ul li, ul.menu li, .item-list ul li, li.leaf {
  margin: 0.15em 0 0.15em .5em;
}

ul li, ul.menu li, .item-list ul li, li.leaf {
  background: transparent url('images/menu-leaf.gif') no-repeat 1px .35em;
  list-style-image: none;
  list-style-type: none;
  padding: 0 0 0 1.5em;
}

ol li {
    margin-left: 2em;
    padding: 0 0.3em;
}

ul li.expanded {
  background: transparent url('images/menu-expanded.gif') no-repeat 1px .35em;
}

ul li.collapsed {
  background: transparent url('images/menu-collapsed.gif') no-repeat 0px .35em;
}

ul li.leaf a, ul li.expanded a, ul li.collapsed a {

}

/* EDIT: added menu items hover effect */
ul li.leaf a:hover, ul li.expanded a:hover, ul li.collapsed a:hover {
  color: #D00000;
}

/* EDIT: added menu item active */
ul li.leaf a.active, ul li.expanded a.active, ul li.collapsed a.active {
  color: #D00000;
  font-weight: bold;
}

ul.inline li {
  background: none;
  margin: 0;
  padding: 0 1em 0 0;
}

ol.task-list {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

ol.task-list li {
  padding: 0.5em 1em 0.5em 2em;
}

ol.task-list li.active {
  background: transparent url('images/task-list.png') no-repeat 3px 50%;
}

ol.task-list li.done {
  background: transparent url('../../misc/watchdog-ok.png') no-repeat 0px 50%;
  color: #393;
}

ol.task-list li.active {
  margin-right: 1em;
}

fieldset ul.clear-block li {
  background-image: none;
	margin: 0;
  padding: 0;
}

ul.primary, ul.primary li, ul.secondary {
  background: none;
  border-bottom: 1px solid #BBBBBB;
  height: auto;
  margin: 5px;
  padding: 0;
}

ul.secondary li {
  background: none;
  border-right: 1px solid #CCCCCC;
  display: inline;
  padding: 0 1em;
}

ul.links {
  text-align: left;
}


ul.links li {
  background: none;
  list-style: none;
  margin: 0 0em 0 0; /* EDIT: from 1em for horizontal-menu link spacing */
  padding: 0;
}

That seems a lot of css just for what are basically just lists! Is it all necessary?
I don't understand css enough to know if this should/could be reduced and simplified?
Or is it actually well written?
I want to work a little bit on how menus look, and I'd like a simpler starting point.

Thanks for any advice.
Cheers.

⋅ Categories: Drupal 6.x

Comments

lelutin’s picture

lelutin commented

This is useless :

ul li.leaf a, ul li.expanded a, ul li.collapsed a {

}

and from this :

ol li, ul li {
  margin: 0.4em 0 0.4em .5em;
}
[...]
ol li, ul li, ul.menu li, .item-list ul li, li.leaf {
  margin: 0.15em 0 0.15em .5em;
}

you can see that "ul li" and "ol li" have two margin declarations. The first one is probably useless as it is always superseded by the second one.

if you're using firefox and you want to test some things with css and layout/presentation, I suggest you use firebug. with it, you can modify, add and delete sections of css locally and see the results instantly.

-Anti-’s picture

-Anti- commented

Thanks for your reply.

I can load the page in Firebug and change values until the page looks better,
but that doesn't help me improve the css.

> you can see that "ul li" and "ol li" have two margin declarations

That's the problem - I can't see it. I don't really know what those lines do.
I know that ol, li and ul are html tags.
But I don't know why 'ol li' and 'ul li' are grouped together as pairs, and separated by a comma.
I don't know what 'ul.menu li' or .item-list ul li' means and what the difference is between the syntax.

I do want to learn php and css, but I'm so, so busy with my day job that getting round studying these things is a five year plan. I'm sure many people can identify with the situation of being a job you hate, but since the job takes up all your time, trying to teach yourself other skills so that you can change your profession is like clawing cm by cm out of a very deep pit.

For now, perhaps there is a tool like 'html tidy', which does the same thing for css?
I googled 'css editors' and noted 'topstyle' and 'style master' as the prominent ones.
Would they help me tidy up my drupal css?

If not, I'll just have to leave it as it is for now.

Thanks for any further info or advice.

Pilot’s picture

Pilot commented

Feeling a little for your dismay, thought I would add a little. CSS is sort of like grammar to HTML (and XHTML, etc). Even if you have the HTML vocabulary, you cannot do anything with it unless you give it basic structure.

A tag like <q> gets its meaning from the css declarations. Font size, text format, block position -- the whole shebang. But sometimes you want one instance to be different than another, so there are "selectors" -- if you look at a typical html code (try this one!) you will find a lot of tags with <div class="blabla"> or <div id="bleeblee"> and if you look in the css files you will see two kinds of selectors:

.blabla { .... }

and

#bleeblee { .... }

which affect only that one kind of tag.

Anyhow, there is more to learn, like that the second kind (the "id selector") takes precedence over the first (the "class selector") and that you can pile these guys up in a variety of ways. For example, an HTML tag might have several classes and ids associated with it and there may be many conflicting instructions within those selectors (like one says the tag should make the script blue and another yellow). There are rules for sorting out which has priority (briefly, in this order, whichever version has more "ids" or "#" wins, and if equal, whichever has more "classes" or ".", and then a few other features after that.

You dont need a five year plan to learn CSS, just ten evenings going through the material (assuming you are comfortable with HTML). Go to the w3school for a good introduction.

Hope that helps!

-Anti-’s picture

-Anti- commented

Thanks for your post.

> You dont need a five year plan to learn CSS

The five year plan is for gaining 'enough proficiency' in EVERYTHING to feel like I could maybe earn a living doing it-
css, raster and vector graphics, flash animation and interaction, php, sql, javascript, jquery, ecommerce,
how to create drupal modules, and the set-up/maintenance of reselling hosting accounts.

At the very least, it's a safety net if I ever lose my day job, and it might be a way to earn a little extra cash evenings and weekends, if I get good enough. But I have to say, I'm also enjoying toying with the idea that someday I might be able to work full-time for myself from home.

It's very frustrating though; I feel like 8am - 4pm is a totally wasted day, and my 'real work' (studying this web stuff) is from 6pm - 2am.

Any way, thanks.