I do all my css work with firebug, using the up and down arrow keys to adjust top and left values.
Anyone come across a firefox addon that lets me drag stuff around and then copy and paste the top and left values?
edit: I have changed the question slightly from 'easier' to faster. Sorry for any confusion, I am not a beginner looking for tools to help me write css, simply to speed up my positioning slightly!
I use the MeasureIt addon for Firefox, which gives you a ruler. Drag from where you want the element to the top left of the screen and it'll give you the absolute position. You might need to adjust for scrolling but it shouldn't be too hard.
I do the measurement part in Fireworks, Photoshop or any drawing program (Photofiltre, Paint.NET, etc or The Gimp), based on a template I was given. Not in the browser. And I certainly don't use absolute positioning for layout!
That said, here are some tools I found useful:
MeasureIt
Pixel Perfect overlays a PNG over the page
many plugins for Firebug exist, they can be found here: http://getfirebug.com/wiki/index.php/Firebug_Extensions . XRefresh and a dual screen for example. Firediff could match your needs
https://chrome.google.com/webstore/detail/hjpdnlklajjpbihamlcpllppegpekicg
I made this because I agree with this question. It allows you to inspect and drag an element. Your new coordinates, calculated by Firebug will be updated when dragging ends.
Use dreamviewer, when you set css to absolute, in the preview mode you can drag and drop your element where ever you please two and CSS is generated automatically with the positions top, left where you placed your element
Related
I'm going to try and ask this the best way I can so sorry if I am not clear.
I am trying to learn css and html.
When it comes to positioning a image, for example top: # px;, how do I know what the pixel location is? Is there a program for that or is it a guessing game?
I hope you can understand my question. Thanks
Knowing the position of a element just by using CSS is not possible. This can be done using javascript. Check this link1 and link2.
If you know jQuery, it would have been more simpler.
Just use .offset().
is there a program for that or is it a guessing game?
You can also guess the position of an element when you assigned fixed dimensions to all the elements in your layout.
If you're trying to use the CSS top property in conjunction with display:absolute or fixed, then yes, it's mostly a guessing game. You can use browser addons to adjust your CSS so that you can see your element being positioned as you change it, get an IDE that supports live updating or previewing, or take a screenshot and measure the pixels yourself.
Normally, however, you shouldn't be placing elements this way. Just let the DOM do it's thing, and use padding and margins to put things into the right place. It takes a bit of trial and error to get things visually appealing, but it really isn't so bad.
I've recently found that most of the measurements I thought I knew were actually different from what I thought they where due to browser specific defaults. I assessed that all my knowledge of my visual inspections were relative...item A is 20px so I can see that Item B is 22px. However because of browser hidden defaults...this method doesn't work too well. How can I know what absolute pixel count is.
Currently, I just created a 20px by 20px ruler in a graphics editor with tick marks.
Attached here
Now I can move this around by using absolute positioning and measure things. However is there something built into the development tools to do this. I'm using Firefox 10 right now.
Thanks
Chrome's inspector tool shows the dimension of any element that you happen to hover over. However, if you must remain loyal to Firefox, Firebug can show the exact dimensions of any element upon hover as well. When you open up Firebug, click "Layout" in the sidebar to the right. Then, when you hover over an element, the dimensions will appear within that box (no clicking necessary). Not exactly as intuitive as Chrome's inspector tool, but it works regardless.
Are you just looking for a tool to easily measure heights and widths without messing around in Firebug?
I'd suggest this add-on for Firefox (also available for Chrome): Web Developer
If this isn't what you're looking for, can you please clarify?
Edit: If you can't install software or add-ons, use the no-install Firebug Lite
there is a sweet measurement tool called "measure it." you can find it HERE. that's the best one i have found so far.
another thought... you could check and make sure all of your different browsers aren't at all zoomed in... view actual size etc...
also - are you using a "reset" of any kind ? if not - you could check out the meyer reset - or normalize... or - the freak reset... (that combines both).
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
I use a screenshot tool like SnagIt and this tool is able to make a screenshot of a specific element inside a website. I tried this feature with firefox, safari and ie, all runs fine. When I use the mouse pointer to aim an element, SnagIt shows a red box around the hovered element in the browser. For example, this tool knows the exact coordinates of a div or img element.
What is the technique behind this feature? Is there a common way for every browser? I've already used Spy++ to get the window handles, unfortunately this isn't the resolution.
I'm in a project in which I need this feature for different browsers.
Thank you very much,
Mark
If you want to know the x,y coordinates of any element in javascript, Then I suggest you use jquery [http://jquery.com] on your page and use its offset function.