The Image attached is what i am trying to accomplish!
Now here is my codePen example: http://codepen.io/anon/pen/leEdg
I cannot change the placement of the circle cause that is being animated on a path and has to stay where it is. What i want to do is be able to move the .stepInfo over to justify it correctly. Now the text that comes after the little line ball guy is dynamic and will be a variable size. So fixed width might not be the right answer.
Any help will be GREATLY appreciative! Thanks in advance!!!
So here is what I think will work out for you! I floated the text to the right, but that is only a minute problem to other things. Going through your code, I found 'pt' instead of 'px' which is fine but just stay consistent going through. Another thing, if you adjust the padding of the step label, it will adjust the positioning. So in a new, revised codpen, I did that for you :) If you have ANY questions, just leave a comment and I can try to help explain as much as possible.
Related
I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.
I've look around for answers and can't seem to find any. I've posted an image, it's the call for your free consultation/we'll call you. It seems to have an unusual amount of whitspace on either side. It's making my site scroll way farther right than it should. Any help is greatly appreciated. Thanks!
http://gdrummer95.comule.com/
The problem is #contactform has a width of 85%. That's causing the page to scroll to the right. Set the width directly on the image instead of the form.
I've tried this from so many angles but can't figure it out.
See my map here: http://defendiendovidas.org/test.html
I need the country names in to appear on top of everything else. z-index isn't helping, even though my span is position:absolute.
Any pointers to achieve this would be greatly appreciated!
P.S. if anyone has a suggestion for how to build this map better, I'd be keen to hear. Thing is, I want the fade-on-hover effect. But my images are overlapping and therefore as you can see with Brazil, the hover is kind of conflicting with nearby countries (images) that are positioned "on top" of Brazil. map/area is no good because it doesn't allow for area:hover...
Thanks!
The solution is to apply the opacity to the img and not to the entire li,
since opacity and z-index are somehow connected.
Also, since you've asked if anyone has a suggestion how to make this map better, well...
Your code was really messy and you've also used lis outside of a list for some reason, so I kind of changed a lot of the HTML too.
Here's the Fiddle: Link
Hope it helps :)
I am not able to see a full map here. You have mentioned it too. Well there is also no other span found!
The map is somehow cool. But if you want the images to ride over the image. You might use the position relative!
Have you tried that? You have an absolute, but absolute works on the div or container its relative too. If there is no container having position relative the main body tag is considered to be the one. So try giving this image a relative position. Then add the z-index and absolute position!
Try Position:relative or Position:absolute
Give z-index a shot too, z-index:50
Before to ask my question, take a look at this: http://db.tt/IdmsYZYS
I have some trouble with let black image touch the bottom, the top and the right side of the text box. So that in fact the black image will cover the whole right part of the spitted box.
I am using Wordpress. Maybe you have some tips for me. But just HTML code is also great.
Thansk a lot for helping me!
You can't set an element to have 100% height within a container that has a fluid height. You should try using the Faux Column technique, which solves your problem.
please see this example http://jsfiddle.net/7trcV/
what I'm trying to achieve is ability to put an arbitrary icon to the right of the text in a way that text width is limited. In the example I posted the problem with the second (short text) is - the icon is displayed detached from the text.
Any help is appreciated!
How's this? http://jsfiddle.net/7trcV/5/
I gave the .content a right padding and set the icon as it's background.
Ok, try this http://jsfiddle.net/7trcV/6/ it should have sorted out your underline issues. I'm not addressing the clickable icon because that's a completely different requirement from your original question.
Ok sorry i did not look at your code properly for the first time... problem here is absolutely positioned icon which need to be floated next to your spans like this: jsfiddle link
after you do this you must set max-width of that span to be width of container-width of icon... hope this will help
You could use javascript to find the width of the span, and have the icon positions right next to it.
Exmaple here: http://jsfiddle.net/peduarte/KCttp/