homepage Welcome to WebmasterWorld Guest from 54.198.148.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Debugging css layout.
adamnichols45




msg:4219786
 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




msg:4219793
 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




msg:4219799
 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:4219888
 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




msg:4220394
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved