0

intento hacer que un texto tenga color de fondo gris, le apliqué un color gris al contenedor del texto pero al transformarlo con rotate, deja de cubrir toda la página dejándome unos espacios en blanco que no me gustan para el diseño, la pregunta es: ¿Saben cómo hacer que me ocupe todo el ancho? Mil gracias, acá les dejo el código que llevo html y css,y una captura de los espacios que no quiero en blanco, ¡saludos! Olvidé mencionar que me gustaría que fuera responsivo, ¡gracias de nuevo!

/******Second header******/
.second_header{
    text-align: center;
    position: relative;
}
.sec_cont_text{
    transform: rotate(15deg);
    overflow: hidden;
}
.no_bg{
    margin-left: -30%;
    text-align: center;
}
.grey_background{
    text-align: center;
    background-color: #252525;
}
<section class="second_header">
        <div class="second_header_content ">
            <div class="sec_cont">
                <img src="img/ipag.svg" alt="Desarrollo web">
            </div>
            <div class="sec_cont_text">
                <h1 class="no_bg">Desarrollo</h1>
                <div class="grey_background">
                    <h1>de paginas web</h1>
                </div>
            </div>
        </div><!--second header content-->
    </section><!--Second header-->

espacios

0

1 respuesta 1

0

Te bastaría para lo que necesitas con poner un 'overflow: visible' en el contenedor que deseas que sobre salga y por asegurar darle un 'z-index' mayor que al resto de elementos para que se superponga pase lo q pase. Hago una pequeña modificación en tu 'css' como ejemplo:

    /******Second header******/
     .second_header{
       text-align: center;
       position: relative;
       overflow: hidden;
    }
   .sec_cont_text{
       transform: rotate(15deg);
      /*Modificación en la respuesta*/
      overflow: hidden;
    }
   .no_bg{
       margin-left: -30%;
       text-align: center;
    }
   .grey_background{
        text-align: center;
        background-color: #252525;
        overflow: visible;
        z-index: 999999;
   }
   .grey_background h1{
      /*conservo el H1 para no variar mucho tu código pero en este caso creo que sería mejor utilizar otra etiqueta con menos estilos predefinidos por el navegador y darle tú el estilo que consideres*/
       width:150px !important;
   }


  <section class="second_header">
    <div class="second_header_content ">
        <div class="sec_cont">
            <img src="img/ipag.svg" alt="Desarrollo web">
        </div>
        <div class="sec_cont_text">
            <h1 class="no_bg">Desarrollo</h1>
            <div class="grey_background">
                <h1>de paginas web</h1>
            </div>
        </div>
    </div><!--second header content-->
 </section><!--Second header-->

Además comparto aquí un enlace con la documentación sobre el uso de la propiedad de CSS 'overflow' por si te fuera de utilidad en este u otros proyectos: https://developer.mozilla.org/es/docs/Web/CSS/overflow

3
  • El, overflow hidden se lo puse por que al no hacerlo se me extiende la pagina hacia la derecha ya que al poner el rotate la caja del sale del 100% de ancho de la pagina y me da la opcion de hacer scroll a la derecha y eso no lo quiero en la pagina, ahora, aun que ponga el visible no me rellena todo con el fondo negro, gracias igual por tu respuesta!
    – pwnaz
    Commented el 22 mar. 2020 a las 21:00
  • Eso es porque lo tienes dentro de un H1, adecuo la respuesta.
    – JorgeGuz
    Commented el 22 mar. 2020 a las 21:03
  • A los h1 les quite el margin y padding tambien le di tamaño personalizado, como te digo, lo que se sale de la pagina es el contenedor div que se rota y pues sigue sin funcionar como me gustaria
    – pwnaz
    Commented el 22 mar. 2020 a las 21:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.