I am trying to style a page with a righthand side bar that has a menu. I am using div tags. What I get looks close, but it is not obvious to me how to create the menu div in the right bar that should contain the rotated menu item divs. The image illustrates what I mean. The right bar is transparent such that the main page content below is visible. I want to animate the bar div with Javascript but accomplished that already.
Currently, I have in my css
#menu_list {
top: 0;
left: 0;
padding: 0 0;
text-align: center;
transform-origin: center top;
transform: translateX(-50%) translateY(300%) rotate(-90deg);
}
#menu_list p {
color: #fff;
line-height: 20px;
display: inline-block;
}
#right_bar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 30%;
overflow: auto;
padding: 0;
}
and as html
<div id="bar_wrapper" onclick="toggleMenu()">
<div>
<div id="menu_list">
<p>Info</p>
<p>About</p>
</div>
<div style="width:30%; height:100%; position:fixed; top:0; right:0; bottom:0;">
<h4>
Info
</h4>
</div>
</div>
</div>
but that, like other things that I have tried, does not quite do it.
try this:
jsfiddle.net/TiG3R/bLksqtpw
for rotating navbar you should rotate navbar div not rotate tabs, look at example
use css transform property on your default navbar.
#div_name {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
but I think it won't look responsive.but will look exactly as like u want
enter image description here
Related
i created div for some buttons in a kind of sidebar.
But I am not quite sure how do I get them under each other...
My previous solution were 2 divs under eachother but then it was not that could regarding the various display sizes that the buttons are directly under each other...
Any idea?
#sideBar {
position: fixed;
right: -29px;
top: 52vh;
display: inline-grid;
}
#feedbackBtn {
z-index: 1000;
transform: rotate(270deg);
}
#helpBtn {
z-index: 1000;
}
<div id="sideBar">
<Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
Feedback
</Button>
<Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default"></Button>
</div>
Image
You could remove the display: inline-grid property from #sideBar, e.g.
#sideBar {
position: fixed;
right: 0px;
top: 52vh;
transform: rotate(270deg);
z-index: 1000;
}
<div id="sideBar">
<button id="feedbackBtn">Feedback</button>
<button id="helpBtn">Help</button>
</div>
I think you only need the sideBar CSS,
Using the attribute below you could make it stick to the right and the button will behave like normal.
Note that
I move the z-index to sidebar because all the button inside of it should be on top of all element right? so you could put it on the sidebar, it doesn't have to be on the child
I move the transform to sidebar so you basically the thing that's rotating is the "container" of the sidebar, you can imagine it as a normal container with two button side by side, and then you rotate it, that's why the button is actually still side by side, not on top of each other
sorry for bad English
#sideBar {
position: fixed;
transform: rotate(270deg);
z-index: 1000;
right:-10px;
top: 52vh;
}
<div id="sideBar">
<Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
Feedback
</Button>
<Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default">Help</Button>
</div>
I'm trying to scale the elements in my body tag so that my website looks the same on differing screen sizes. However, when I apply transform: scale(), the fixed elements associated with bottom disappear. Why is this and how can I fix it?
css
body
{
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1, 1);
}
#invite
{
position: fixed;
bottom: 20px;
right: 31px;
text-align: center;
cursor: pointer;
}
The invite element disappears when I scale with 1.
It will be more helpful if you could include your code and I think you should use media query if you are trying to make your page responsive.
transform:scale(0.5) will create a new binding box for the position:fixed; element, (when that element is a child of the transformed item)
relevant Stackoverflow question
and further explanations in the chromium bug tracker
Example 'buggy' behaviour:
div {
margin: 20px;
padding: 20px;
}
.body {
background: olive;
min-height:600px
}
.main {
background: pink;
}
.bottom {
background: orange;
position: fixed;
bottom: 0;
}
.body:hover {
transform: scale(1)
}
<div class='body'>
<div class="main">
main content</div>
<div class="bottom"> bottom content </div>;
</div>
As for alternatives: responsive design; the general philosophy is to re-arrange elements into a single vertical stack as the viewport gets smaller.
This is what I'm trying to accomplish:
I want to have a navigation that will be rotated 90 deegres and fixed to the upper left corner of the window.
HTML:
<div class="outer">
<div class="inner">
<ul class="list">
<li class="item">lasange</li>
<li class="item">spaghetti</li>
</ul>
</div>
</div>
CSS:
.outer {
position: fixed;
left: 20px;
top: 20px;
background: red;
}
.inner {
-webkit-transform: rotate(-90deg);
transform-origin: 0 0;
background: green;
}
I can't get it to look like in the image above. The problem is with the rotation. The inner div is positioned and then rotated, and as a result ends up outside the outer div. No matter what I put as the origin of the transformation it doesn't work the way I want it to. I've tried positioning the inner div with position: absolute but with no luck. I don't know the height/width parameters of the menu list.
Here's a fiddle: https://jsfiddle.net/949cjcnq/7/
Any help would be greatly appreciated.
Best regards,
Paul
So I manage to position it the way you want, no matter how big your content is using position: absolute; for your .inner-div.
The only drawback is that your text is facing downwards and not upwards. Couldn't get around that issue with my CSS :S
If you -webkit-transform: rotate(180deg); the child of .inner you can turn the text the right way up :)
.outer {
position: fixed;
left: 20px;
top: 20px;
background: red;
}
.inner {
position: absolute;
bottom: 100%;
-webkit-transform: rotateZ(90deg);
transform-origin: 0 100%;
background: #AACAD7;
white-space: nowrap;;
}
.rotate {
-webkit-transform: rotate(180deg);
}
ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; }
ul li { padding: 5px 10px; }
<div class="outer">
<div class="inner">
<ul class="list rotate">
<li class="item">lasange | spaghetti</li>
</ul>
</div>
</div>
I think what you want to do is move the rotation from the inner to the outer class. Your css should look like this:
.outer {
-webkit-transform: rotate(-90deg);
position: fixed;
left: 20px;
top: 80px;
background: red;
}
.inner {
background: green;
}
To make the text appear side by side after rotation, using a table would work better than using a list:
<div class="outer">
<div class="inner">
<table class="list">
<tr>
<td class="item">lasange</td>
<td class="item"> | </td>
<td class="item">spaghetti</td>
<tr>
</table>
</div>
</div>
Working Fiddle: https://jsfiddle.net/949cjcnq/12/
Despite what you chose for the angle or rotation unfortunately you cannot do this without knowing the width of your item, as such I don't think it can be done in pure CSS/CSS3 without an expanded framework. As such to solve this you will need to use some JavaScript and get the computed width of the element and change the transformation appropriately:
var inner = document.querySelectorAll('.inner')[0];
var width = inner.offsetWidth;
inner.style.transform = "translateY("+width+"px) rotate(-90deg)";
Keep transform-origin: 0 0 as it will have the top of the element to the edge of the screen. Then we simply need to translate in the Y direction by the width, this will place the element in the left corner:
Fiddle Example
In the below snippet you will see that I removed the outer and inner html and just rotated the entire UL -90deg. The result is your example image. Further proper styling is up to you ;-)
See snippet for comments:
/* {outline: 1px dotted red } /* for debugging */
ul, li { list-style-type: none; padding: 0; margin: 0 }
ul { height: 1; /* 1 x line-height */
position: relative;
float: left;
padding: 0 6px;
/* would be regular without transform */
top: 20px; left: 20px;
/* but transform-origin now pivots around
top-right so UL element gets moved right.
So left position needs correction:
left = -1 x (total width of LI's + line-height + UL margin-LR + UL padding-LR) + wanted-left-margin */
top: 20px; left: -134px; /* (optically estimated) */
}
li {
display: inline; /* result is horizontal menu */
}
.list {
transform: rotate(-90deg); /* removed -webkit-*/
transform-origin: top right;
background: #acc9d7;
}
<ul class="list">
<li class="item">lasange | </li>
<li class="item">spaghetti</li>
</ul>
You can add a translateX(-100%) to your transform, that will set it where you want
.outer {
position: fixed;
left: 20px;
top: 20px;
background: red;
}
.inner {
-webkit-transform: rotate(-90deg) translateX(-100%);
transform: rotate(-90deg) translateX(-100%);
transform-origin: 0 0;
background: green;
}
.list {
margin-top: 0px;
}
<div class="outer">
<div class="inner">
<ul class="list">
<li class="item">lasange</li>
<li class="item">spaghetti</li>
</ul>
</div>
</div>
I want to make something like this (http://www.awesomescreenshot.com/image/442354/edb8d5ee19e54e29b50ae2e14b1b9156) on my website (http://motiongiraffx.com/).
Menu div have to be fixed on scroll and I tried this CSS
.menu-space {
width: 100%;
height: 5em;
position: fixed;
top: 0;
left: 0;
z-index: 800;
overflow: hidden;
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}
.menu-icon {
transform: skewY(10deg);
-webkit-transform: skewY(10deg);
}
but menu won't go to top corner and I lose my menu icon with those styles.
This is my HTML:
<div class="menu-space">
<span class="menu-icon" style="display: none;"><img src="http://motiongiraffx.com/wp-content/themes/motiongiraffx/images/menu-icon.png" id="nav-icon" onclick="changeImage()" alt="Menu icon"></span>
</div>
I see that problem is with width: 100%, when I remove it I got menu-space in right corner but I want to cover all that space with white color.
How can I make this work right?
may you should use possition:absolute;
fixed will be always at your browser window
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);