I want to display the text vertically. I've tried a tutorial that has text rotation. But it lefts space in right side. This is a code that I've to try and mixed with a little piece of code from the tutorial:
1. STYLE:
.list-group-item {
background: black;
}
.list-group {
text-align: center;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: translate(-100%, 0) rotate(-90deg);
-moz-transform: translate(-100%, 0) rotate(-90deg);
-o-transform: translate(-100%, 0) rotate(-90deg);
transform: translate(-100%, 0) rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
2. LIST:
<ul class="list-group">
<li class="list-group-item">A</li>
<li class="list-group-item">B</li>
<li class="list-group-item">C</li>
<li class="list-group-item">D</li>
<li class="list-group-item">E</li>
</ul>
3. GOAL:
4. RESULT:
try this:
.verticaltext
{
position: relative;
padding-left:50px;
margin:1em 0;
min-height:120px;
}
.verticaltext-content {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
left: -40px;
top: 35px;
position: absolute;
color: #FFF;
text-transform: uppercase;
font-size:26px;
font-weight:bold;
}
your html structure will look like this:
<div class="verticaltext">
<div class="verticaltext_content">Test 12</div>
</div>
you will need to set an absolute position in order to rotate the element in this case <li></li>. follow this link for further clarification
Related
I'm trying to create a button that sticks to the right sidfe of the screen. I want this button the turn 90" and stick 50% vertically. I can't find alot of help online, maybe you guys can help. See my code below, it currently isn't vertically aligned centred.
I also added a picture of how it looks. Thanks in advance!
My current code:
HTML
<button type="button" class="button">
<span class="button__text">Interaction Designer <br> # Company</span>
<span class="button__icon"></span>
</button>
CSS
.button {
position: absolute;
display :flex;
align-items: center;
justify-content: center;
z-index: 999;
top: 50%;
right: 0;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
Picture 2
body {
margin: 0;
}
.button {
position: fixed;
z-index: 999;
top: calc(50% - 120px);
left: unset;
right: -51px;
-webkit-transform: rotate(-90deg) translate(-50%, 0%);
-moz-transform: rotate(-90deg) translate(-50%, 0%);
-o-transform: rotate(-90deg) translate(-50%, 0%);
-ms-transform: rotate(-90deg) translate(-50%, 0%);
transform: rotate(-90deg) translate(-50%, 0%);
}
<button type="button" class="button">
<span class="button__text">Interaction Designer <br> # Company</span>
<span class="button__icon"></span>
</button>
<div style="height:100vh;"></div>
<div style="height:100vh;"></div>
Can someone explain why my purple box overlaps my yellow box in this demo?
I'd like my yellow box to appear first & then my purple box to be 10px below it.
Demo: http://jsfiddle.net/t0x0y7ax/
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>
Personally, I would just transform the container...it makes it much easier all round
JSfiddle Demo
* {
margin: 0;
padding: 0;
}
#container {
position: fixed;
top:50%;
left:0;
border:1px solid red;
transform-origin:top left;
transform: rotate(-90deg) translate(-100%, 0%);
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>
It is because of the rotation as the commentator specified. You can float them to get them to show up next to each other - http://jsfiddle.net/t0x0y7ax/2/.
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
float: left;
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
float: left;
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Updated Fiddle - http://jsfiddle.net/t0x0y7ax/12/
I'm having trouble to get a div (or the text inside) to get on the vertical center. Normally I have no trouble getting a div to be a certain percentage from the top of a page, but in some weird way, the % part gets completely ignored.
Here's a Fiddle
It's a very dumbed down version of my project, but it still screws up with the margin-top.
The result I'm aiming for is having the big text in the vertical middle of the page at all times. I have a feeling I'm actually approaching this completely wrong.
HTML
<div class="col-md-12 top-text">
<span class="top-title">Billetten <br /> Tjekliste</span>
</div>
CSS
.top-text {
text-align: center;
color: #000;
height: 10px;
margin-top:50%;
}
span.top-title {
font-family: 'art', helvetica, arial, sans-serif;
font-size: 180px;
line-height: 1em;
display: inline-block;
-webkit-transform: rotate(-10deg) skew(-10deg, 0);
-moz-transform: rotate(-10deg) skew(-10deg, 0);
-ms-transform: rotate(-10deg) skew(-10deg, 0);
-o-transform: rotate(-10deg) skew(-10deg, 0);
transform: rotate(-10deg) skew(-10deg, 0);
}
What I usually do to center stuff vertically, is set their position to absolute, give it a top value of 50% and then drag them up again by translating them with a negative 50% (referred to their own width).
Here's a fiddle: http://jsfiddle.net/y1muc7gr/1/
span.top-title {
font-family: 'art', helvetica, arial, sans-serif;
font-size: 180px;
line-height: 1em;
display: block;
position: absolute;
top: 50%;
width: 100%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
-moz-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
-ms-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
-o-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
}
You are forgetting to minus the half text's height.
http://jsfiddle.net/y1muc7gr/2/
.top-text {
text-align: center;
color: #000;
height: 10px;
margin-top:-180px;
position: absolute;
top : 50%;
}
is that what you want?
i have make this jsfiddle
add position:relative in top-title
and bottom:200px; change it according to your desired position
span.top-title {
position:relative;
font-family: 'art', helvetica, arial, sans-serif;
font-size: 180px;
line-height: 1em;
display: inline-block;
-webkit-transform: rotate(-10deg) skew(-10deg, 0);
-moz-transform: rotate(-10deg) skew(-10deg, 0);
-ms-transform: rotate(-10deg) skew(-10deg, 0);
-o-transform: rotate(-10deg) skew(-10deg, 0);
transform: rotate(-10deg) skew(-10deg, 0);
bottom:200px;
}
http://jsfiddle.net/y1muc7gr/5/
jsfiddle example
setting the container with table-cell you can give it the vertical align properties to center the text inside.
.top-text {
text-align: center;
color: #000;
height: 600px;
display: table-cell;
vertical-align: middle;
}
the only problem is that you should have a fixed height container.
I want to center the vertically text in a DIV but I can't figure out how. As it is right now, I must use margin-top and manually set the text as centered, but I'm changing the text through jQuery since you can click on the text to make something happen.
.weather-information-paging-left {
background-color : #fafafa;
border-bottom-left-radius : 10px;
cursor : pointer;
height : 100%;
margin-left : -30px;
position : absolute;
width : 60px;
user-select : none;
-moz-user-select : none;
-khtml-user-select : none;
-webkit-user-select : none;
-webkit-user-drag : none;
}
.weather-information-paging-right {
background-color : #fafafa;
border-bottom-right-radius : 10px;
cursor : pointer;
height : 100%;
margin-left : 80px;
position : absolute;
width : 60px;
user-select : none;
-moz-user-select : none;
-khtml-user-select : none;
-webkit-user-select : none;
-webkit-user-drag : none;
}
.weather-information-paging-left-content {
margin-top : 118px;
margin-left : -29px;
width : 120px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.weather-information-paging-right-content {
margin-top : 118px;
margin-left : -29px;
width : 120px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
jsFiddle
How can I make this vertically text dead center in the DIV?
*{margin:0;}
.test{
position:absolute;
background:#ddd;
width:60px;
height:100%;
}
.test span{
position:relative;
display:inline-block;
top:50%; /* Center it vertically */
left:50%; /* Center it horizontally */
height:2.5em;
margin-top:-1.25em; /* - half height (to perfect center it) */
width:100px;
margin-left:-50px; /* - half width (to perfect center it) */
background:#cf5; /* just to see it */
transform: rotate(-90deg); /* after it's all centered, apply rotation */
transform-origin:50% 50%; /* and rotation origin */
}
<div class="test">
<span>The sun and the moon</span>
</div>
Try using this css:
.weather-information-paging-right-content {
margin-top : 118px;
margin-left : -29px;
width : 120px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* 25% because you have already moved the origin of the div */
position: absolute;
top: 25%;
}
I know how to rotate text 90 degrees using CSS, but I'm trying to align the text to the top-right of the page (or a parent element) as its 90-degree-rotated self. Is this possible?
Example:
Neither of the previous solutions work for any amount of text. You need to use transform-origin.
<div class="container">
<span class="rotate">Hello THERE!</span>
</div>
.rotate {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(90deg);
-moz-transform-origin: left top;
-ms-transform: rotate(90deg);
-ms-transform-origin: left top;
-o-transform: rotate(90deg);
-o-transform-origin: left top;
transform: rotate(90deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
font-size: 48px;
}
My first time answering something very new to this but here is the code:
<div id="block">
<p id="rotate">Hello!!!</p>
</div>
<style>
#block{
width:500px;
height:500px;
display:block;
margin:auto;
border: 1px solid #000;
position:absolute;
}
#rotate {
position:relative;/* place the text relateve to whatever tag is devined as absolute */
left:130px;/* change these dimensions - can use left or right */
top:20px;/* change these dimensions can use top or bottom*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>
The solution is simple,add the rotation in text and position absolute.
<style>
#block{
width:500px;
height:500px;
display:block;
margin:auto;
border: 1px solid #000;
position:relative;
}
#text {
padding:0;
margin:0;
position:absolute;
right:0;
font-size:30px;
top:40px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>
<div id="container">
<p id="text">Hello!!!</p>
</div>