Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/07/2013, 05:27
Avatar de madman_18
madman_18
 
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 14 años, 4 meses
Puntos: 14
Exclamación Escribir verticalmente y que ocupe el 100% del div

Hola a todos!

Tengo un bloque el cual el height me va aumentando, no es fijo...ahora, tengo su título de la caja está escrito de forma vertical pero no consigo hacer que si el div por ejemplo me mida 200px, el título también me mida 200px, no sé como hacerlo ¬¬

Os pongo el código y la estructura por si veis si falla algo:
Código HTML:
Ver original
  1. <section class="bloque-recomendamos" id="sugerencias">
  2.            
  3.             <article class="titulo-recomendamos">
  4.                 <p style="height:100%;">Recomendamos</p>
  5.             </article>
  6.             <aside class="recomendamos">
  7.                 <ul>
  8.                     <li>
  9.                         <p class="tituloProducto-recomendamos">Lata Aceite 5L.</p>                        
  10.                         <img src="imagenes/aside/lata.png"/>
  11.                         <p class="segProducto-recomendamos">Garrafa de aceite presentada en un c&oacute;modo envase en lata con capacidad de 5L.</p>
  12.                     </li>
  13.                     <li>
  14.                         <p class="tituloProducto-recomendamos">Lata Aceite 5L.</p>                        
  15.                         <img src="imagenes/aside/lata.png"/>
  16.                         <p class="segProducto-recomendamos">Garrafa de aceite presentada en un c&oacute;modo envase en lata con capacidad de 5L.</p>
  17.                     </li>
  18.                    
  19.                 </ul>
  20.             </aside>
  21.             <div class="limpia"></div>  
Código CSS:
Ver original
  1. section.bloque-recomendamos{
  2.     width:250px;
  3.     height:auto;
  4.     position:fixed;
  5.     top:50%;
  6.     left: -226px;
  7.     margin-top: -125px;
  8.     /*background:#F2F2F2;*/
  9.     border-left: 2px solid #A5942A;
  10.     border-top: 2px solid #A5942A;
  11.     border-bottom: 2px solid #A5942A;
  12.     border-top-right-radius: 10px;
  13.         -moz-border-top-right-radius: 10px;
  14.         -webkit-border-top-right-radius: 10px;
  15.         -o-border-top-right-radius: 10px;
  16.     border-bottom-right-radius: 10px;
  17.         -moz-border-bottom-right-radius: 10px;
  18.         -webkit-border-bottom-right-radius: 10px;
  19.         -o-border-bottom-right-radius: 10px;
  20.    
  21. }
  22. article.titulo-recomendamos{
  23.     width:16px;
  24.     height:100%;
  25.     float:right;
  26.     font-size: 16px;
  27.     word-wrap: break-word;
  28.     color:#F2F2F2;
  29.     background: #A5942A;
  30.     margin:0 auto;
  31.     text-align:center;
  32.     padding: 5px;
  33.     cursor:pointer;
  34.     border-top-right-radius: 10px;
  35.         -moz-border-top-right-radius: 10px;
  36.         -webkit-border-top-right-radius: 10px;
  37.         -o-border-top-right-radius: 10px;
  38.     border-bottom-right-radius: 10px;
  39.         -moz-border-bottom-right-radius: 10px;
  40.         -webkit-border-bottom-right-radius: 10px;
  41.         -o-border-bottom-right-radius: 10px;
  42. }
  43.  
  44. aside.recomendamos{
  45.     width:85%;
  46.     float:left;
  47.     padding: 5px 1.5%;
  48. }
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"