Lost in the DIV hierarchy...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
faswad
Forum Newbie
Posts: 5
Joined: Tue May 31, 2005 6:39 pm

Lost in the DIV hierarchy...

Post 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!
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

formatting your code in a readable manner can go a long ways.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Aardvark for Firefox will help you.

http://www.karmatics.com/aardvark/
faswad
Forum Newbie
Posts: 5
Joined: Tue May 31, 2005 6:39 pm

Post by faswad »

Roja wrote:Aardvark for Firefox will help you.

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

wow thanks! beautiful extension. exactly what i needed.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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! :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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 (?)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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. :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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 ... :)
MinDFreeZ
Forum Commoner
Posts: 58
Joined: Tue Feb 14, 2006 12:28 pm
Location: Lake Mary, FL

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
Post Reply