css3 - How to Rotate Text and have it's Parent Div act Dynamically -


i have created slide out tab side of page. worked fine when using background image text. i'm trying use css. text turned 90 degrees. when via 

-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);

the text rotates appropriately. it's parent div however, stays had text not been rotated. how can have parent div resize text's rotation? thought trying display inline-block, didn't work.i've tried rotating parent div instead of text , opened new can of worms. here fiddle showing text turned. if hover it, tab slides out. https://jsfiddle.net/alo5egpx/

<html>   <head></head>   <body>   <div id="slideout">     <div class="slideoutwrap"><div class="slideouttxt">avantages offerts par<br>les grands lacs</div></div>     <div id="slideout_inner">         <h3>avantages offerts par les grands lacs</h3>             <p>les caractéristiques et les systèmes naturels des grands lacs et du fleuve saint-laurent comme l'eau, les rivières, les forêts, les insectes, les poissons et la faune sont des éléments importants pour des communautés en santé. ils jouent un rôle dans l'économie ontarienne, car ils permettent la création de technologies écologiques innovatrices et nous aident à nous adapter aux effets imprévisibles du changement climatique.</p>             <p>les grands lacs et le fleuve saint-laurent aident à recycler et à purifier l'eau que nous buvons, à absorber les déchets que nous produisons et à tempérer notre climat. ils sont également une source de nourriture, de combustibles et d'abris. ils nous permettent de faire des activités récréatives, lesquelles favorisent la santé physique et mentale. la région incite un large éventail de gens de partout dans le monde à vivre, à travailler et à s'amuser en ontario.</p>     </div> </div>  </body>    <style> #slideout   {     position: fixed;     top: 150px;     left:0;     background-color:#6dbbdf;     transition-duration: 0.3s;     border-radius: 0 5px 5px 0;     z-index:1000;     padding:5px;   } .slideoutwrap   {     display: inline-block;     overflow: hidden;     width: 2.5em;   } .slideouttxt   {     font-family: arial, helvetica, sans-serif;     font-size: 12px;     display: inline-block;     color: #fff;     text-align:center;     white-space: nowrap;     -ms-transform: translate(35%,10%) rotate(90.0deg);  /* ie9+ */     -webkit-transform: translate(35%,10%) rotate(90.0deg);  /* safari 3.1+, chrome */     transform: translate(35%,10%) rotate(90deg);     -ms-transform-origin: 0 0;     -webkit-transform-origin: 0 0;     transform-origin: 0 0;     line-height: 1.5;   } .slideouttxt:after   {     content: "";     display: block;     margin: -.5em 0 100% ;   }  #slideout_inner   {     position: fixed;     top: 150px;     left: -650px;     width:600px;     background-color:#00457c;     background-repeat: repeat-x;     background-position: left top;     transition-duration: 0.3s;     border-radius: 0 0 5px 0;     z-index:1000;     padding-top: 25px;     padding-right: 25px;     padding-bottom: 25px;     padding-left: 25px;   }  #slideout:hover {   left: 650px; } #slideout:hover #slideout_inner {   left: 0;   box-shadow:         4px 4px 8px 0px rgba(50, 50, 50, 0.64); } #slideout_inner p{ color:#ffffff; }  </style>    </html>

Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more