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.
Related
I'm trying to position elements in a way so that when the browser width is changed, the webpage will scale everything in proportion, but what happens is that they shift a little. I don't understand why. I can adjust this okay using media queries, but they change drastically in mobile browsers. To illustrate what I'm talking about, I created an example in which I'm trying to keep this black text centered inside this green box. From my example, you'll see that scaling the browser on a desktop will keep the text in the box centered pretty well, but when switching to a mobile browser, the text will go out of the box. What can I do to keep it scaling correctly?
I realize that I can just fill the text div with a green background, but you have to understand that this is just an example of what I'm trying to do. The real webpage is much more sophisticated, so that will not be an option. I need to make sure that these divs scale appropriately. Thank you.
I provided an image to show the problem that I'm getting in my phone browser. It's a bit small, but you can see how the black text dips below the green box.
The example website: http://www.marifysworld.com
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff}
img {
display: block;
margin: 0px;
padding: 0px}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
text-size-adjust: 90%}
.box {
width: 23.75%;
height: auto;
position: absolute;
left: 25%;
top: 40vw}
.divtext {
width: 20%;
height: auto;
position: absolute;
left: 26.75%;
top: 42.5vw}
HTML:
<img class="box" src="http://www.marifysworld.com/images/platform/box.jpg" />
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
Well, you are using positions for your design but it is confusing and not possible.
Here is an idea to make this design work.
Just try it...
HTML:
<div class="box">
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
</div>
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff;
}
.box{
background: url('http://www.marifysworld.com/images/platform/box.jpg');
width: 23.75%;
margin: auto;
margin-top: 20%;
}
.divtext {
width: 90%;
padding: 5% 0;
margin: auto;
}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
}
Update: initially I thought the problem might be the (not universally supported) text-size-adjust property, but it seems this is unlikely. I leave those thoughts below just in case they are useful to someone else using that property.
Having been unable to reproduce the problem myself but seeing the useful image now put into the question I think we have to look at the actual font and how it is sized and using space. There are quite a few factors which maybe the browsers are setting different defaults for. Here's a few, there may well be more:
font-family - most obvious but is whichever browser is causing the problem using the same default font as browsers not causing the problem? Try setting a specific font and see what happens
Different fonts will take different widths for different characters. Try a monospace font - that will probably overflow - just to demonstrate the issue
kerning - no I don't fully understand how different fonts use it and what they mean by 'normal' (which is probably the browser's default) but that will also alter the space used as will...
..line height - perhaps that needs to be specifically set
font-weight will alter the space used - do all browsers/systems interpret say 400 exactly the same way
I guess there's loads more that may differ between browsers - for example how exactly do they calculate the spacing needed to center text, will they always break a line at the same place etc.
Sorry this is a waffle, but there are so many factors that could make the text overflow and I don't understand them all in enough depth.
Basically what you need is to be able to scale the text div to force it to fit - for that you would need a bit of JS I think (?or is there an equivalent of contain for divs?)
ORIGINAL STUFF:
I am seeing text stay within the green box on a mobile device (IOS Safari) so I imagine the problem you are having is with another mobile device/browser such as Android.
If this is case the area to look at is the use of the CSS property
text-size-adjust: 90%
There are a couple of things to note here:
According to MDN
This is an experimental technology. Check ... carefully before using in production.
This property is intended to be used in the case where a website has not been designed with smaller devices/viewports in mind.
According to MDN, while Chrome on Android implements text-size-adjust fully, Firefox on Android and Safari on IOS do not support the percentage version.
I may be missing something but the question explicitly states that 'the webpage will scale everything in proportion'. Apart from possible inbuilt browser margin and padding on the div, everything is expressed as vw or % so I cannot see anything else that would have an adverse affect on the text positioning.
I also cannot see why this property is being used. It may or may not be causing the problem, but it certainly may affect how text is displayed on some browsers and it seems to be, at best, redundant for a site that is designed with proportionality in mind from the start.
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>
I'm worried that the short answer to this question is NO.
But before I accept this fate I'll attempt a last ditch effort.
Usability concerns aside, is there any way I can do a div overflow for webkit mobile where, when scrolling, I do NOT see the scroll indicator?
I'm really hoping to avoid building a custom scroller in plain JS just because apple insisted on forcing the indicator to always be visible.
Any pointers much appreciated. I've looked around a lot but found nothing useful.
Reminder: I'm not asking about scroll bar customization!!! I'm asking about the indicator that shows during touchmove.
I think you can use this code. But this will only work in Chrome and Safari.
#element::-webkit-scrollbar {
display: none;
}
Technically you could do this in Chrome and Safari using the following CSS:
body::-webkit-scrollbar { display: none; }
However, for all other browsers you'll need Javascript. The basic algorithm would be as follows:
HTML
<div id="container">
<div id="content">Hello, here's lots of text...</div>
</div>
CSS
#container {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
#content {
position: absolute;
left: 0px;
top: 0px;
}
JAVASCRIPT (pseudo-code)
When clicking on #content, check for drag
If dragging then measure amount and invert amount
Set that amount to top position of #content
Keeping with my tradition of answering my own question after extended research, the indicator can be hidden only by removing -webkit-overflow-scrolling:true CSS attribute.
This, unfortunately, also removes the spiffy scroll-elasticity feature, which is of course whey one would want to use the above CSS.
I want a reusable method to horizontally centre absolute-positioned fixed-width elements within their containers, and I want reusable code (e.g., no negative pixel margins).
I've stumbled across a combination that works perfectly:
http://jsfiddle.net/aaronadams/Mquha/
<div class="outer center">
<div class="inner center"></div>
</div>
.outer {
position: absolute;
width: 400px; height: 400px;
background: #999;
}
.inner {
position: absolute;
width: 200px; height: 400px;
background: #666;
}
.center {
left: 0; right: 0;
margin-left: auto; margin-right: auto;
}
It's clean, it's (relatively) easily understood, it appears to work in IE 8+, Chrome, Firefox, Safari… but it also appears to be an enormous, dirty, no-good positioning hack, one that could come apart at the seams at any time.
I can't find any documentation to suggest whether this positioning behaviour is correct or incorrect. Which is it? Appropriate for production, or completely unreliable?
Given the constraint that your two containers .outer and .inner are absolutely positioned, then what you have done is not only correct, but, it is also the only way to do it
when the parent container's width is not specified.
Your solution works exactly according to the CSS 2.1 specification, it is robust.
For reference, you need to review:
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width
which specifies how the width of an absolutely positioned element is computed.
In your jsFiddle example, you need to realize that the containing block for the two <div>'s is the viewport or the root element. You have yet to say anything about the vertical placement by specifying the top or bottom properties. Also, since the absolutely positioned elements are out-of-flow, their intrinsic height does not factor into computing the height of the containing block, and in some applications, this is a factor that would make this approach unusable without modifications.
In addition, if you were to wrap your sample code in a relatively positioned wrapper <div>, and you applied a fixed width, then the child elements would still center correctly, as shown in this demo: http://jsfiddle.net/audetwebdesign/aNS5j/ (Keep in mind that you may need to allow sufficient height in the wrapper element.)
However, as pointed out earlier in a comment, if the width of the containing block (either the viewport or the wrapper element in my demo) is less than the width of your child elements (400px in your example), then the centering would no longer work, BUT this would still be the correct behavior according to the CSS specification.
Your question has touched upon a basic but important fundamental of how the CSS visual formatting model works.
Aside
You could still get the same effect without using absolute positioning on the .inner element, in which case, margin: 0 auto would have been sufficient. The cost savings in a slightly more concise CSS declaration.
About Negative Margins
Although negative margins do work and are implemented consistently across most modern browsers, the CSS 2.1 specification does not say how negative margins should be implemented. In theory, negative margins could break down in some user agents that still conform to the CSS specification.
I've alway's found that once you're dipping into the position:absolute; pool, you're abandoning an elegant solution. Regretfully, there are a lot of cases where absolute positioning is the only way to solve a problem.
As far as I know the industry standard is using negative margin, as you mentioned: http://jsfiddle.net/Mquha/3/
And again, this feels dirty and moreover: not reusable.
I've looked into the approach you suggested, and your way seems like a fairly modern discovery, and I'm a bit surprised that it even works. At any rate, it is a lot easier than the negative margin method and seems to be supported by all major browsers, like you say.
I'm adopting the method you proposed in the future, still not perfect but at least it's less dirty than using negative margins. I can only advise you to do the same when you're using absolute positioning.
This is my best bet
change your css to
#outer {
position: absolute;
width: 400px; height: 400px;
background: #999;
}
#inner {
position: absolute;
width: 200px; height: 400px;
background: #666;
}
.center {
margin-left: auto; margin-right: auto;
}
And your html to
<div id="outer center" class="center">
<div id="inner center" class="center"></div>
</div>
I'm trying to make a fluid grid layout and I've run into a problem with inconsistent width rendering in Opera. In Opera the width of elements are consistently smaller than the other browsers. I'm trying the fluid 960 grid system but if it wont be consistent then I may change to fixed sizes.
Does anyone know how I can get Opera to render the width the same as the other browsers?
Here is the CSS and HTML I'm using for this demo
.show_grid {
background: url(../img/grid.gif) no-repeat center top;
}
html, body{
margin: 0;
padding: 0;
}
.container {
width: 92%;
margin-left: auto;
margin-right: auto;
max-width: 936px;
padding-top: 15%;
}
.box {
width: 15.633%;
background: #006;
color: #999;
margin: 5% .55%
}
<div class="container show_grid">
<div class="box">2 column - browser name</div>
</div>
Opera rounds percent widths but it doesn't round percentage values for paddings and margins.
So, the easy way is to set the width: 15%, and add padding-right:.633%. But doing so, only the block would be bigger visually.
If you want to have it's width fair so all childs would have the same width, you'll need to add another wrapper and add the appropriate negative margin to it. It is calculated by this formula: 100/width*padding, in your case: 100/15*0.633. It would compensate the padding and everything would be cool.
Here is a fiddle with all the variants: http://jsfiddle.net/kizu/8q23d/
— fixed width in pixels, block with width:15.633%, first visual fix and the proper fix at the end.
Dealing with different box models could be very tricky and time consuming.
I definitely suggest you to avoid dirty CSS hacks that will not validate your css files.
You could try to drop the use of percentage values and go for an "elastic" layout.
In this case you specify the min-width and max-width for your block elements.
An article about elastic layout is here and something more here
In alternative you could detect the browser via javascript or via library and use conditional CSS files.
This is my favorite approach when dealing with IE.
conditional css is a library that will help you with that, but there are many more options in the web.
Good luck