homepage Welcome to WebmasterWorld Guest from 54.204.73.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Debugging css layout.
adamnichols45

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4219784 posted 12:44 pm on Oct 21, 2010 (gmt 0)

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?

 

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4219784 posted 1:15 pm on Oct 21, 2010 (gmt 0)

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.

adamnichols45

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4219784 posted 1:33 pm on Oct 21, 2010 (gmt 0)

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

Major_Payne



 
Msg#: 4219784 posted 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;
}

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4219784 posted 3:12 pm on Oct 22, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved