This is my first website I am making for a family friend. I have a series of images on this website (the spots tabs - ie baseball, football, softball etc) with an h1 text that I wanted to be centered vertically and horizontally. It works on my mobile and browser. But my brother told me it ends up not centering on his iphone 6 with safari.
http://www.pennfamous.com/tp/
I am using the following css to center the h1:
.h1format h1 {
color: #FFFFFF;
position: absolute;
top: 40%;
left:50%;
transform: translate(-50%,-50%);
font-size: 2em;
}
However, my brother told me on his iOS it ends up looking like this:
http://prntscr.com/9pdqk0
Is there a simple fix for this? Remember I am a novice. Thank you
For Safari you need the -webkit-prefix. And you might as well add the -ms-prefix to get support in IE9 (even if it's dying).
.h1format h1 {
color: #FFFFFF;
position: absolute;
top: 40%;
left:50%;
-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Chrome, Safari, Opera */
transform: translate(-50%,-50%);
font-size: 2em;
}
Related
I have created an html/javascript/css page which displays photos in a "carousel", where the user can click the left and right arrows to change the photo. The carousel itself, the parent/container, is 500px tall and 100% of its parent div wide. The image inside of it should be at max 100% wide and at max 100% tall. In other words, it will fit itself into the imgCarousel, regardless of aspect ratio.
This works in most browsers. I have confirmed that it works in IE, Edge, Chrome, and Firefox. However, it does not work in Safari. I don't personally have access to a Mac, but I know it does not work in Safari because others have viewed the page before me. It also does not work in some android mobile browsers (though it does work with Android Chrome).
It appears that in these browsers where it does not work, the top is not actually set to 50%, but that the transform is still working properly. This is based on visual inspection. In addition, it appears that the image is not being sized properly. It is extending to the full width, and the height is extending beyond 100%;
Unfortunately, I cannot test with developer tools on any of these browsers, since I don't have access to a Mac, and I can't seem to find developer tools for mobile browsers that can be used in the same capacity.
I can link to the page in question if it is not a breach of protocol here.
I have done some research to see if there are any compatability issues/fixes, but I have not been successful in this research. If anyone knows of any way I can include a compatibility fix, please let me know.
Thank you.
.imgCarousel {
display: flex;
justify-content: space-between;
vertical-align: middle;
height: 500px;
background-color: black;
text-align: center;
margin: auto;
}
.imgCarousel img {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
max-height: 100%;
max-width: 100%;
object-fit: contain;
cursor: pointer;
}
Try adding this list, including the opera prefix:
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
For some reason firefox (and firefox alone, this isn't even an issue on ie which is...odd) seems to be ignoring the top:xx% value of a table/table cell element, but only initially, if the value is edited in the console however it immediately works as intended.
.overlay nav {
text-align: center;
position: relative;
display: table-cell;
vertical-align: middle;
top: 50%; /* <---the issue */
height: 100%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
I've settled the issue for the now by switching to top:xxvh, however I'm curious as to why the precentage isn't working so I'm still asking the question to see if anyone can shed some light on the issue.
Codepen showing example, only occurs in firefox
I really hope someone can help me with this one.
I have a shape that I'd like to have change background color when hovered over it. I've gotten it to work in all browsers, except Safari.
You can see it here: http://jsfiddle.net/bgLv6L9j/5/
I tried using the following code to make the hover work but it cuts off half the text. I tried adding the dimensions of the shape but that also makes it look wonky.
.shape:hover::before {
background-color: #245a85;
content: "";
position:absolute;
}
I've looked through various other topics with the same issue but can't seem to locate any Safari specific problems (or solutions for that matter).
I'd really appreciate it if someone could quickly take a look and see where I'm going wrong with regard to pseudo elements and getting the background hover to work in Safari.
If you do this:
.shape a {
position: absolute;
}
Instead of relative It seems that will fix the problem.
http://jsfiddle.net/bgLv6L9j/7/
Edit:
I rewrote it with a much simple code based on yours.
HTML
<a class="shape" href="#">Text</a>
CSS
.shape {
border: 2px solid crimson;
border-radius: 5px;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 150px;
height: 75px;
-moz-transform: perspective(40em) rotatex(-45deg);
-ms-transform: perspective(40em) rotatex(-45deg);
-o-transform: perspective(40em) rotatex(-45deg);
-webkit-transform: perspective(40em) rotatex(-45deg);
transform: perspective(40em) rotatex(-45deg);
}
.shape:hover {
background: crimson;
}
That's it. http://jsfiddle.net/8sdqteke/
I am trying to accomplish the following with CSS:
I have a code pen started here
I can easily rotate the text as I would like with the following CSS:
.Rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
However, the text ends up as shown below
I understand why it's happening, but unsure how to globally solve it. It is using the bottom left corner before you rotate it. I can individually with each widget place a fixed height/width on the .title But if at all possible. I would like to avoid that.
Can anyone provide a solution that would allow the 'rotated' text to always be located at bottom:0, left:0?
You can set the origin to bottom left, and then apply a translation to the element, prior to the rotation
-webkit-transform: rotate(-90deg) translateY(100%);
-webkit-transform-origin: bottom left;
transform: rotate(-90deg) translateY(100%);
transform-origin: bottom left;
The translation makes the top left corner be where you want it, so to speak.
It's not easy to explain how it works... just try it
I personally would just make the elements a little more intricate but singular with :before & :after. Then I'd position the text within a position absolute.
.widget {
height: 50px;
width: 250px;
background: #81a6d5;
float: left;
margin-left: 10px;
color: #084ca1;
}
.widget::before {
content: "";
position: absolute;
height: 50px;
width: 35px;
background: rgba(255,255,255,.3);
}
.widget .title {
transform: rotate(-90deg);
position: absolute;
font-size: 11px;
font-family: helvetica;
margin-top: 15px;
}
I made this pen to show the idea, it would clean up the coding a little bit also.
http://codepen.io/brycesnyder/pen/PwYdJq
I wasn't able to think of a way to universally be able to do this with CSS without positioning each one individually, but with JS it was pretty easy. If you can use JS intead, this code should take care of it on its own, without changing any of your current HTML or CSS.
$(function(){
$('.rotate').each(function(){
var thisTitle = $(this);
var w = thisTitle.outerWidth();
var h = thisTitle.outerHeight();
var newLeft = Math.abs((w - h) / 2) * -1;
var newBottom = Math.abs((w - h) / 2);
thisTitle.css('left', newLeft);
thisTitle.css('bottom', newBottom);
});
});
Codepen: http://codepen.io/supah_frank/pen/yyBxzo
I'm trying to make a friend their portfolio website, and everything is simple enough, but I can't seem to get the sideways navigation to touch the content box. I've got it close, it's perhaps 50 to 75, 100 pixels at most, but they simply won't touch.
This is the code for the two div in question. I was able to twist the navigation with help from someone else's question, but they still won't sit flush. Any help at all would be greatly appreciated, thank you very much for your time.
.background {
background-image: url(textureimg.jpg);
width: 800px;
height: 1000px;
float: left;
}
.navigation {
float: left;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Probably a margin issue. Try .navigation { margin-right: 0px; }. Unless your navigation is on the right side, then use margin-left. You may also have to adjust the margin of the content section.
All of the "content" in an element takes up only a small part of that element's screen space. The rest is for padding, border, and margin. These can each be adjusted with CSS via padding: 10px;, border: 5in;, margin: 3pt; respectively (obviously you can use whatever size values you want). You can also manipulate individual sides, such as padding-right: 10px; padding-top 5px;
If adjusting the navigation's margin doesn't give the desired result, try adjusting the border and padding as well.
(source: html.net)
There's a good intro to the HTML box model here
#content { position: relative; left: -50px; }
adjust the left to however many pixels you need till it's not too hot or too cold, but just right