The layout I'm trying to achieve is shown in this image:
The HTML below is one of many attempts which haven't worked. The project this is for is targeting HTML5 in the latest browsers only, so there is no need for it to work in anything except the latest Chrome, Safari, Firefox and (with a following wind) IE9 beta.
<!DOCTYPE html>
<html>
<body>
<div style="border: solid 1px red; width:600px; height: 600px">
<span style="-webkit-transform:rotate(-
90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span>
<img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg"
style="position:absolute;bottom:600px" />
</div>
</body>
</html>
I suppose you might want something like this: http://jsfiddle.net/aNscn/3/
bottom: 600px is going to get you nowhere - that's just going to put the elements 600px away from the bottom of the user's screen. Instead, give the outer div a position: relative and let the two elements align to it's bottom with a suitably low bottom value. Also check out the transform-origin property to get the positioning of the span correct after rotation.
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(-90deg);
-moz-transform-origin: left top;
-o-transform: rotate(-90deg);
-o-transform-origin: left top;
transform: rotate(-90deg);
transform-origin: left top;
position: absolute;
bottom: 0;
left: 5px;
}
#img {
position:absolute;
bottom: 15px;
left: 30px;
}
Related
In the following html example the blue box disappears when the chrome window height is dragged above 1200px. (simplified example)
<html>
<head>
<style type="text/css">
.red_box {
position: fixed;
right: calc(-50vh + 1em);
width: 100vh;
top: calc(50vh - 1.2em);
height: 4.9em;
transform-origin: top;
transform: rotate(-90deg);
background-color: red;
will-change: transform;
}
.blue_box {
width: 60vh;
background: blue;
height: 2em;
}
</style>
</head>
<body>
<div class="red_box">
<div class="blue_box">
</div>
</div>
</body>
</html>
Already filed a bug in the chromium project: https://bugs.chromium.org/p/chromium/issues/detail?id=935452
I assume that it is a corner case? And will take some time until this will be fixed. Does anyone know a workaround?
we need the parent element(red box) to be rotated and near the left or right corner of the window
Update: in our real application the red_box is always a new layer(browser composite process), so we need the css will-change: transform; to force a new layer in the simplified example. The bug seems to be connected with the browser layers.
Update: We also need a css height around 5em, because we animate the red_box from left to right. The bug does only occur if the html element overlaps the window size.
Remove height form .red_box css.
Please use below code:
.red_box {
position: fixed;
right: calc(-50vh + 1em);
width: 100vh;
top: calc(50vh - 1.2em);
/*height: 4.9em;*/
transform-origin: top;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
background-color: red;
will-change: transform;
}
.blue_box {
width: 60vh;
background: blue;
height: 2em;
}
<html>
<head>
</head>
<body>
<div class="red_box">
<div class="blue_box"></div>
</div>
</body>
</html>
I have a centered form on my page positioned using top and left values and css3 transformations.
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/** backface-visibility: hidden; **/
}
h1 {
padding-bottom: 5px;
border-bottom: 3px solid blue
}
Notice backface-visibility. When set to hidden, all problems are solved for me using chrome 42. It doesn't render blurry. For others however using the same chrome version, it renders blurry with it.
Here's what it looks like without BV: http://jsfiddle.net/mzws2fnp/
To you it may be blurry, to others it may not.
Here's what it looks like with BV: http://jsfiddle.net/mzws2fnp/2/
For some reason people see the border blurry however I do not. I know backface-visibility: hidden is meant to fix that, and it does for me, just not for others using the same browser as I. Strange.
Try -50.1%
transform: translateY(-50%) translateX(-50.1%);
EDIT:
I have found out, they are blurred when chrome dev tools are opened, try to close them and refresh
This is a bug in Google Chrome. I reported this issue to Google:
Rendering bug in css transform: it blurrs borders
<div class="middle">
<input type="text" />
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
input {
border: 1px solid black;
border-radius: 4px;
}
var middle = document.querySelector('.middle');
setInterval(function(){
middle.style.paddingTop = middle.style.paddingTop === "0px" ? "1px" : "0px";
}, 1000);
Animated bug demonstration
When you use percentage, will play an odd number. will blurry borders,
using parseInt to assign the value is integer.
$(document).ready(function(){
$('.middle').css({
'top':parseInt($('.middle').position().top)+ 'px',
'left': parseInt($('.middle').position().left)+'px',
'transform':'none',
'-webkit-transform':'none'
});
});
.middle {
position: absolute;
top: 30%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
.middle2 {
position: absolute;
top: 70%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
<div class="middle2">
<h1>This is blurry, or should be.</h1>
</div>
In this specific case where you're using a solid border, you can try using a box-shadow instead of a border as a workaround. For example, replace: border-bottom: 3px solid blue; with box-shadow: 0px 3px 0px blue;
Use even number (2px or 4px) for the border. Odd number (3px or 5px) is giving that blur.
border-bottom: 4px solid blue;
there is little hack that can help to get any block as center middle.
in parent <div> where we add position: relative add below properties,
display: flex;
justify-content: center;
now add align-self: center; property with the block which we want to make center middle make sure that this block is absolute position.
Because translated element height is odd number. This will not occur when element height is even number.
This problem occurs when we add
transform: translateY(-50%) translateX(-50%);
OR
transform: translate(-50%, -50%);
it is still as an open issue in chromium bugs list.
I've one small image displayed along the right edge of the screen. Actually that image is vertical but I want to display it horizontally. How should I achieve this using HTML and CSS?
For your reference following is the screen shot of the page which contains the vertical "Contact" image on right edge bottom side.
Can someone please help me in it?
Following is the code I tried for the vertical position it currently has :
HTML Code :
<div id="new_button_1">
<a href="#" >
<img src="http://www.yourdomain.com/contact.jpeg" alt="" pagespeed_url_hash="3893298907" border="0" align="middle" height="89" width="33">
</a>
</div>
CSS code :
#new_button_1 {
width: 33px;
position: fixed;
right: 0;
top: 85%;
cursor: pointer;
z-index: 7;
}
There is no reason to use an image for such a simple button.
Let's create this with simple CSS:
By default, of course, it is not rotated. You can rotate it with:
transform: rotate(-90deg)
and you can fix it to the same position it currently is using the same CSS and transform-origin: 100% 100% so the rotation is made on the right hand and bottom side and will line up with the viewport.
Further Reading on the MDN
The transform property
The transform-origin property
Working Examples
a {
background: #FCD033;
text-decoration: none;
color: #000;
font-family: sans-serif;
padding: 5px 10px;
}
.rotate {
transform: rotate(-90deg);
display: inline-block;
}
.fixed {
position: fixed;
right: 0;
top: 80%;
cursor: pointer;
z-index: 7;
transform: rotate(-90deg);
transform-origin: 100% 100%;
/*x-offset y-offset = (right hand side and bottom to line up with viewport edge)*/
}
<h2>Not Rotated</h2>
Contact
<h2>Rotated</h2>
Contact
<h2>Fixed (bottom right)</h2>
Contact
You can use CSS3 rotation
transform: rotate(90deg);
I have an iframe which shows scaled websites but after scaling, a whitespace stays, and its size is the size before scaling. I have tried to wrap it around with different div's as I've found some solutions but it's not working for me, the space is still there.
You can see it here.
HTML
<div id='wrap'>
<div id='preview_div'>
<iframe src="../404/index.php"></iframe>
</div>
</div>
CSS
#preview_div {
position: relative;
width: 700px;
height:600px;
margin:auto;
}
iframe {
background-color:white;
width: 1400px;
height: 960px;
position: relative;
overflow:hidden;
border: none;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
#wrap {
width:700px;
height:600px;
margin:auto;
float:left;
}
Any ideas? Thanks.
If you want to get rid of the window scrollbars, you could apply overflow: hidden to #preview_div to hide the extra space.
Inside the iFrame the container the div () has a CSS width of 630px. Also there is a pixel with on the iFrame itself.
This is the design I am currently working on: http://alpha.bounde.co.uk
as you can see each of the ribbon boxes has the title of the box as vertical text (about, work, contact) and I am trying to find the best way to position them so I can have any text of any length and it will appear down the left hand side. At the moment longer text appears to the right as it is rotated from its center. The reason I want it to be done automatically and not just calculate the width is I am using google fonts (which is currently turned off) and if the font isnt loaded in then the text string will be longer / shorter than before and it will again fall out of position.
h2 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 30px;
color: #793F26;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: 0;
padding: 0 10px;
position: absolute;
left: -60px;
top: 100px;
background: #fdfdfd;
display: block;
}
this is the styling I am using for the H2 and there is nothing special in the HTML just the H2 inside a container div which has a border of 30px and a padding of 20px.
anyone have any ideas? thanks
I'd put your headings in a larger container element that's centered on the left border, and center the headings within it.
http://jsfiddle.net/isherwood/sqh95/
body {
padding: 20px;
}
.heading-wrapper {
position: absolute;
width: 150px;
margin-left: -100px;
text-align: center;
}
h2 {
position: relative;
left: 0;
top: 50px;
white-space: nowrap;
}
<div class="heading-wrapper">
<h2>Contact</h2>
</div>
It's best to set transform-origin to something that doesn't change based on the content, such as left top.
You can then use translateX(-100%) to "shift" your content so that you're pivoting around the (fixed) top-right corner. This is easier to work with than trying to rotate around the (variable) top-right corner alone.
So your result would be something like:
transform-origin:left top;
transform:translate(X,Y) rotate(-90deg) translateX(-100%);
Replace translate(X,Y) with the required movement to get the element in position down the left side - it's better to do this than to use left and top, because then it will look acceptable in browsers that don't support transforms.