I'm using bootstrap 4 and I would want to achieve this layout for my website. I have the idea that we can use carousel since its a slider. When I click on the next or previous button, both the yellow slider and the image on the right changes. I also need the slider arrows to be on that position.
Although, I can achieve this through CSS position property for example.
position: absolute;
top: some value
left: some value
.....
which will be under the position relative. But I want to achieve this a bootstrap way with some custom CSS so that the responsiveness of this layout won't break.
What would be the best practice and approach to have such UI keeping in mind it should be responsive too.
Thank you in advance.
Related
I'm creating a webpage but I am having some problems with responsiveness.
Right under my logo, there is a large image. (1000 by 550 px) Over that image, I want to place a menu - and I think I've worked that out with position: absolute. However, I want to use an introduction text, and I cant figure out how to do that.
Could I just use a TextBox with absolute and z-index? Otherwise, how can I add the image as a background image and make it responsive?
background-size: 100%;
That would make your background image responsive. But only if the container itself is responisve though. A more exact answer would require a fiddle or at least some html and css.
If you click here: http://www.ideagasms.net/index2 you'll see the nav menu surrounds the banner image, like a frame. It was put together that way using three div's, two of which are css rotate 90 deg, position absolute. Of course, as soon as you resize the window the navmenu breaks.
There must be a better way to build a frame-like menu. A couple suggestions, or examples, I just need ideas on how to build something like this. Maybe a jquery solution or something would do the trick.
You can change #nav-left and #nav-right positions to absolute, then center them with left: 50% (like you did with #headerwrapper), and correct their positions with margins, for example margin: 0 auto 20px 122px for #nav-right.
Mark their parent element with position: relative; (but without any top/left/bottom/right propertes), that way the rotated navigation elements will be positioned within their parent rather than the window.
However, I think your navigation concept is novel, but terrible (and also visually unappealing) from a usability perspective because people can't read rotated English text easily.
I'm looking to create an html/css gallery with no spacing inbetween each gallery element. Just for some context, all the gallery elements are the same size and are list items contained in a ul inside a div. I already have media queries set up to readjust the rest of the site and the gallery image sizes. However the actual elements are inline-block so they adjust themselves. I want to know how I can make the elements so they animate to their new positions instead of just snapping to them. Adding the standard transition values to the css of any gallery related item didn't seem to work. I'm not sure if I need to change my markup for this to work but any help would be appreciated!
Animation can not be achieved with css alone. You will need some javascript. I would advise you to have a look at jquery.
In here and here, there are some examples of the quiz questions that are used in Udacity.
How can I achieve such an effect ? (i.e. : how can I build a page where I have an image, and then some form elements over that image ?)
Maybe I could use a table with the image as background. Would that work ? Would it be reliable across browsers ?
There are different possibility.
You could place the elements with "absolute" or "relative" position in order to get the element exactly over the image.
You could also draw with a CSS3/HTML5 Canvas.
I think the best thing to do a simple form with an image should be following this tutorial
If you manage to create that then you can tweak the CSS code in order to be able to place the card where you want
They just have an image and then absolutely position form elements on top of it.
input {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
Just need to change top and left until the input element is where you want it. The input elements can sit right on top of the image.
Hi Guys i have applied Relative positioning to the image as the above screen cap . but what i required is to take this image to front of that gray menu bar . what should i apply for menu's CSS class to do that ?
for relative position of the image i used the following code
position: relative;
top: -Xpx;
z-index: 99;
z-index:999;
or some other really high number to force it above all other elements.
Relative position is given to an element when you want to anchor (contain) other positioned elements inside it. If you want that image to appear on top of everything else you need to position it absolute. This, of course, depends on what it is you are trying to achieve.
Without seeing the html and the full css this is my best guess: You need to set the gray bar to a position:whatever and then set the z-index on that one as well.
I think you are applying the css style before the styling of the gray bar.
So you should apply the css styles on the image after the gray bar style or code.