I'm trying to get a jquery carousel centered on the screen, even when the clipping area is wider than the viewport. This will basically always give the element a negative left margin -- how can I specify this? The clipping area is a fixed width but of course the viewport area is variable.
Here's the best solution I've been able to find uses a wrapping element around your-fixed-width content, then a -50% margin on the content itself. This is off the top of my head, but it should be enough to get you started. Here's the code snippet:
div.wrapper {
position: absolute;
left: 50%;
}
.content {
position: relative;
margin-left: -50%;
}
<div class="wrapper">
<div class="content">JQUERY BIZ-NASS HERE</div>
</div>
Of course, this assumes that your div here is a direct descendant of the body tag, and that your browser specifies body to have a width of 100% and no margin or padding.
Related
I have a timer bar showing the remaining time of a contest. As the user answers more questions of the event, scrolling down, I want the timer to be fixed in its position. I know this can be achieved by setting the CSS position to fixed.
But fixed needs either a width set for the element, or left and right values. My problem is that the layout of the page is boxed, with margins at the left and right of the "box", and it depends on the user's viewport, how much width there is for the box in the middle...
How can I calculate the width once the page loads and then set that width to the timer bar in order for fixed property to get the data it needs?
I tried setting it to 100%, but for position: fixed 100% means 100% of the viewport, not of the parent element, so the bar grows from the right, outside of the viewport (if you can get what I mean), since there are margins on the left and right of the boxed layout...
Use position: sticky;
.wrapper {
text-align: center;
max-width: 768px;
}
.progress {
position: sticky;
background: red;
top: 0;
}
/* tall content to cause scrollbars */
main > div {
height: 100vw;
}
<h1>Title above stickied progress</h1>
<div class="wrapper">
<div class="progress">
<progress></progress>
</div>
<main>
<div>Example of a very long step</div>
<div>Example of a very long step</div>
</main>
</div>
You can use the 'vw' CSS unit to get a percentage of viewport width. For example width: 50vw; would set it to 50% of the current viewport width.
You can also use calc() to do calculations. For example, if I know I want something to be a third of the current viewport width I could set width: calc(100vw/3);
I'm trying to create a vertically positioned DIV by percentage. I have the parent container to set to relative and the content div set to absolute. This works fine when I position the content div with pixels, but when I try percentages the percentages are disregarded:
.container {
position: relative;
}
.content {
position: absolute;
left: 10%;
top: 50%;
}
<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>
The content div appears at the top of the page, disregarding the 50% vertical placement. What am I missing? Thanks in advance!
The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.
10% and 50% of that zero height and width are, of course, zero.
If you give your container a height and width, your percentage positions will start to work as you want.
Here is a working example.
.container { position: relative; width:500px; height:500px; }
Welp, my first post in SE. For those of you seeing this in the future, you can actually use viewport height as a measure of percentage.
.container {
position: relative;
top: 10vh; // 10% of height from top of div
}
You will likely need to add height: 100% to your .container div:
.container { height: 100%; position: relative; }
and possibly all the ancestor elements:
html, body { height: 100%; }
#Jaime Dixon's answer was great. Beautiful, two great concepts given there.
The percentage, the relative units are relative TO SOMETHING, you must understand what's the reference container to which those values are calculated.
Even if you have a container, there CAN BE an arbitrary behavior if the container has it's dimensions as "auto". So, to have a predictable behavior, be sure that the container has a dimension better than simply saying "auto". OR, if your container also has 100%, and its parent and so on, make sure you have a css instruction in which you have specified the height of the elements html, body:
example:
html, body {
height: desired_value;
}
I have a div ( position :fixed ) with varying height depending on the content in it. To have an auto scroll for that i have added overflow-y:auto and assigned a fixed height.
Is there a way to auto set the height of the div so that when the browser space gets changed, the height of the div changes accordingly, and if there is not enough space the scroll bar appears and when there is enough available space the scroll bar disappears.
use position:absolute instead of position: fixed and use the top left, right and bottom co-ordinates and set the scroll to auto;
example HTML:
<div id="resize">
<p>content</p><p>content</p><p>content</p><p>content</p>
</div>
CSS:
#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}
p {line-height: 3; margin: 0;}
Working Example : Here
Use two DIVs, one nested inside of the other.
The outer DIV should be set to position:fixed;max-height:100%;overflow-y:auto
The inner DIV will contain your contents. So far as I can tell, it won't require any specific styles.
What should happen (and what's happening when I test this fix in my browser) is that the outer DIV should shrink-wrap to fit the inner DIV -- but it will not exceed the height of the window. If the inner DIV exceeds the height of the window, it will also exceed the height of the outer DIV, producing a scrollbar.
EDIT: Sample markup:
<div id="outer">
<div class="inner">
Content goes here.
</div>
</div>
And the CSS:
#outer{
position:fixed;
max-height:100%;
overflow-y:auto;
bottom:0; /* sample value */
left:0; /* sample value */
}
#outer div.inner{
/* Whatever style you want the positioned box
to have. Border, padding, background, etc. */
}
You can listen to the resize event on the window and update the width accordingly.
$(window).resize(function() {
});
http://api.jquery.com/resize/
Alternatively, depending on the layout of your page, you might be able to just use height: 100% (or another % that works for you).
I am trying to make a pinned down style menu like this:
http://www.w3.org/Style/Examples/007/menus
Except I want the horizontal positioning to be more flexible.
I know that I can do that having a percentage value in "right:" instead of a constant, but i want the menu to fit snugly in a centered blog layout as the sidebar, which means when the page is resized, the sidebar shouldn't cover the content. Similarly, the box shouldn't spread away from the content if i make the page bigger.
Any way to do this with only css? If not, perhaps an easy javascript solution?
Here's one way to do this with some generic code:
HTML:
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
CSS:
Set an explicit width on the container and the content, leaving room for the sidebar in the container. Horizontally center the container.
#container {
width: 200px;
margin: 0 auto;
}
#content {
width: 150px;
}
Now we're going to position: fix the sidebar relative to the center of the page instead of relative to the right edge of the page. Make it the width of the left over space in the container and give it a margin-left (or padding-left, depending on other things you may want to do with it) equal to the width of the content. Then set right: 50% (for a right sidebar, switch these values to left for left sidebar) and margin-right to negative one half the container width:
#sidebar {
width: 50px;
margin-left: 150px;
position: fixed;
right: 50%;
margin-right: -100px;
/* other styles such as "top", etc. */
}
Resize the window and it stays snug to the content and vertically positioned wherever you place it.
Here's a fiddle (with some extra styles for visual clarity): http://jsfiddle.net/blineberry/UkEkS/
I'm really stuck here...
I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can imagine, it sort of sticks out to the left of the design...
Now, I was told that absolute positioning would make this happen. But I can't see how the logo would work with absolute positioning if the design itself it in the center of the page. I think this is to make sure it works in IE6... I have tried floating the logo in the central header, and then applying a negative margin of margin-left: -10px; which does work, but I've read this doesn't work in IE6.
Without a snippet of code its hard to tell, but it's probably an issue with where your element is getting it's 'absolute' positioning from. 'Absolute' is a misnomer. It really means "absolute...relative to the nearest positioned parent". So if in your design, you don't have a parent element with the css "position" style on it, it's going to take its position from the body element (which may have some margin/padding on it depending on your browser).
Adding a position: relative; to the element that you want to be the "outermost" container will allow you to specify position: absolute on an item within it, and specify your exact coordinates from there.
Set "position: relative" on a container div.
<style type="text/css">
div.page {
position: relative;
margin: 0 auto;
width: 922px;
}
div.page img.logo {
position: absolute;
left: -10px; top: 0;
}
</style>
<div class="page">
<img class="logo" ... />
</div>
Though.. I would rather make it work without absolute positioning.
When you position your logo absolutely it needs to be placed relative to something. That something is normally the viewport edge. If the logo is inside an element that is positioned relatively then it will instead be positioned relative to that element. So the answer is to make your centered page div display:relative; so the logo always aligns to the page not to the edge of the browser window. Here is an example:
The HTML:
<div id="centeredpage">
<img id="logo"... />
</div>
The CSS:
body {
text-align:center;
}
#centeredpage {
width:922px;
margin:0 auto;
text-align:left;
position:relative;
}
#logo {
position:absolute;
top:0;
left:-10px;
}
I hope that helps.