I have a flex container in which multiple flex items are placed from top to bottom. I want some light grey colour lines behind this flex container to form something like this.
I was trying to add one more flex container on top of this and draw lines on it, but that didn't give me any results. Can someone please tell me how to achieve this?
Try to use position absolute property and use two box front box make transparent and in second box, set display grid border and you item will inside the border of grid.
Related
I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v
I am sending a sample site and picture, you can check it. The image I sent has a scrollable image and a box section for text. Half of the 2nd image will be visible and when you slide to the left in the slider logic, 2 images will come to the front and the text inside the box will change.
https://prnt.sc/26mtuw6
Although not exactly the same, our latest project section on this site is an example
http://paul-themes.com/html/liarch/home-default.html
If you wish to make a design like the img below :
For the images of my code below, I'm using Bootstrap 5.1.3 (the class names are mostly from the framework)
1) you will need to use some display: flex on a container in order to have elements in a row and next to each other (create it in your CSS to use that, if you're not using the Bootstrap Framework). Also, add a width:100% on that container in order for it to take the whole space (it's the w-100 class from Bootstrap, or else, add it in your personnal CSS - here 100% is 100% of body)
2) you will need to make that container scrollable with a overflow-x:scroll
3) you will need to create a block (div) for your title and paragraph that needs to be in position: absolute and give it top/bottom/right/left coordinates
5) you will need your container to be in position: relative, so the title/paragraph (step 3) is placed depending on the container
6) you will need to give your imgs a width sufficiently big enough for the scroll to actually start working (you need the elements inside your container to be larger than the container's total width so it becomes scrollable)
This is a quick example I made :
Here is the code of my example
HTML :
CSS :
I'm trying to create a navigation bar with tabs, each tab should has a bottom border if it's selected.
The problem is that when the border is "active", the text move up and I don't want that.
How can I solve?
Here a Codesandbox that reproduce the case. I tried with box-sizing and with overflow hidden but it seems not to work...
I don't like the second example because the border is not inside the gray area
You can add "pt2" className to the selected tab.
I have created a segment from a circle but when I try to apply a background image to it, it applies it to the whole circle resulting in the image getting centered somewhere below what the user can't see.
Right now, only the portion of the circle that overlaps with the rectangle gets displayed thanks to overflow: hidden, I have just disabled the hidden for now to show how the image is actually getting rendered.
Can someone please tell me how I can apply a background image only to the portion of the circle that's visible?
This is the result I want:
Demo: https://codesandbox.io/s/segment-background-image-msu63
^ I achieved this by hardcoding the position of the image but I am looking for a CSS oriented approach because that'll be much more dynamic.
EDIT: so I was able to figure it out. The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.
The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.
You can adjust the background-position top top center:
background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);
I'm currently using grid-x from XY grid built from Foundation (Zurb), although when I have a cards layout (as shown below) with grid-padding-x, one can see that the cards come centered (which is great), although I would like to put a sorting bar on top of this, aligning this to the card layout underneath proved to be difficult since the card layout adjusts accordingly.
What I would like to have as shown in the jsfiddle, is a fixed width and height of the cards and automatically centered (as fulfilled by using grid-padding-x) although then I would like to give the same margin to the navigation bar on top to be aligned to the cards (margin-left and margin-right)
Is there an easier way of achieving this? or is there a way to align them together?
JSFiddle: https://jsfiddle.net/7hjjt2Lp/
How am I expecting it to look
Probably the simplest way to achieve what I believe you are attempting is to put the navigation bar inside a .grid-x grid-padding-x as well. This alignment problem is one of the challenges of using a padding-based grid; you have to have everything inside the grid to align properly.
So in this case, you would end up with
<div class="grid-x grid-padding-x">
<div class="cell">
<div class="sort-bar"></div>
</div>
</div>
You can see this in this fiddle: https://jsfiddle.net/7hjjt2Lp/2/
Alternatively, if you use margin instead of padding you don't have the same problem. You could shift to using margin grid and no longer need to nest your sort-bar... for that solution just shift your grid-padding-x to grid-margin-x. See https://jsfiddle.net/uy5euxc8/1/
Looking at this layout, I want to use jQuery/Javascript to put the Red Box, in the Gray Container under the left small Blue Box whether zooming in or out with any browser.
I am trying to accomplish this by NOT putting the redbox #badplacement div inside the Gray Container's #outerwrapper div. Any idea how this can be accomplished?
(To start, I change the #badplacement css left to 243px, on normal browser zoom level, where it is under the small blue box.)
Fiddle: http://jsfiddle.net/Q56up/
Clone the outerwrapper div with css rules but without background and place it over the original (position:absolute, z-index:1). Put Red Box inside and position it relative.