Welcome to WebmasterWorld Guest from 54.161.110.186

Forum Moderators: not2easy

Message Too Old, No Replies

Debugging css layout.

     
12:44 pm on Oct 21, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Would'nt it be cool if you could just switch on border 1px to all divs on a page so you could see how the page is layed out in blocks.

Is there a simple way of doing this with out editing all the div class's?
1:15 pm on Oct 21, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Several ways - for example:
div {border:1px solid red}
div {outline: 1px solid red) <-- best because it does not take up space in the layout, but is not recognised by older ie's

Edit: If you have styled borders or outlines then put this at the end of the style sheet so it over-rides the earlier rules. Comment in and out as required.

The "web-developer" extension for Firefox allows you to outline elements, as do various tools for the other major browsers. I would really recommend you try firebug for firefox as well.
1:33 pm on Oct 21, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



oh yes I have wed developer for firefox I guess it would be useful to start using that now!

thanks for your very helpful comments..

Im sure I will be back :P
4:18 pm on Oct 21, 2010 (gmt 0)



Using just the CSS for a div tag will not style those with an id or class. Need to do this:

div#id_name1, div.class_name1, etc. {
border:1px solid #f00;
}

or just put the ids and classes and leave out "div".

#selector_name1, .selector_name2, etc. {
border:1px solid #f00;
}
3:12 pm on Oct 22, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Is there a simple way of doing this with out editing all the div class's?


Also have a look at FireBug. you can right click and element and select Inspect element. On the right will be the CSS, but on the left the source code. As you mouse over the source code, the elements you are mousing over will be highlighted in the page above, with different colors for the element content, padding and margins.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month