Pre-viewer for CSS boxes anyone ?
Pre-viewer for CSS boxes anyone ?
am 04.09.2007 15:48:58 von rsimpson505
Formatting nested, floating boxes can be tricky.
Does anyone know of a sort-of pseudo-browser or pre-viewer that lets
you see explicitly the inside and outside edges of margins, borders,
padding and content (sometimes called perimeters, I think) ?
Imagine, for instance, the "frontier" between padding and content
being shown as a coloured, dotted line in our pre-viewer. Something
like that . . .
TIA
Re: Pre-viewer for CSS boxes anyone ?
am 04.09.2007 16:14:26 von mrcakey
"Rob" wrote in message
news:1188913738.755059.94230@o80g2000hse.googlegroups.com...
> Formatting nested, floating boxes can be tricky.
>
> Does anyone know of a sort-of pseudo-browser or pre-viewer that lets
> you see explicitly the inside and outside edges of margins, borders,
> padding and content (sometimes called perimeters, I think) ?
>
> Imagine, for instance, the "frontier" between padding and content
> being shown as a coloured, dotted line in our pre-viewer. Something
> like that . . .
> TIA
>
Opera with "Debug" turned on does something close to that.
+mrcakey
Re: Pre-viewer for CSS boxes anyone ?
am 05.09.2007 15:28:50 von Jim
Rob,
There's quite a few nice tools you can use which use javascript
"bookmarklets", which are just mini-scripts you drag to your browser
toolbar, then click on them while you're on a page, and they will take
some action on that page, like outline all the divs, show image
placeholders, etc. They are extremely handy. One site I like to
reference is: https://www.squarefree.com/bookmarklets/webdevel.html
(or just do a search on 'bookmarklets')
If you use firefox, you can also get a similar (better) set of web
tools via an entire toolbar plugin built (free) for firefox. It is
at: http://chrispederick.com/work/web-developer/.
The latter tool, albeit specific to firefox, is really nice. The only
difficulty is that you need to assure you test the css or script in
msie as well to assure cross-browser functionality. For that reason,
the bookmarklets come in handy for MSIE.
Hope that helps.. I'm sure it will!
Jim
Re: Pre-viewer for CSS boxes anyone ?
am 06.09.2007 11:45:46 von rsimpson505
Thanks Jim (and Mrcakey).
Booklets were new to me and it took a little while work out how to add
them and use them !
I now wish I knew JS better so that maybe I could write an "explicit
edges" booklet.
Any volunteers . . . ?
jim schreef:
> Rob,
> There's quite a few nice tools you can use which use javascript
> "bookmarklets", which are just mini-scripts you drag to your browser
> toolbar, then click on them while you're on a page, and they will take
> some action on that page, like outline all the divs, show image
> placeholders, etc. They are extremely handy. One site I like to
> reference is: https://www.squarefree.com/bookmarklets/webdevel.html
> (or just do a search on 'bookmarklets')
>
> If you use firefox, you can also get a similar (better) set of web
> tools via an entire toolbar plugin built (free) for firefox. It is
> at: http://chrispederick.com/work/web-developer/.
>
> The latter tool, albeit specific to firefox, is really nice. The only
> difficulty is that you need to assure you test the css or script in
> msie as well to assure cross-browser functionality. For that reason,
> the bookmarklets come in handy for MSIE.
>
> Hope that helps.. I'm sure it will!
>
> Jim