vertical navigation with rotated text
Rotating each a
element or li
element will make us encounter some problem spacing, positioning the elements exactly as we want. We should build the navigation menu so that it spreads horizontally, looks OK first then we just to need rotate the whole container of the navigation menu. Here is the updated code:
.main-nav {
width:100vh;
height:45px;
position:fixed;
background:#4c4c4c;
-webkit-transform-origin: left top;
-webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav li {
margin-right:20px;
float:right;
height:100%;
line-height:45px;
}
The menu is supposed to have fixed height of 45px
(after rotated, it will be the width). We use line-height:45px
to center the a
element vertically (after rotated, it will be horizontally). At first the .main-nav
will lie horizontally like this:
we need to rotate it -90deg
(which is counter-clockwise) around the point left - top
specified by transform-origin: left top
. After rotated, all the .main-nav
will be out of view like this:
So we need to translate it down a distance of 100% of width
, however note that we don't use translateY
which seems to mean translate it vertically, because after rotated, the X axis becomes vertical (not horizontal as before), so we have to use translateX(-100%)
(the positive direction is upwards, it's rightwards before rotated). Then we have:
It's just a simple use case related to transform in CSS3. For the vh
unit, it's the unit relative to the viewport's height. 100vh
means 100% of viewport's height
. We have to use 100vh
for the width
because after rotated, width
becomes height
. It should fill the full height of the viewport. However you can set some min-width
for the width
by px to limit the width
's minimum value. It's because when you resize the window, the viewport's height may become small and hence the width
will be shrunk accordingly. Also note that instead of using float:left
for the li
elements, we have to use float:right
so that the Home menu appears first from top to bottom, otherwise (using float:left
), the Home menu will appear at the end (at bottom). There is a little advanced usage of the transform
here (to newbie) it we use more than 1 transform for a transform
property, all the transforms are separated by space and the order of transforms is important. Such as rotate(-90deg) translateX(-100%)
means rotating -90deg
first, then translating along the X axis -100%
, while translateX(-100%) rotate(-90deg)
is reverse to that, it's a totally different thing and of course won't work (makes an unexpected result).
Jsbin Demo.
Vertical menu with rotated text at 100% height
Try this:
CSS
#container {
overflow: hidden;
width: 50px;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: table;
}
.section {
position: relative;
height: 33.33333%;
display: table-row;
background: #ccc;
text-align: center;
}
.section .link {
display: table-cell;
vertical-align: middle;
line-height: 50px;
white-space:nowrap;
max-width:50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.section:hover { background: #ddd }
HTML
<div id="container">
<div class="section"><a href="#" class="link">aaa</a></div>
<div class="section"><a href="#" class="link">bbb</a></div>
<div class="section"><a href="#" class="link">ccc</a></div>
</div>
DEMO JSFiddle
Align vertical rotated text with horizontal text
This is quite hard and seems like you need some real help here :)
I'll try to explain in code:
@import 'https://fonts.googleapis.com/css?family=Oswald';
h2 { text-align: right; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 8em; line-height: 1.1em;}
h2 span.smallVertical { font-size: 12%; letter-spacing: 0.1em; /*float: left; /* NOOOOOOOOOOOO :) */ display: inline-block; /* use this instead of float:left */ transform: rotate(-90deg) translateY(50%); /* Add: translateY 50% */ width: 8em; /* same as font size (OR A BIT SMALLER) */ text-align:center; /* to center text inside the red thing */ vertical-align:top; /* top to "center" span... (yeah I know...) */ background:rgba(255,0,0,0.1); /* just to see what the heck we're doing */ white-space: nowrap; /* prevent small text wrap at 8em */}
h2 span.orangeText { color: #FF9900;}
<h2> <span class="smallVertical orangeText">We're Just A</span> Small<br/>Company<br/> <span class="smallVertical">Striving For A</span> <span class="orangeText">Big Feel</span></h2>
Vertical align with scrollable rotated text
Just add display:flex
in ul.nav
selector and set overflow-y:hidden
and overflow-x:auto
in .main-nav
Here is the JSBIN: http://jsbin.com/qixapariku/1/edit?html,css,output
Rotated text overlays sticky navigation bar
Transform on an element creates a stacking context, since none of it's parent is a stacking context, it's on the same level of the other stacking context, the navbar (position sticky).
When we have 2 stacking contexts on the same level, and both without z-index
, the last one is shown on top of those that come before it.
The solution: Set z-index on the navbar:
.navbar {
z-index: 1;
background: #ff0000;
position: sticky;
top: 0;
width: 100%;
}
Demo
* { margin: 0; padding: 0; box-sizing: border-box;}
.container { height: 150px; overflow: auto;}
.navbar { z-index: 1; background: #ff0000; position: sticky; top: 0; width: 100%;}
table td.cell_vert_text { text-align: center; white-space: nowrap; vertical-align: middle; width: 1.5em;}
table td.cell_vert_text div.rotwrap div.textcon { transform: rotate(270deg); margin-left: -10em; margin-right: -10em;}
<div class="container"> <nav class="navbar"> <div> Sticky Navbar </div> </nav> <section> <div> <table> <tr> <td rowspan="8" class="cell_vert_text"> <div class="rotwrap"> <div class="textcon">Problematic Text</div> </div> </td> <td class="cell_horiz_text">Ok Text</td> </tr> <tr> <td class="cell_horiz_text">Ok Text</td> </tr> <tr> <td class="cell_horiz_text">Ok Text</td> </tr> <tr> <td class="cell_horiz_text">Ok Text</td> </tr> <tr> <td class="cell_horiz_text">Ok Text</td> </tr> <tr> <td class="cell_horiz_text">Ok Text</td> </tr> <tr> <td class="cell_horiz_text">Ok Text</td> </tr> <tr> <td class="cell_horiz_text">Ok Text</td> </tr> </table> </div> </section></div>
Centering rotated text in td
Don't use rotation but adjust the writing-mode
. The text will get centred and you no more need to force the width:
td:not([rowspan]) { width: 60px}
p { margin:5px; writing-mode: vertical-lr; transform: scale(-1);}
<table border="1"> <tbody> <tr> <td rowspan="12"> <p>There is information text</p> </td> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> <tr> <td>11</td> </tr> <tr> <td>12</td> </tr> </tbody></table>
How to vertically center rotated text in a div with a float attribute?
You can do this with absolute positioning, but without having to manually push the content into its place by simply adding these rules to your existing css:
.button {
position: relative;
}
.rotare {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Here's a JS Fiddle of it in action: http://jsfiddle.net/grammar/NgrWg/
And here's an article explaining this method of vertical centering in more detail: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
EDIT - secondary approach without absolute positioning
Another approach is to use table
and table-cell
as the display property for the wrapper and text respectively. I've updated the fiddle to show that method as well: http://jsfiddle.net/grammar/NgrWg/1/.
Here's another article that explains this table-cell
trick, and also outlines a third technique for centering things vertically: http://css-tricks.com/centering-in-the-unknown/
SVG - rotate text in relation to rect
If I read your code correctly you're currently aligning your <text>
elements vertically and rotate them - better use horizontal offsets
You could instead place your label elements with specific x
coordinates relative to your current rect's center.
Example 2nd cell
<rect x="10" y="0" width="10" height="10" fill="magenta"/>
<text x="15" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 15, 5)">02</text>
The text element's x-value (15) is the center point of the current cell/rect.dominant-baseline="central"
and text-anchor="middle"
just simplify the horizontal and vertical alignment relative to the preceding <rect>
.
We copy this x-value to the transformation:
transform="rotate(-45, 15, 5)"
This way we ensure the label is rotated around the rect's center.
Also, this method is quite robust, considering that some browsers still have problems with transform-origin
and transform-box
(especially some versions of Safari)
Static svg example
svg {
display: block;
border: 1px solid #ccc;
}
text {
font-size: 5px
}
<svg width="50%" viewBox="0 0 30 10">
<rect x="0" y="0" width="10" height="10" fill="green"/>
<text x="5" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 5, 5)">01</text>
<rect x="10" y="0" width="10" height="10" fill="magenta"/>
<text x="15" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 15, 5)">02</text>
<rect x="20" y="0" width="10" height="10" fill="cyan"/>
<text x="25" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 25, 5)">03</text>
</svg>
<p>Add gaps</p>
<svg width="50%" viewBox="0 0 32 10">
<rect x="0" y="0" width="10" height="10" fill="green"/>
<text x="5" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 5, 5)">01</text>
<rect x="11" y="0" width="10" height="10" fill="magenta"/>
<text x="16" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 16, 5)">02</text>
<rect x="22" y="0" width="10" height="10" fill="cyan"/>
<text x="27" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 27, 5)">03</text>
</svg>
Related Topics
CSS Transform Not Working in Ie 8
Font Awesome 5 Whatsapp Icon CSS Style
Codemirror Cursor Position Offset
Sass: Selecting The Parent Element with Multiple Nested Selectors
How to Change Twitter Bootstrap Background Color
How to Select CSS Id's with Numbers in Them
How to Style Ng-Bootstrap - Alternative to /Deep/
What Is The Meaning of an Ampersand in Less Selectors
How to Center and Middle a Figure in HTML Xaringan R
Is There a Way for a Particular Div to Ignore It's Parent Div's Positioning
CSS Center Image in a Clipped Parent Div
How to Remove Extra Space After a Colon in CSS with Sublime Text 2
How to Scale an Svg Background-Image Without Honoring Aspect Ratio in Firefox