I have a project with several CSS files, each with many different settings. Every now and then I'll put an element on the page and it will appear unexpectedly, like an odd indentation, font color, hover behavior, etc. It's always a hunt to figure out exactly what CSS setting is causing the behavior. Is there any way to know exactly which CSS values are being applied to a given element?
Checkout 'FIREBUG' for firefox.... amazing add-on for web developers
https://addons.mozilla.org/en-US/firefox/addon/1843
You can click on elements and it will show you the classes which are applied.
Even better is that you can directly change the css values and see the result in real time in the browser - makes designing much easier and quicker.
Get Firebug (for Firefox) and use the 'Inspect' capability - it will show you the effective CSS (and where it's coming from) for the highlighted element.
The best tool for this is Firebug, an extension for Firefox that shows you how and where an element is inheriting its current style.
In general you need to inspect the element.
In Firefox, install Firebug, right click on the element and choose "Inspect Element".
In Google Chrome, right click and choose "Inspect Element".
In IE8 press F12 or go to Tools -> "Developer Tools" then go Find -> "Select element by click" and click on the element.
Once you've inspected the element you'll see a list of the CSS rules that apply to it. You can also get the computed style.
Firebug is a big help to see what CSS is decorating an element.
As the above folks have mentioned Firebug is the greatest thing since sliced bread in checking out how css is effecting your site.
You can also use this little tool ALONG with firebug and then your CSS debugging gets much easier!
Web Developer Toolbar
Safari's new "Web Inspector" is as good as or better than Firebug for this. I stopped using Firebug now that Safari is smarter.
Related
I have a existing parent website and I have to design a new website with similar theme and css styles.
I do not have access to the code of the parent website in which I can look into the styling.
Is there a way I can extract or replicate the css style of the website and use it for the new one. I just need to get the same theme going in the new website as well.
I came across that I could use some adobe tools for the same.
Can anyone give a brief idea of how this can be done or is there a generic procedure to be followed in replicating the style.
Replicate given design using your own, most appropriate appropriate markup and CSS rules—and have some sort of QA process that will help you find obvious inconsistencies with appearance and interaction.
Why I don't think you want to copy HTML and CSS from the parent site:
The parent website can change its style later in an unpredictable way. You will have to duplicate these changes. Since you mentioned you don't have the access to the codebase, you can't just diff their changes and apply them to your codebase.
Therefore I'd say it's best to ignore the original HTML and CSS, and just follow your eye and have a QA that will carefully test your work for consistency with the original.
(I had to do a similar thing once, and I think it usually isn't required to follow parent website pixel-perfect—just consistent enough to facilitate painless navigation for the end user.
In cases where pixel-perfect consistency is required it makes more sense to build the additional website off the same codebase as original. You weren't given that possibility, so I doubt that perfection will be requested from you.)
I think Your trying to shoot fly with cannon. All javascript/css/html code is at Your hand when viewing sources. No advanced tools are needed.
For better look on minified files You may try developers tools provided by modern browsers like chrome and firefox.
You may also just use beautification tools for css and html like http://www.codebeautifier.com to get nice, indented document.
Just google html or css beautification and find the one that fit Your needs in best way. Most of them are free online tools.
The css is probably minified. This question shows ways to unminify it so you can read it.
Browsers such as Firefox and Chrome have a built in Code Inspector tool that will show you which styles are applied to each item. Just right-click on a page element (for example, a paragraph or heading), and select "Inspect Element" from the menu that appears. A toolbar will appear at the bottom of your window. Use the arrow on the toolbar to select different elements to examine. Usually the left side of that tool shows the HTML for that element and the right-side shows the CSS styles applied and the line of the css they come from. You can get a similar tool in IE by pressing the F12 key.
If you have a text editor that allows regular expressions in the search (Dreamweaver has this if you have the Creative Suite) use this search term with the "regular expression" box checked: #[a-z|0-9]{3,6}. This will find all of the hexadecimal values for the colors you need. It says to find the pound sign followed by either three or six letters or numbers, which will mostly be hexadecimal values (e.g. #333 or #333333 for dark grey). It may also bring up some IDs and you can ignore those and keep searching. You'll also want to search for rgba because colors may be listed that way. Using this in conjunction with the browser's code inspector will help you figure out the colors that are used on different elements. Some things may have background images, so you'll need to use the code inspector to figure that out. The code inspector will also show you how much padding you'll need, widths, etc.
As pointed out in the title, my question is very simple: is there any way that I can achieve clicking on a header (title) and expand (and collapse) a text associated with it, without using JavaScript nor jQuery? Is there any browser compatible way of doing this (IE 6+ proof)?
I've made a very simple HTML+CSS site for a conference, and I would like to use JS only if necessary. So, I'm just asking if I can do it sticking only to HMTL/CSS, in a compatible way, of course.
The few solutions I've found are old or incompatible with some browser versions.
IE6-proof pure CSS solution?
NO
[Leave the dead rest in their graves, don't try to make them run a marathon. That's what you're doing when you're asking for IE6 to do things like this.]
IE7/8?
Yes, there is one solution (the principle is the same one used in this older demo of mine), but it is not persistent (meaning that if you click anywhere else on the page, your expanded content will collapse) and it behaves a bit weird in IE7 (meaning that you have to hover off the clicked element after you click it in order to see your content expanding).
IE9+ and the other browsers?
YES! Also persistent. Same principle as the one I used here.
JavaScript/ jQuery method?
Yes! See this: a jQuery version of the same demo.
You can do simple Hover dropdown menus with just HTML & CSS which are supported cross browser:
http://jsfiddle.net/fkS2z/
You can improve on this with fades or slidedowns with CSS transitions which are not supported in lower version of IE:
http://jsfiddle.net/N9fDy/1/
Not so much with clicking though.
I have a bit of an issue with design where I have a list item that has taken it on itself to be the far higher than the others. I have a feeling this is because of another element in the design.
I use firebug sometimes and chrome developer tools the rest of the time.
These tools can be used to see what the height of something is, or what css styles are effecting the object but what these tools don't do however is show how other objects are effecting other objects.
Has anybody come across a tool which shows the relationship objects in a design are having on each other? Its a long shot, but if there were a place to find out it would be here at SO.
Thanks.
Have a look at webdeveloper available for Chrome and Firefox. This is a very extensive plugin but should be able to do what you need.
Install it > go to the page you want to debug > Cycle trough various Outline options. Start off with "Outline block level elements" and work your way from there.
Do tell me if I misunderstood your question, but with either Firebug or the Chrome Developer Tool, you should be able to inspect the nesting of different elements in your design, and see how a design will look after you delete one of those elements.
The only tricky part is learning how to use those tools, and for that I suggest you watch some youtube videos. For me at least, that's the way I've learned. Unless someone can show you in person, the next best alternative is someone showing you how those tools work through a video.
i have an html template with 4 basic color Textheader, page basckgroung, navebar color,content backbround.
I want to generate different color styles so i can apply it dynamically and get different color scheme
i have tried css onine color chemers and the rest, but am looking of a service that will eneble me preview the color i choose by applying it to an html page online.
any ideas
There are a lot of integrated IDEs for browsers popping up - try Googling for "browser IDE" or "browser integrated development environment" or the like. Some of the more sophisticated ones will allow you to mark up and style a complete web page right in the browser with real-time visual feedback.
However, for this particular purpose, I'd recommend keeping it simple and using Firefox's Firebug extension. Once installed, just navigate to the page you're developing, right-click the area of the page that you want to change and click "Inspect Element" in the context menu that appears. Firebug will list the CSS styles applied to the element in question and allow you to change them, and see those changes live.
I believe firebug is for debugging as the name sounds,and i decided to do the stuff manually.
Does such an add-on exist for Firefox?
Firebug.
alt text http://xavierho.com/temp/SOFirebug.jpg
And you will have to do some simple arithmetics, if you mix borders/margins/paddings.
If you can see the edges in question, there's always MeasureIt. Sometimes I find it quicker than Firebug.
the best addon I can think of is CSSViewer, there is also firebug or web developer toolbar.
you can see more addons in this top 50 list
Firebug can tell you this information: enable it, choose the HTML tab, choose the element you're interested in, then select the layout tab on the right. It shows a diagram quite similar to your artwork above :-)
Looks like there's not such a plugin available at the moment.