Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
How make round container, or any round responsive shape with some background colour or image for adding text on it, or for graphic purposes |
||||
|
Just use a container and set its border radius to some value. |
||||
|
As i wrote i want round shape, really round and responsive, it must remain round in different resolutions and in mobile view. What you advise i tried before this post, it is useless. Just try and than click preview button and show result in browser, also you can resize the browser to see another results. Thanks. |
||||
|
Round i mean CIRCLE |
||||
|
Then use a very, very large border radius, like 200. And if thats not enough, force the shape to be sqare, by setting the size to a fixed value, like 200,200 |
||||
|
See here for the basics of creating a responsive circle https://www.w3docs.com/snippets/... (Scroll down to the paragraph on responsive circles.) You can use further CSS to style the circle as to border, fill color, etc. |
||||
|
it is pity that there is no built in tool to make elementar circle. |
||||
|
Thanks Erik, but it not works. Just check it yourself in different resolutions in rocketcake with slider. |
||||
|
Erik, for easy understanding try as you write put it in the center of page or even better put it in the right side of page and move slider and you see the result. |
||||
|
Be sure that you set absolute values for both widht and height, and set them to the same value. (No "%" at the end, no "Auto"). Then it doesn't resize. |
||||
|
izzo wrote: As i wrote i want round shape, really round and responsive, it must remain round in different resolutions and in mobile view. Here is how to create a responsive circle container in RocketCake: - insert a HTML Code element from the Toolset - set its BackgroundMode = invisible - set its BoderMode = none - set its Size so to define the diameter of the circle = % of screen width, or page width respectively - right-click the HTML Code element and select Edit Code ... - copy and past this code <div class="rescircle"></div> - right-click the page in the Documents Explorer and select HTML Code ... - select Additional Code in Header - copy and paste this code <style> - click Preview to view the result You can download the test file from here https://4hundert.de/rctests/resp... Here some more examples https://4hundert.de/rctests/resp... |
||||
|
Micaelo, many many thanks for yourt effort. Can you also know how to do this - Hover Menu not disappearing on mouseout, on moseover the menu opens, that is good, but on mouseout not disappearing, even when click the same menu, need to find some empty space on background to clikck and then closes. On mobile view sometimes it is very hard to find empty space to click and the menu covers the most part of page. On ambiera site is the same problerm. How to solve this bug or task ? |
||||
|
izzo wrote: Micaelo, many many thanks for yourt effort. Can you also know how to do this - Hover Menu not disappearing on mouseout, on moseover the menu opens, that is good, but on mouseout not disappearing, even when click the same menu, need to find some empty space on background to clikck and then closes. On mobile view sometimes it is very hard to find empty space to click and the menu covers the most part of page. On ambiera site is the same problerm. How to solve this bug or task ? I see what you mean. Same issue here, but I don't know why that is. That's something niko can hopefully answer. By the way, on a mobile's touch screen you don't have a mouseout. So there is no way around tipping somewhere else to close a sub menu. |
||||
|
Michaelo, thanks for answer. On mobile just touch the screen with the finger, touch any convient place on screen, and menu will close. |
||||
|
|
){kind=link}