Thanks in advance for any attempted help. Here's my goal.
Current Setup:
I have an image in a DIV that's basically a straight, vertical line. The site is done mainly with PHP.
Goal:
I want to animate either a horizontal line or other small image along the length of this vertical line based on percentage values I pass somewhere.
Possible Options:
- A transparent DIV on top of the DIV with the image that moves up and down based on a % of the height.
An image (line or icon) in an adjacent DIV that accomplishes the same movement based on percentage
If doing this via a percentage is not possible, I could possibly send information when specific points along this path are crossed and use that to update the horizontal line.
Concerns:
- If I can achieve this type of animation in a DIV where do I dynamicly pass the percentage information to in order for the DIV to move?
I'm assuming some solution involving jQuery/Ajax would be needed to update the percentage values so I might have to ask that in another question unless there's a simple method someone could outline.
A solution that works with a DIV whose height is either a percentage of the container or statically set in px would be ideal.
Thanks again for your help.
d -
Related
I'm trying to make a list of thumbnails of variable amount be centered while the thumbnails all fit on one line, but then subsequent lines be left-aligned, while the parent element responsively stays centered in the page. width:fit-content works well for one line, but when there are multiple lines it goes to 100% width (in mac chrome anyway). Illustration of the problem:
http://codepen.io/scotthorn/pen/eutAH?editors=110
If there is another way to achieve my desired goal, I wouldn't mind changing any part of the css or html markup. A background that fits the area isn't necessary, it's only in my example to better show what's going on. My primary goal is to have a list that behaves like a centered container of inline-block elements for one-line, but then when a second line has to be created, the first element in it lines up below the first element of the first row rather than being centered by itself.
Hopefully that makes sense, if not I can make a mockup.
I would imagine wrapping the whole thing in a div and centering that with a % width would do what you want. But a mock up would help me understand.
Or you may be able to use margins to squish the inside content.
Your example works well, except you probably want to add a max-width to your UL..
For example, if you wanted to have a max of 7 items per line in your case, you would
add:
ul { max-width:630px}
updated codepen
good luck =)
I've struggling to position these hexagons next to each other on 3 lines, here is the page I'm trying to manipulate http://goo.gl/xpHmw
effect I'm trying to achieve
http://www.queness.com/resources/images/13901.gif
Many thanks for any help and assistance.
There are probably many ways of achieving it. My solution would probably be wrapping the hexagons in a relatively positioned container, assign a position: absolute to all the hexagons and position each of them manually with 'left' and 'top'.
I've abstracted the code for you to better understand.
http://codepen.io/nobitagit/pen/ojvue
ps - next time you ask a question you'd better abstract your problem in jsfiddle.net or codepen so other people will likely find it easier to answer you and the problem + solution will be there for others to see in the future.
Okay so I just checked your website at home.
This isn't something that's very easy to do in CSS because it doesn't fit very well into rectangles or "blocks" like CSS employs.
I have some suggestions. Perhaps it doesn't "answer" your question but it will give you a good start.
Div tags do not hold semantic value and they are "empty" in that regard. In this case, you used numerous div tags inside an unordered list <ul> to create backgrounds for the hexagons. This is fine and all but I would recommend:
Remove the divs completely. An unordered list really shouldn't have divs. It is an "unordered" list afterall. I would either use divs exclusively or better yet:
Use an unordered list and create each hexagon as a background. One box holds -> 1 hexagon. The hexagons do not scale. No reason to have a separate div for the top/bottom.
You don't have to use absolute positioning. You simply need to have some of these hexagons overlap. For the second row of hexagons you can use a negative margins to offset and place them in the correct location. Use .png for transparenencies on the corners!
Pseudo solution:
Each hexagon takes up a square.
Create hexagon backgrounds as .png in photoshop
Hold each in a <li> and float them in a <ul> --> do not use divs
Use a negative top margin to overlap the second row into the cracks of the other hexagons.
Good luck. Post an update with your progress. I'll help you further; but I can't produce a solution for you.
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...
I'd like to create a scale with stars\flowers\whatever that will enable me to graphically present a fraction, in case of average grade (say 4.35). Is there a way to partially fill an empty non-rectangular image using CSS?
TIA, Matanya
If you are okay with using a div instead of an img for the image, you could set the image as a background in the div element, and calculate the width of the div, depending on how much of the image you want to show.
The calculation would have to be done through JavaScript, or server-side and then added inline on the div element, though.
First see http://jsfiddle.net/b2BpB/15/
3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.
When you shrink the width of the browser window - the columns start to stack down the page.
Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?
Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)
--added 19 April 2010 am UK--
This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.
It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.
One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.
Thanks in advance...
--added 19 April 2010 13:44 UK--
#RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:
http://jsfiddle.net/qr7WB/
I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.
If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!
In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.
First off: This isn't an answer, however I have several points and it's more readable as an answer.
I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.
You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.
The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.
Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.
As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.
BTW I can't see how iframes would have to do with problem at all.
Do You mean like this?
Example Fiddle : HERE
if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help
It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!
Updated fiddle per comments : HERE