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?
Related
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.
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'm trying to set up a responsive header that takes an image and resizes it to the browser – easy enough. What I can't manage to achieve is centring the image vertically within it's container (in this case an a element)
See example:
http://jsfiddle.net/jwoodcreative/tUW3k/
I've tried a few css tricks that havent worked and some jQuery. Either type of solution would suit if anyone knows of one.
You can always use the top:50%, bottom: 50% trick like here: jsfiddle v13
.outerElement {
position: relative;
height: XXpx;
top: 50%;
}
.innerElement {
position: absolute;
bottom: 50%;
}
This works, because the height of the innerElement is not the same as the one of the outer Element, so you can center your element (if the heights were identical, you'd just position it to pos:0 again)
Like this? I've changed the image to be a background-image, which can be centered very easily in CSS. To make sure the link is shown, I have added a non-breaking space ( ). I think this is what you want, right?
You can change the appearance of the image more by looking here, at the documentation of the background property.
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.
I have a header, mainbody and footer. Header and mainbody are properly styled. Now for footer I want to make it appear behind mainbody, so I used:
z-index: -1;
position: relative;
top: -60px;
This gives the desired result, but I get an extra space of 60px at the bottom.
How do I clear this extra space?
Paul is correct. margin-top: -60px; instead of top: -60px;. Another possible solution would be to set the "mainbody" to position: relative; then to use position: absolute; bottom: 60px; on the footer - although this woild mean the footer needs to be moved inside "mainbody". though as long as the parent of footer flows with "mainbody" you could use this same trick on that element instead.
The “extra” space at the bottom is the space that the footer would be taking up. Relatively positioned elements still take up the same space in the page’s layout flow, even though they’re appearing somewhere else.
You could try a negative bottom margin on your mainbody. You may find this means you don’t need top: -60px; on your footer.
You can still use:
position: relative;
top: -60px;
for the section you need but set
margin-top: -60px;
to section which appears next. In this case - footer.
another solution for this is:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
top creates extra margin and margin-bottom removes it
for some reason for h tag only this worked for me. negative margin-top doesnt work
One way to achieve that would be to put the div inside another, absolute'ly positioned div so that it's taken out of the document flow.
Not really a direct answer to your question, but depending on what you want to display behind the main content, you can perhaps just fake it.
If it´s an image, you can simply put it in html {} or body {} (or a div that encapsulates all content) and align it to the bottom.
The appropriate answer is to make the body have position relative then style what you want to style using position absolute and using top of your choice