Lost in the DIV hierarchy...
Moderator: General Moderators
Lost in the DIV hierarchy...
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!
thanks!
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 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.
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="">...Using these rules, I've been able to keep the amount of container divs I need in almost any page to a minimum.
Please educate me - is there something the web dev extension has that compares to Aardvark?matthijs wrote:Or use the web developer extension, it's realy invaluable. I could not work without it.
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!
That will not be easy for me I'm afraid...Please educate me
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.matthijs wrote:That will not be easy for me I'm afraid...Please educate me![]()
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 ...
I definitely recommend Aardvark over it. Aardvark is much more visual, so I find it easier. Your mileage may very.