I know that when you set a new css translate you need to the pixels you want to move, ex: 50px,60px.
So that is a relative movement to those pixels: http://jsfiddle.net/8CECx/
The div's remain next to each-other
Is there a way to move absolutly? For example you can say "move to 30px 50px" and have 2 elements overlap?
Thanks for the info :)
Ok, I’m adding another answer, since the question changed.
I’m still not sure what you’re trying to achieve. If you just want the 1st div to move and overlap the 2nd, why animate the 2nd as well? Or if you want both to move, just the 1st one more, why give it the same translateX value?
Also, I don’t see why you need transforms at all for this. If you just need translate() and no other transform, chances are absolute or relative positioning probably works for you just as well (and has much better browser support)
Related
I'm using the following radial menu...
http://www.cssscript.com/demo/radial-popup-menu-with-javascript-and-css3-circlemenu/#
Looks great, however I want two on my page. One bottom right and one bottom left.
That's no biggy, however obviously when on the left of the screen i need the buttons to pop out to the right and visa versa.
my question...
for each of the list items there's a transform in the CSS like...
transform: translate(-144px, 0);
obviously having it as a positive 144 will make it move to the right, which is great when the menu is positioned in the bottom left...
Rather than having to have a left class and right class with essentially the same CSS behind it, just one being positive and the other negative, is there a nice way to have 1 set of css rules that will just translate the li away from the div/screen edge?? or maybe I am thinking about this completely wrong (feel free to say if i am being a numpty)?
thanks
marking as resolved, as per #hissvards comment
"I don't think there's a way to do it using pure CSS, but it would be
dead easy with a preprocessor. - Hissvard"
In addition to the question stated in the title, I also conversely would like to know how is display:inline different from clear:none?
EDIT: I had a hunch this question would be unpopular... let me elaborate.
Both seem to involve putting elements onto their own line. "display:inline" flows elements inline, which strikes me as very similar to the behavior of "clear:none", which allows elements to float next to you.
Conversely if you want your div, perhaps a footer as in this example https://css-tricks.com/all-about-floats/, to stand on its own then you can say "clear:both" indicating that nothing may float next to you.
But this behavior seems very similar to "display:block".
Hence my question, how are these different in behavior or expected usage?
I'm sure it's obvious by now that I'm a total amateur in CSS, but after 15 years in backend programming I'm trying to face my fears and learn it. I hope someone might answer the question rather than downvoting me for trying to learn something new...
display:block -> Displays an element as a block element (like <p>)
clear:both -> No floating elements allowed on either the left or the right side
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
An inline element does not start on a new line and only takes up as much width as necessary.
In this fiddle http://jsfiddle.net/dAHqe/2/ I've created examples for the 2 main uses (that I've seen) of border-radius for lists.
Apply border-radius (and therefore background-color) to the container (a div or a ul).
Apply border-radius (and therefore background-color) to the first and last content items (lis or nested divs) via the :first-child and :last-child pseudo-classes.
At first glance, it looks like the first way (applying it to the container) is much more concise, yet I see the second way all the time.
Is there any good reason (i.e., scalability) to use the second way?
Update: This is for a mobile app, so I won't need the :hover pseudo-class.
Personally, in the examples you've given, I'd always just go with the simple option and put it on the container.
However, reasons for doing it the other way:
Maybe you don't have a container, and you can't change the code to add one.
You have some reason to want the flexibility to change individual list items in a way that having a single container wouldn't work. eg Maybe you want to make them semi-opaque on hover?
You have to work around an awkward HTML structure. I had a case like this a while back where I had to add rounded corners to cells in a complex table. The cells in question were sub-heading rows and columns in a bigger table, but the way it all fitted together meant I had to put the rounded corners individually into separate cells. It was fiddly and awkward but ended up looking how they wanted it.
The coder doesn't know CSS all that well and simply cribs it from somewhere else that does it that way.
Those are the only reasons I can think of. But I suspect most cases fall into one or other of those.
Hope that helps.
So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.
I am designing a website for a client, and I am trying to get two side-by-side DIVs to adjust to 100% of their container. I've got the side-by-side done, but I can't get the right DIV to be the same height as the left one.
You can view the problem here: http://www.campusmomlaundry.com/
The "challenges" and "benefits" DIVs should be side-by-side and the same height, without manually specifying the height. How can I do this?
Your problem is that the outer div is sizing automatically by the inner content, which is sizing automatically by its content.
You have couple of options:
Use the background solution mentioned in the #R0MANARMY answer to create the visual ilusion of two equally tall columns.
Set the height of the two inner divs to be the same exact number (using px or em)
Set the height of the outer div to an exact number.
Play with the display attribute and try couple of different values like table-cell and so on. Keep in mind that this one is not going to work in some older browsers. (Not only IE, but some old Firefox and Chrome releases as well)
Use simple table with one row and two columns.
I realize that the last one is the most controversial of all. Yet it is a possible solution for your problem and there's no reason why you shouldn't at least evaluate.
([groan] please, please, nobody mention the words "semantic HTML"! there's no such thing in our universe.)
There's an article on A List Apart on solving a similar problem, you could probably use that as a reference: Faux Columns.
If it was me. I would solve this problem via javascript. Using jquery you could do...
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
That should do it. If your like the people I work with, and you don't like using Javascript for CSS problems. Then you are probably flat out of luck. Alot of the time, it is much faster just to use JQuery, then to use the "right way" using css. You could probably spend all day trying to get it to work with different combinations of styles.
Perhaps number of bullet points in the left DIV?
Have you tried: height: auto; or height: 100%;?