Help
I have a web site and design (for a non-profit) that I inherited. The site was designed by a web designer to be a pure HTML site but I have now changed it be run by several PHP applications. The issue is that as I have changed the resulting HTML code to add more content, an annoying separation between two different element which should butt up against one another.
So I need to get a tool that would allow me to view the underlying formats/CSS/HTML being applied to each element and let me change the layout until it comes out correctly. Then I can go back to the source PHP and the CSS, and fix it to match the result I am trying to get.
What tool would you suggest?
Is there a better way to do web hacking than the reverse engineering method suggested above?
|
Welcome
O'Reilly Answers is a community site for sharing knowledge, asking questions, and providing answers that brings together our customers, authors, editors, conference speakers, and Foo (Friends of O'Reilly). More »
HTML tool to decode and fix layout issues2 Replies
For purposes like this (the 'inherited' web site that needs a layout tweak) I've found that firebug is a fantastic tool:
http://getfirebug.com/ Firebug allows you to open the page/app in your Firefox browser, then the 'inspect' element will let you select the part of the screen that is giving you problems along with the HTML and CSS elements (with line numbers!) that you can edit within the browser to see how changes would look before applying them in your text editor/IDE.
I use Firebug which is an add-on for Firefox. It's free and open source.
When you turn it on for a particular web page you can view the HTML, CSS and Javascript for the page. You can then make edits and see the results immediately in your browser without actually modifying the live page. I've found it to be incredibly helpful for debugging layout issues. |
|||
© 2012, O’Reilly Media, Inc. (707) 827-7019 (800) 889-8969 All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners. |
