How to make overlapping events 100% width? In the picture below, I want the red one to be 100% of the width.
I was hoping to make it 75%. I found an element with the style:
inset: 312px 0% -429px 50%;
z-index: 2;
In dev mode I can change that to:
inset: 312px 0% -429px 25%;
z-index: 2;
which gets the appearance I want however I could find no way to get a callback at the correct time to make that change. Keep in mind that that callback would have to happen every time anything on the calendar changes anything that could cause overlap to change.
Related
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
I am trying to create a square(or div) in the browser according the size of the screen, so I am using percentage, i want the square to be 40% of the height of the screen, and get the amount of this percentage in pixels and use it for the width in order to get a square. And also use these values to center it. I know that with javascript should be easy, but i am new to less and I am wondering how this can be done. I tried the following and doesnt work:
#base:calc(40% * 1px);
#mytransform {
background-color:#ccc;
height:#base;
width:#base;
position:absolute;
top:50%;
left:50%;
margin-top:-(#base/2);
margin-left:-(#base/2);
}
how can i transform percentage to pixels?
You Cannot Do What You Desire With Precompiled LESS
LESS is a CSS preprocessor. That means it processes the code to form it into CSS before the browser ever sees it; and as far as LESS is concerned, the browser does not exist. What that means is, 40% of the height of the browser window is totally unknown to LESS. All that it knows is 40%, having no idea what that will actually translate into for pixels at a later time.
You will either want to stick to javascript, or use extra html mark-up to get the squaring effect.
Client-Side Compiling (NOT Recommend for Production)
I need to stress the fact that client-side compiling is recommended only for development. If someone has javascript turned off, then they will get NO styling. And those that have it turned on are going to experience a slowdown in page loading.
Now, the reason you get an invalid type error is because the returned value needs to be made into a number that LESS understands (I think it is treating the returned value as a string). This can be easily done like so (see the changes to the #base assignment):
#base: (0.4 * unit(`window.innerHeight`, px));
#mytransform {
background-color:#ccc;
height:#base;
width:#base;
position:absolute;
top:50%;
left:50%;
margin-top:-(#base/2);
margin-left:-(#base/2);
}
My CSS Output On One Run At less2css.org
#mytransform {
background-color: #ccc;
height: 243.60000000000002px;
width: 243.60000000000002px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -121.80000000000001px;
margin-left: -121.80000000000001px;
}
I had a similar task: "Center a square div according screen-width/height".
Try using CSS's vmin (compare CSS Specification) as in my jsfiddle to get e.g. a squared div centered with 50% of the minimum of horizontal/vertical viewport in percent.
CSS to scale and center div as described:
.centeredDiv {
width: 50vmin;
height: 50vmin;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25vmin;
margin-left: -25vmin;
background: #FF0000;
}
View port-tag you may need in your mobile website
<meta content="width=device-width,initial-scale=1" name="viewport">
(I had troubles on iOS when adding "maximum-scale" or "user-scalable" in content-attribute)
Please find jsFiddle for reference here:
http://jsfiddle.net/YCawM/
CSS pure solution, this code will create a div of 40% width and height of the viewport and it will position it in the center of viewport.
Use position:fixed; to keep the button positioned relative to the viewport.
Use left and top properties to position your div.
With calc(), you can perform calculations to determine CSS property values.
Use vw and vh units to get the viewport dimensions.
With with 50vw you say to browser to position at 50% of the viewport width, and you need subtract 20% (= 50% of you div size which it turn to be 40% of the viewport).
#target{
position:fixed;
width: 40vw;
height: 40vh;
left: calc(50vw - 20%);
top: calc(50vh - 20%);
background-color:red;
}
<div id="target"></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 have a CSS3 animation, that simply moves a <div> down (via top: 0px; to top: 300px;). But my problem is, I don't know how to prevent the <div> from returning to the top when the animation is finished. Is there a way I can prevent this?
Here's a sample fiddle: http://jsfiddle.net/y8tJ7/
You need to invert the animation like so.
#keyframes move {
from{
top: 20px;
}
}
See http://jsfiddle.net/gleezer/y8tJ7/1/
This way its finishing position is specified in the div styling and you only specify the beginning state in the keyframe.
EDIT: Another way of achieving it could be to simply add:
animation-fill-mode: forwards.
See this other fiddle.
Some more info about it on Mozilla Dev Network.
When setting my header and footer to 100% I get some strange behaviour in FF4, Safari 5 and Chrome 12 on Mac OS X. If I have my browser window at a high resolution and scale it down horizontal scrollbars will appear, even though the content should scale with the browser window.
I saw this thread which seemed to have a similar problem, though the user never seemed to find a solution:
CSS 100% width on browser resize
Overflow-x doesn't work for me as the error labels, which are absolutely positioned, will behave as fixed positioned.
DEMO here (errors on blur):
http://kassekladde.tixz.dk/kontakt-os/
Thanks in advance
The problem is caused by #overlay. You have set visibility:hidden. This hides the content but allows it to still take up space on the page. If you change it to display:none instead it will hide the content and the space it takes up, stopping the scrollbars in the process.
#overlayis dynamically given a width/height as the page shrinks. As you can see below it reached width:1711px at one point and so scrollbars appeared:
<div id="overlay" class="overlay" style="width: 1711px; height: 1489px; visibility: hidden; opacity: 0; position: absolute; background: none repeat scroll 0% 0% rgb(0, 0, 0); left: 0px; top: 0px; z-index: 5000;"></div>
After looking over the CSS & html, the header and footer are both within a div with class 'container', which is defined to be a width of 980px, so both will only scale down until they reach a width of 980px, which is the behavior I am seeing in the browsers I tested with in Windows 7 (sorry don't have access to MacOSX). Are you seeing something different or are you trying to scale them down less than 980px? If the latter is true, then you need to pull them out of your container class.