Page 1 of 1

Lost in the DIV hierarchy...

Posted: Mon Feb 20, 2006 11:21 am
by faswad
Are there any solutions (IDEs etc) to help me figure out what level in the DIV hierarchy i'm in? Designing pages in CSS is becoming a nightmare, since i've been using a container within a container within a container structure.

thanks!

Posted: Mon Feb 20, 2006 11:27 am
by feyd
formatting your code in a readable manner can go a long ways.

Posted: Mon Feb 20, 2006 11:31 am
by Roja
Aardvark for Firefox will help you.

http://www.karmatics.com/aardvark/

Posted: Mon Feb 20, 2006 11:58 am
by faswad
Roja wrote:Aardvark for Firefox will help you.

http://www.karmatics.com/aardvark/

wow thanks! beautiful extension. exactly what i needed.

Posted: Mon Feb 20, 2006 12:41 pm
by matthijs
Or use the web developer extension, it's realy invaluable. I could not work without it.

I don't know what pages you are designing, but a few rules I follow myself are:
- Keep it simple. Don't add a div for every item you add to the page, but first see if you can use or reuse existing elements.
- Use semantic and understandable id and class names.
- Use semantic elements and use these to the max for styling. If you have for example a navigation menu, with

Code: Select all

<ul><li><a href="">...
you already have 3 ankers which you can style in the css.

Using these rules, I've been able to keep the amount of container divs I need in almost any page to a minimum.

Posted: Mon Feb 20, 2006 12:55 pm
by Roja
matthijs wrote:Or use the web developer extension, it's realy invaluable. I could not work without it.
Please educate me - is there something the web dev extension has that compares to Aardvark?

The closest I see is outline, custom elements, and even then, you have to type in which elements you want outlined, and it doesn't tell you which id/class that element has.

I use both, and its primarily because Aardvark goes way beyond Webdev. But if it can do it, please - educate me! :)

Posted: Mon Feb 20, 2006 12:57 pm
by feyd
CSS > View Style Information.
Roll over the element(s) you wish to see the hierarchy to. Click and it'll give you the CSS applied to the element.

Posted: Mon Feb 20, 2006 1:02 pm
by Roja
feyd wrote:CSS > View Style Information.
Roll over the element(s) you wish to see the hierarchy to. Click and it'll give you the CSS applied to the element.
Mine is greyed out on every page (?)

Posted: Mon Feb 20, 2006 1:07 pm
by feyd
Roja wrote:
feyd wrote:CSS > View Style Information.
Roll over the element(s) you wish to see the hierarchy to. Click and it'll give you the CSS applied to the element.
Mine is greyed out on every page (?)
Weird.. mine isn't. :)

Posted: Mon Feb 20, 2006 1:44 pm
by matthijs
Please educate me
That will not be easy for me I'm afraid... :wink:
I just mentioned the developer extension as I find it a very usefull tool. It gives a lot of other functions within one-click reach, like checking javascript, validating html/css, disabling images, info about anything etc etc. And indeed, the CSS > View Style Information is very handy as well (ahum, especially if I see a cool color or style somewhere and want to check it out ... :)

Posted: Mon Feb 20, 2006 4:34 pm
by MinDFreeZ
yea, never heard of that aardvark extension.. cant wait to get home to take a look at it... but web developer extension has so far been my most useful/used extension on FF.. it's crazy.

Posted: Mon Feb 20, 2006 6:52 pm
by Roja
matthijs wrote:
Please educate me
That will not be easy for me I'm afraid... :wink:
I just mentioned the developer extension as I find it a very usefull tool. It gives a lot of other functions within one-click reach, like checking javascript, validating html/css, disabling images, info about anything etc etc. And indeed, the CSS > View Style Information is very handy as well (ahum, especially if I see a cool color or style somewhere and want to check it out ... :)
Aha. It works on my other machine.

I definitely recommend Aardvark over it. Aardvark is much more visual, so I find it easier. Your mileage may very.