1

Tengo unas dudas sobre CSS y busco sabiduría en el grupo, resulta que tengo un template HTML llamado Emily (https://madsparrow.me/emily/index.html) y necesito colocar un PNG transparente en cualquier parte del index (Son unos círculos que funcionarían como "Items"),

Se que es meter mano en el CSS, de hecho copie el código CSS que usa el tema en el menú y trate de replicarlo para el circulo:

/* Prueba de css para circulos  */

.hamburger2 {
  margin-right: 10;
  margin-left: auto;
  overflow: visible;
  cursor: pointer;
  z-index: 7;
  border: 0;
  transition-timing-function: linear;
  transition-duration: .3s ease;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
}

.hamburger2-label {
  display: block;
  font-family: 'Yantramanav', Arial;
  font-size: 16px;
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: -4em;
  padding-right: 4em;
  text-transform: uppercase;
  line-height: 1.5em;
  transition: color .3s ease .4s;
  color: #151515;
}

.hamburger2-box {
  position: relative;
  margin-left: 1000px;
  display: inline-block;
  width: 150px;
  height: 150px;
  vertical-align: middle;
}

.hamburger2-inner:after,
.hamburger2-inner:before {
  display: inherit;
  margin-left: -100px;
  content: '';
}
<div class="hamburger2-box">
  <div class="hamburger2-inner">
    <a href="sistemas.html" data-type="page-transition">
      <img src="assets/images/boton_sistemas.png" alt="logo image">
    </a>
  </div>
</div>

Sin embargo, al cargar el index, me arrastra el logo y el botón de menú, tal como se ve en la imagen:

introducir la descripción de la imagen aquí

¿Como podría quedar un CSS para llamar a este PNG en la parte del index que quiera, sin afectar los otros elementos del sitio?,

Muchísimas gracias por cualquier ayuda.

1 respuesta 1

0

podrías crear un div para tus botones en algun lugar de tu html, y éste div posicionarlo a tu gusto sin alterar la posición de otros elementos utilizando position: absolute, por ejemplo:

<div class="botones">
  <a href="sistemas.html" data-type="page-transition">
    <img src="assets/images/boton_sistemas.png" alt="sistemas">
  </a>
  <a href="boton2.html" data-type="page-transition">
    <img src="assets/images/boton_2.png" alt="boton 2">
  </a>
  <a href="boton3.html" data-type="page-transition">
    <img src="assets/images/boton_3.png" alt="boton 3">
  </a>
</div>

y en el css lo posicionas, algo así:

  .botones {
    position: absolute;
    display: inline-flex;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
    top: 32px;
  }

  .botones>a>img {
    height: 50px;
  }

resulta esto:

screenshot

4
  • Hola piducancore, aunque esta sugerencia puede servir de guía para resolver el problema, ha sido marcada como de baja calidad por la comunidad. Edita tu respuesta para añadir más detalles: ¿qué es lo que estaba fallando? ¿por qué position:absolute resolvería el problema? ¿Dónde iría en el código compartido? Lee Cómo responder y completa el recorrido de bienvenida para más información.
    – Alvaro Montoro
    el 24 abr. 2019 a las 18:09
  • Hola @AlvaroMontoro, gracias por la información. Ya edité mi respuesta para dar más detalles. el 24 abr. 2019 a las 22:19
  • Hola piducancore, lo probare ya que había visto otra solución pero me crea mucho código espagueti, ademas de que no queda "responsivo" y se ve según diferentes pantallas... el 29 abr. 2019 a las 23:07
  • hola @JuanSalinas, para estilizar el div o los botones según diferentes tamaños de pantalla podrías usar media queries, por ejemplo: @media (max-width: 600px) { .botones { max-width: 200px; } } Para mayor info revisa ese link: CSS media queries el 30 abr. 2019 a las 16:07

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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