I recently bought some code on code canyon (I thought it would save me some time) and for the most part it works, but I just can't get the positioning right.
Basically I need cards in a column to be able to be flipped over. The card needs to take on it's own height according to it's back & front content and also fill the width of the column.
The part that I can't seem to get right is getting the cards which need to be flipped correctly underneath each other.
This is my JS Fiddle
At the top of the rows are supposed to 2 separate boxes which is supposed to be flip-able, followed by 4 rows which are examples how it should look.
I am sure it has something to do with
position: relative;
in the css, but I just can't figure out what I am missing.
Remove the position: absolute; setting from the .card-container .card>div style and add
.card-container .card .back {
top: 0;
left: 0;
position: absolute;
}
Your problem was that having position: absolute; on both the .front and .back divs caused the container divs to have no size. Therefore the following container divs were positioned at the same point as the previous container div.
Related
I'm using this script from W3Schools.
There was some minor modifications acording to my needs.
I added in .overlay class an overflow-y: auto; because my content is longer and the original example has only a few lines and the scrolling bar is coming handy.
I switched in both .overlay .closebtn classes the position: fixed to position: absolute because like I said the content will be long and the closing button have to be present while scrolling and not fixed only on the top.
The problem is in .overlay-content is specified top: 25% and if I try to add bottom: 25% is not working. If I delete both top and bottom and I use margin-top and magin-bottom is working but is that valid? It's is valid to use margin in conjunction with position:relative?
It will be work
.overlay-content{
z-index: 999;
}
Im trying to accomplish this:
http://codepen.io/Mest/pen/oKBIu?editors=110
.child-div {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
but instead of a "child-div" i want to target an img-class, like this:
http://codepen.io/dantveita/pen/ZGdKmd
.parent-div img {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
When i do this, im getting a horizontal scrollbar, and im not sure why. Could anyone explain this to me. And if possible, provide a solution?
Thanks
Since you are using position: relative, moving the image to the left doesn't actually take it outside of the document flow, so, according to the browser, it still thinks the image is sticking out.
Because there are no containing elements, there's also no need to use viewport-width over a percentage. For some reason, using viewport-width instead of a percentage adds a little extra space on the right, underneath the scrollbar, even when the image is absolutely positioned.
However, this works:
.parent-div img {
position: absolute;
left: 0;
width: 100%;
}
You may also want to remove the width="1400px" from your image tag, as it isn't necessary and may cause inheritance issues later on.
Im going to go with
.parent-div img {
display:block;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
on the img-class for now, while hiding overflow-x, until something comes up that makes hiding the scrollbar prevent users from viewing content.
The reason for using this method, and not closing the "previous" container (which would be the obvious choice) is that i want a quick solution for a wordpress blogtemplate, where all images given a specific img-class will stretch full width, when media is inserted from post-editor.
Heres an example of the effect im looking for (theverge.com is obviously closing containers):
http://www.theverge.com/2015/8/4/9090897/mlb-bam-live-streaming-internet-tv-nhl-hbo-now-espn
I have a div which i want vertically aligned to 50% of the height of the browser window at all times.
I don't know what the height of the browser window is going to be at all times, should the user scale this window. If placing it within another element is necessary, great, but as just specified, I have no idea how tall the viewport is going to be at any one time.
I'm not going to be using javascript either.
I have read through the site, i have gone hunting for a solution, but I really want to throw this out there (again) as I have yet to find a solution that does exactly this, either by hook or by crook.
Thanks.
You don't specify if the has a fixed height or not? If so then you can do this with one element, just add the following example CSS:
.centered {
height: 100px;
width: 100%;
background: red;
position: absolute;
top: 50%;
left: 0;
margin-top: -50px; /* half the height of the element */
}
You could use a number of techniques, depends on how you exactly want to implement it. Some (older) but still relevant reading here.
I would like to do this from my website here: http://project.jazzassite.tk
and be able to place the contents into a div that I can center or do whatever I want with them. The only problem is, If I float it, it doesn't work, and if I use position:relative They create a stair case effect.
I was hoping I would be able to do this purely with CSS, and not use any tables, ect.
Any help appreciated,
Jazza
Are you wanting to center the navigate div which contains all the 6 children? If so, this should work:
#navigate {
position: absolute;
top: 50%;
left: 50%;
margin-left: -540px;
margin-top: -15px;
}
The margin-left is the half the width of the contents and then made negative. The margin-right is half the height of the contents and then made negative. This will vertically and horizontally center your objects. Is this what you're looking for or did I miss the point?
Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.
What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.
However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.
Here's what it should look like http://www.binarymark.com/layexp.png
Can you help me please?
Seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative/absolute positioning and making sure it supports all major browsers.
Thanks.
position: fixed;
right: 0;
top: 50%;
Edit: try inserting this div as the first child of your <div id="content">...
<div class="right-tab">TEXT</div>
CSS:
.right-tab {
position: fixed;
top: 50%;
width: 1100px;
background-color: red;
text-align: right;
}
That should get you started. The width will specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.