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.
Related
Long ago at a conference talk on React I saw the presenter add something to his code that allowed you to click-drag a divider on the screen by getting to within a certain number of pixels of it, rather than have click exactly on it.
It's a handy concept for improving usability, though I don't know what it is called. Adding 'slop' perhaps? Anyway I completely forget how he did it, presumably using some padding approach. Does anyone know what this practice is called and how to implement it? I assume it was something he achieved it with CSS but am not sure.
You can use vanilla js to do that. Using element.getBoundingClientRect() to retrieve the element's offset relative to body and comparing with the actual mouseX and mouseY(in the click moment of course) you now know the distance between the element and the click, now add some logic like: Case distance < acceptable offset then do some side effect.
I just noticed a resolution issue with a site I am creating, and as I am pretty new to HTML & CSS, I really can't figure out how to fix it.
here is the page where the issue occurs : http://website213.com/tour
I need to make the Right elements of the page lined all together, but as soon as the resolution increases a bit, it gets messy !!
Kindly help me fix this issue.
Best,
The problem is the positioning. Some elements are absolute, some are relative and some seem to be fixed. It would be impossible to go one by one, you will have to see how the whole site is being constructed.
I recommend you start by reading how positions work. They are really easy to understand, but if you haven't read about them they can ruin your life. Just do a search for css positioning or check this link: Learn CSS Positioning in Ten Steps.
I am trying to create a similar effect as seen here:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?
When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.
You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.
A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.
I recommend the following link, scroll down for the image drawing:
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.
You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/
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
I'm working on my html project, and everything is going well.
Now I'm doing the same project with framesets, but I discovered that the page in a frame set won't scroll as a whole page (you can only scroll each frame at a time).
How can i solve this?
Please help
It sounds like what you want is perhaps a static design around your scrolling content, correct?
If so, what you should actually do is make a single page (not a frameset) with your desired DIV layout (a good example can be found here), and then have your content div use CSS that will allow it to scroll (e.g. overflow:scroll;).
Hope this helps.
Don't use frames! I know this is a horrible answer to your question, but believe me - loads of peeps would agree!
If you can, use plain ol' CSS and NO FRAMES.
Also, there is rogue synchronised scrolling Javascripts floating around on the Interwebs - But I wouldn't use them. People who have Javascript off won't get that effect.