I know that this is something we would use JavaScript for, but I was wondering if it's possible or planned in next releases of CSS maybe.
I'm working on a little platform and there's a lot of relative/absolute positions. Content is dynamic so it's not a best solution to specify the static width and elements must be centered somehow. I made it possible with almost no display-errors using CSS only, but it would be great if there is something like this in css.
Today's code (SASS):
element
position: absolute
top: 100px
right: 50%
margin-right: -50px (static width in %/px/em/rem/...)
Something I was thinking about:
element
position: absolute
top: 100px
right: calc(50% - this.width / 2)
So, to not make this question too broad. Do you know some way to implement this kind of behavior in today's CSS? And if not, do you know if there are some plans to implement it in feature releases?
No, it is not possible today, to reference a property of it self.
Will it come? .. Hope so
In your particular sample, centering an absolute positioned div that has dynamic content, you can use transform: translate
Side note: CSS has a lot of properties, where, when combined, one can still achieve similar effect, as with below sample
div {
position: absolute;
top: 100px;
border: 1px solid;
right: 50%;
transform: translateX(50%);
}
<div>Centered with dynamic content</div>
Related
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'm trying to implement a "spider diagram" or "mind map" in CSS.
Essentially, what I'd like, is a ring of boxes around a central box.
Ideally, these would all just be DIVs that I could add more/less content to as I saw fit (and, hopefully, manipulate using JS). They don't need to be draggable or anything like that.
Unlike the diagram, they don't need to have the grey lines etc. from the outer topics to the name of the mind map - I'm really not bothered about that.
Firstly, I really don't know where to start. I guess I'd have to use absolute positioning for each box? That probably wouldn't be too bad if my audience were using the same resolution and browser but that won't always be the case.
So, my real question is, how do I set up DIVs like these that will stay in the same place on different resolutions and in different browsers? Can I use absolute positioning within a relatively-aligned DIV or something?
The browsers I need to support primarily are IE10, Chrome and Safari. So I guess I should be designing for IE10 as a base?
Thanks in advance,
Create fixed width / height div and place other divs there.
<div style='width: 1000px; height: 1000px; position: relative;'>
<div class='note' style='position: absolute; left: 50px; top: 50px;'></div>
<div class='note' style='position: absolute; left: 150px; top: 150px;'></div>
<div class='note' style='position: absolute; left: 350px; top: 350px;'></div>
</div>
Since wrapper is constant width, so inner elements will stay in same position, no matter of browser window size.
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 just came across something
#element {
left: 50%;
margin-left: -(elemntwidth/2)px;
}
being (elemntwidth/2) already a number like 30px, for ex.
I would like to know if this is a safe way of crossbrowsing the responsive elements positioning so I can abandon the way Im doing right now with .jQuery
$('#element').css(left: (screenwidth - element / 2) + 'px');
More than everything Im interested in a cross mobile device browsers efective solution and this css only I found it clean and simple, so simple that I need to ask if this could be true. Thanks
CSS Frameworks have this functionaility baked in.
Checkout: Foundation 3
Otherwise, you will need to rely heavily on Javascript and Media Queries to achieve pixel perfection.
Not to mention this is the first of many problems you will encounter to acheive cross devices / browser stable elements. All of these things have been carefully thought out for you alreacdy.
This is a way. For some elements it works, resposive, centered and no jQuery.
HTML
<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>
CSS
.element {
position: relative;
width: 90%;
background: black;
margin: 0 auto 10px;
text-align: center;
color: white;
padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}
Wroking Demo | Final result full screen
AFAIK this solution is browser compatible. it's even better than {margin-left:auto; margin-right:auto;} in some cases. but there is an other interesting point by centering DOM-elements this way:
e.g. if your whole page-wrapper is centered with {left:50%,...} and the browser window width is smaller than the wrapper you cannot see the whole content by scrolling to left and right. the browser cuts the content. try it...
Try to scroll left and right to see the white left- and right-border...
The other known solution is to set {margin-left:auto; margin-right:auto;} but afaik this just works together with {position:relative;}- not with {position:absolute;}-elements
It's been a long time when I started up with this unconventionally solution...
use this code snippet:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -(height/2);
margin-left: -(width/2);
}
this works even if the parent dimensions change.
The code you have will work - I've used the same approach many times - so long as you know the dimensions of the element you are centering.
Note that you can use the same approach using percentage based widths to work better with responsive layouts.
You're on the right track.