2

Tengo mil problemas con el ejercicio de la universidad , os adjunto el siguiente código:

.cajas {

  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;
  
}

.caja {
  margin: 20px;
  height: 500px;
  width: 240px;
  border: 1px solid; /* Creamos el borde */
    
}

.cajaAzul {
  background-color: blue;
  height: 100px;
  width: 240px;
}



.circle {
  border: 1px solid #2ECC71;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  background-color: #2ECC71;
}

.textCircle {
  margin-top: 11px;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 20px;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <link href="css/estilos.css" rel="stylesheet" type="text/css" />
    </head>
    <body>      
        <div class="principal">
            <div class="container2">
                <div class="interno">
                    <!-- Aquí introducimos el contenido principal de nuestra página -->
                    <main>
                        <h2>Fichas de usuarios que participan en los juegos mundiales de diseño</h2>
                        <div class="contenedorgrid">
                            <div class="cajas">
                                <div class="caja">
                                    <div class="cajaAzul">
                                    </div>
                                    
                                    <div class = "circle"> </div>
                                    
                                    
                                    <p class= "textCaixa"><strong>un señor cualquiera</strong></p>
                                    <p class= "textRandom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur tellus vel sapien porta, eget bibendum libero viverra. Nullam turpis libero, viverra non lectus et, elementum mattis turpis. Sed laoreet, orci sed dignissim suscipit, orci sem ultrices turpis, interdum mollis nunc augue congue purus. Praesent a facilisis enim. Proin ultricies aliquet sem at suscipit. Nam mollis ipsum nec porttitor luctus. Sed non ex vitae odio vehicula efficitur eget at sapien. Curabitur nec pretium mauris.</p>
                                </div>
               
                                </div>
                            </div>
                    </main>

                </div>       
            </div>
        </div>

    </body>
</html>

Mi problema viene cuando inserto el .circle que quiero que ocupe parte del cuadro azul y blanco.

Es decir ahora mismo se ve así:

introducir la descripción de la imagen aquí

Tiene que quedar el circulo centrado y entre el blanco y el azul...

como lo hago?? :S

Si añado el centro o lo añado en la caja azul o en la blanca, pero no puedo entre medio de las ambas.. Que me recomendáis??

No sé si lo estoy haciendo bien.. si tendría que hacerlo diferente.. :S

Tengo que conseguir una caja dividida en dosy al menos funcionar funciona... pero ahora si que me pierdo con el circulo..

1
  • Esta línea margin: 0px; no requiere de px, con 0 alcanza
    – user128299
    el 2 nov. 2020 a las 16:53

4 respuestas 4

1

Considero que puedes proceder de esta forma:

  • Al contenedor de los 3 elementos (las 2 cajas y el círculo) dale un posicionamiento relativo y de esa manera logramos que el párrafo este absoluto con respecto de el
  • Al p que nos servirá para pintar la imagen la puedes dar un posicionamiento absoluto
    • Dado esto, entonces al círculo lo puedes mover con top y left
    • A este mismo círculo lo podemos mover con pixeles de referencia o mediante porcentajes (yo usé esto último)

    <style>
      .contenedor {
        position: relative;
        width: 200px;
      }
      .contenedor-circulo{
        background-color: teal;
        border-radius: 50%;
        height: 40px;
        left: 39%;
        position: absolute;
        top: 33%;
        width: 40px;
      }
      .contenedor-informaesto {
        background-color: white;
        border: 1px solid;
        height: 100px;
      }
      .contenedor-informaotro {
        background-color: crimson;
        border: 1px solid;
        height: 100px;
      }
    </style>

    <section class="contenedor">
      <article class="contenedor-informaesto">

      </article>
      <p class="contenedor-circulo">

      </p>
      <article class="contenedor-informaotro">

      </article>
    </section>

1

con un poco de css puedes posicionarlo un poco mas arriba. Solo agregué position y top al .circle

.cajas {

  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;
  
}

.caja {
  margin: 20px;
  height: 500px;
  width: 240px;
  border: 1px solid; /* Creamos el borde */
    
}

.cajaAzul {
  background-color: blue;
  height: 100px;
  width: 240px;
}



.circle {
  position: relative;
  top : -20px;
  border: 1px solid #2ECC71;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  background-color: #2ECC71;
}

.textCircle {
  margin-top: 11px;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 20px;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <link href="css/estilos.css" rel="stylesheet" type="text/css" />
    </head>
    <body>      
        <div class="principal">
            <div class="container2">
                <div class="interno">
                    <!-- Aquí introducimos el contenido principal de nuestra página -->
                    <main>
                        <h2>Fichas de usuarios que participan en los juegos mundiales de diseño</h2>
                        <div class="contenedorgrid">
                            <div class="cajas">
                                <div class="caja">
                                    <div class="cajaAzul">
                                    </div>
                                    
                                    <div class = "circle"> </div>
                                    
                                    
                                    <p class= "textCaixa"><strong>un señor cualquiera</strong></p>
                                    <p class= "textRandom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur tellus vel sapien porta, eget bibendum libero viverra. Nullam turpis libero, viverra non lectus et, elementum mattis turpis. Sed laoreet, orci sed dignissim suscipit, orci sem ultrices turpis, interdum mollis nunc augue congue purus. Praesent a facilisis enim. Proin ultricies aliquet sem at suscipit. Nam mollis ipsum nec porttitor luctus. Sed non ex vitae odio vehicula efficitur eget at sapien. Curabitur nec pretium mauris.</p>
                                </div>
               
                                </div>
                            </div>
                    </main>

                </div>       
            </div>
        </div>

    </body>
</html>

1
  • Te hace falta centrarlo. usa align, o como hay dimensiones fijas margin-left: 100px;
    – quevedo
    el 2 nov. 2020 a las 16:42
1

Podrías jugar con la propiedad margín de .circle. Al darle un margin-right: auto y margin-left: auto le estamos diciendo al navegador que deseamos que el elemento esté a la misma distancia del margen izquierdo de su contenedor que del margen derecho (es un truquillo para centrar elementos que no sean de bloque). Después, con un margin-top: -20px estamos provocando que el elemento se salga 20px por la parte superior de su contenedor, como el círculo tiene de alto 40px estamos provocando que quede en la mitad de la línea separatoria que hay entre los colores azul y blanco.

Con margin: -20px auto 0 auto; estoy usando una manera abreviada de establecer esos márgenes que comento, similar a la que haría haciendo lo siguiente:

margin-top: -20px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

.cajas {

  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;
  
}

.caja {
  margin: 20px;
  height: 500px;
  width: 240px;
  border: 1px solid; /* Creamos el borde */
    
}

.cajaAzul {
  background-color: blue;
  height: 100px;
  width: 240px;
}



.circle {
  border: 1px solid #2ECC71;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  background-color: #2ECC71;
  margin: -20px auto 0 auto;
}

.textCircle {
  margin-top: 11px;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 20px;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <link href="css/estilos.css" rel="stylesheet" type="text/css" />
    </head>
    <body>      
        <div class="principal">
            <div class="container2">
                <div class="interno">
                    <!-- Aquí introducimos el contenido principal de nuestra página -->
                    <main>
                        <h2>Fichas de usuarios que participan en los juegos mundiales de diseño</h2>
                        <div class="contenedorgrid">
                            <div class="cajas">
                                <div class="caja">
                                    <div class="cajaAzul">
                                    </div>
                                    
                                    <div class = "circle"> </div>
                                    
                                    
                                    <p class= "textCaixa"><strong>un señor cualquiera</strong></p>
                                    <p class= "textRandom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur tellus vel sapien porta, eget bibendum libero viverra. Nullam turpis libero, viverra non lectus et, elementum mattis turpis. Sed laoreet, orci sed dignissim suscipit, orci sem ultrices turpis, interdum mollis nunc augue congue purus. Praesent a facilisis enim. Proin ultricies aliquet sem at suscipit. Nam mollis ipsum nec porttitor luctus. Sed non ex vitae odio vehicula efficitur eget at sapien. Curabitur nec pretium mauris.</p>
                                </div>
               
                                </div>
                            </div>
                    </main>

                </div>       
            </div>
        </div>

    </body>
</html>

1

Hola lo puedes hacer con la propiedad position: absolute; te dejo el código espero que pueda servir.

.cajas {

  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;
  
}

.caja {
  margin: 20px;
  height: 500px;
  width: 240px;
  border: 1px solid; /* Creamos el borde */
    
}

.cajaAzul {
  background-color: blue;
  height: 100px;
  width: 240px;
  margin-bottom: 30px;
}

.caja {
  position: relative;
}


.circle {
  border: 1px solid #2ECC71;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  background-color: #2ECC71;
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.textCircle {
  margin-top: 11px;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 20px;
  font-weight: bold;
}
<div class="principal">
            <div class="container2">
                <div class="interno">
                    <!-- Aquí introducimos el contenido principal de nuestra página -->
                    <main>
                        <h2>Fichas de usuarios que participan en los juegos mundiales de diseño</h2>
                        <div class="contenedorgrid">
                            <div class="cajas">
                                <div class="caja">
                                    <div class="cajaAzul">
                                    </div>
                                    
                                    <div class = "circle"> </div>
                                    
                                    
                                    <p class= "textCaixa"><strong>un señor cualquiera</strong></p>
                                    <p class= "textRandom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur tellus vel sapien porta, eget bibendum libero viverra. Nullam turpis libero, viverra non lectus et, elementum mattis turpis. Sed laoreet, orci sed dignissim suscipit, orci sem ultrices turpis, interdum mollis nunc augue congue purus. Praesent a facilisis enim. Proin ultricies aliquet sem at suscipit. Nam mollis ipsum nec porttitor luctus. Sed non ex vitae odio vehicula efficitur eget at sapien. Curabitur nec pretium mauris.</p>
                                </div>
               
                                </div>
                            </div>
                    </main>

                </div>       
            </div>
        </div>

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.