Autor Tema: CSS. Como sobreponer cajas con texto superposición una encima de otra caja  (Leído 5040 veces)

miguelito

  • Visitante
Hola,quiero sobre poner dos cajas y no consigo mas que se en el siguiente codigo.
la idea es sacar   el texto del borde de puntos, no es ponerlo encima, si no desplazarlo en el espacio para que parezca que está desplazado por encima. me han dicho que podria  hacer dos párrafos con la etiqueta p, una de ellas darle el borde dotted y en la otra usar paddings u otras etiquetas para moverlo por encima. pero solo soy capaz de hacer lo siguiente. gracias a todos.....:

Código: [Seleccionar]
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>prueba de practica ejercio-4</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #marco{
           border: 15px solid #696969;
           width: 890px;
           height: auto;
        }
       
        .contenedor {
            border: 15px solid #DCDCDC;
            width: 860px;
            height: auto;
            border:
        }
       
        .cabecera {
            padding: 15px;
            border: none;
            background-color: #696969;
            margin: 15px;
            width: 800px;
            height: auto;
            clear: both;
        }
       
        .columnaderecha {
            padding: auto;
            border: 15px;
            background-color: #A9A9A9;
            margin-right: 15px;
            width: 200px;
            height: 60px;
            float: right;
            clear: both;
            text-align: center;
        }
       
     
       
        .bloque1 {
            padding: 15px ;
            border: 15px;
            background-color: #DCDCDC;
            margin: 15px;
            width:580px;
            height: auto;
            float: left-top;
        }
       
       
        .bloque2 {
            width:540px;border-color:beige; border-style: dotted; border-width: 5px ;
         margin: 15px;   
           
        }
           
       
       
        .parrafo1 {
           margin:dotte; padding-right:0% ;border-width: 5px ;  border-color:beige; border-style: dotted;  width:550px; margin-top: 15px  font-size:19px;
        }
        .parrafo2{
            position: relative;margin-left: -10px;margin-top: -33px
        }
        .pie {
            padding: 15px ;
            border : none;
            background-color: #696969;
            margin: 15px;
            width: 800px;
            height: auto;
        }
       
        .rojo {
            color: red;
        }
       
        .blanco {
            color: white;
        }
    </style>
</head>

<body>
    <div id="marco">
        <div class="contenedor">
            <div class="cabecera">
                <h1 class="rojo">CABECERA</h1>
                <h3 class="blanco">Subtitulo de la cabecera</h3>
            </div>

            <div class="columnaderecha">
                <h4>Esta es la columna derecha.</h4>
            </div>
            <div class="bloque1">
           
           
                <p class="parrafo1" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
                    el bloque 1.</p>
                <p class="parrafo2" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
                    el bloque 1.</p> 
           
                <p class="bloque2">Esto es el bloque 2.</p>
            </div>
            <div class="pie">
                <h3 class="blanco">Esto es el pie de pagina.</h3>
            </div>
        </div>
    </div>
</body>

</html>
« Última modificación: 11 de Junio 2017, 17:57 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:SOBREPONER CAJAS CON TEXTO
« Respuesta #1 en: 05 de Abril 2017, 18:34 »
Buenas.

En este tema del curso CSS trata del posicionamiento de los elementos html.

https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=736:propiedad-position-css-static-relative-absolute-fixed-top-right-bottom-left-ejemplos-practicos-cu01032d&catid=75&Itemid=203

No entendí muy bien tu duda, he escrito un código que no se si será lo que estás buscando.

Código: [Seleccionar]
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>prueba de practica ejercio-4</title>
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }       
body {
background-color: yellow;
}
    .parrafo1 {
  position: relative;
    top: -15px;
    left: -25px;
    font-size:19px;
    width: 120%;
    }

    .bloque1 {
   
top: 50px;
left: 50px;
    position: absolute;
  width:550px;
    border-color: white;
    border-style: dotted;
    border-width: 5px; 
    }
    </style>
</head>

<body>
    <div class="bloque1">   
<p class="parrafo1">
esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es el bloque 1.
</p>               
    </div>
</body>

</html>

Saludos. ;D

miguelito

  • Visitante
Re:SOBREPONER CAJAS CON TEXTO
« Respuesta #2 en: 05 de Abril 2017, 22:58 »
mu chas gracias. lo que quiero es:
--• Página centrada de 800 píxeles de ancho.
• Reinicializa todos los márgenes y rellenos como primera declaración de estilos.
• Cabecera y pie de página que ocupen todo el ancho y cuyas alturas se ajusten al contenido.
• Distancia entre elementos de 15 píxeles.
• Una columna a la derecha de 200 píxeles de ancho.
• El primer bloque de texto simulará texto saliéndose por ambos lados de la caja. Los bloques de texto tendrán un borde de 5 píxeles.
• Respeta los colores de fuentes y fondos.
y  yo solo he conseguido lo siguiente, me falta sacar el texto fuera de los puntos

Código: [Seleccionar]
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>prueba de practica ejercio-4</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #marco{
           border: 15px solid #696969;
           width: 890px;
           height: auto;
        }
       
        .contenedor {
            border: 15px solid #DCDCDC;
            width: 860px;
            height: auto;
            border:
        }
       
        .cabecera {
            padding: 15px;
            border: none;
            background-color: #696969;
            margin: 15px;
            width: 800px;
            height: auto;
            clear: both;
        }
       
        .columnaderecha {
            padding: auto;
            border: 15px;
            background-color: #A9A9A9;
            margin-right: 15px;
            width: 200px;
            height: 60px;
            float: right;
            clear: both;
            text-align: center;
        }
       
     
       
        .bloque1 {
            padding: 15px ;
            border: 15px;
            background-color: #DCDCDC;
            margin: 15px;
            width:580px;
            height: auto;
            float: left-top;
        }
       
       
        .bloque2 {
            width:540px;border-color:beige; border-style: dotted; border-width: 5px solid;
            margin: 15px;
            clear: both;
        }
           
       
        .parrafo1 {
           margin:dotte; padding-right:0% ;  border-color:beige; border-style: dotted;  width:550px; margin-top: 15px  font-size:19px;
        }
        .parrafo2{
            position: relative;margin-left: -10px;margin-top: -33px
        }
        .pie {
            padding: 15px ;
            border : none;
            background-color: #696969;
            margin: 15px;
            width: 800px;
            height: auto;
        }
       
        .rojo {
            color: red;
        }
       
        .blanco {
            color: white;
        }
    </style>
</head>

<body>
    <div id="marco">
        <div class="contenedor">
            <div class="cabecera">
                <h1 class="rojo">CABECERA</h1>
                <h3 class="blanco">Subtitulo de la cabecera</h3>
            </div>

            <div class="columnaderecha">
                <h4>Esta es la columna derecha.</h4>
            </div>
            <div class="bloque1">
           
           
                <p class="parrafo1" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
                    el bloque 1.</p>
               
           
                <p class="bloque2">Esto es el bloque 2.</p>
            </div>
            <div class="pie">
                <h3 class="blanco">Esto es el pie de pagina.</h3>
            </div>
        </div>
    </div>
</body>

</html>
« Última modificación: 06 de Abril 2017, 09:21 por pedro,, »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:SOBREPONER CAJAS CON TEXTO
« Respuesta #3 en: 06 de Abril 2017, 10:02 »
Buenas.

De momento, al revisar el código hay varias cosas que corregir:

en .contenedor te dejaste la propiedad border sin completar.

en .columnaderecha usas padding: auto; y auto no es un valor válido para padding.

en .bloque1 usas float: left-top; y left-top no es un valor válido, float acepta los valores none, right, left, initial e inherit.

en .bloque2 usas border-width: 5px solid; y border-width no admite el esitlo del borde como valor, solo se debe indicar el grosor del borde.

en .parrafo1 le das a margin el valor dotte, esto tampoco es correcto.

en .parrafo1 también se te olvido colocar punto y coma despues del valor del margin-top, con la consecuencia que este y lo que viene después no se ejecuta.

Sobre el enunciado y la parte que comentabas, ¿el ejemplo que te puse anteriormente es lo que quieres que pase con el primer bloque de texto?

Saludos. ;D

miguelito

  • Visitante
Re:CSS. Como sobreponer cajas con texto.
« Respuesta #4 en: 06 de Abril 2017, 12:00 »
buen dia, muchas gracias ya casi lotengo si puedo acoplar tu solucion genial

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS. Como sobreponer cajas con texto.
« Respuesta #5 en: 06 de Abril 2017, 16:07 »
Te dejo una posible solución.

Espero que te valga.

Código: [Seleccionar]
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>prueba de practica ejercio-4</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #marco{
           border: 15px solid #696969;
           width: 800px;
           margin: 0 auto;
        }
       
        .contenedor {
            border: 15px solid #DCDCDC;
        }
       
        .cabecera {
            background-color: #696969;
            margin: 15px;
        }
       
        .columnaderecha {
            background-color: #A9A9A9;
            margin: 0 15px 15px 0;
            width: 200px;
            height: 200px;
            float: right;
            text-align: center;
        }     
       
        .bloque1 {
            background-color: #DCDCDC;
            margin: 0 15px 15px 15px;
            width: 525px;
            float: left;
        }       
       
        .bloque2 {
            border: dotted 5px beige;
            margin: 15px;
        }           
       
        .contparrafo1 {
border: dotted 5px beige;
margin: 15px;
        }

        .parrafo1 {
          font-size:19px;
          position: relative;
          width: 550px;
          left: -15px;
        }

        .pie {
        clear: both;
            padding: 15px ;
            background-color: #696969;
            margin: 15px;
        }
       
        .rojo {
            color: red;
        }
       
        .blanco {
            color: white;
        }
    </style>
</head>

<body>
    <div id="marco">
        <div class="contenedor">
            <div class="cabecera">
                <h1 class="rojo">CABECERA</h1>
                <h3 class="blanco">Subtitulo de la cabecera</h3>
            </div>

            <div class="columnaderecha">
                <h4>Esta es la columna derecha.</h4>
            </div>
            <div class="bloque1">
            <div class="contparrafo1">
            <p class="parrafo1" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
                    el bloque 1.</p>
            </div>
                <p class="bloque2">Esto es el bloque 2.</p>
            </div>
            <div class="pie">
                <h3 class="blanco">Esto es el pie de pagina.</h3>
            </div>
        </div>
    </div>
</body>

</html>

Saludos. ;D

miguelito

  • Visitante
Re:CSS. Como sobreponer cajas con texto.
« Respuesta #6 en: 06 de Abril 2017, 16:47 »
muchas gracias, eso es lo que buscaba maaa o menos. un saludo y buen dia.

miguelito

  • Visitante
Re:CSS. Como sobreponer cajas con texto.
« Respuesta #7 en: 06 de Abril 2017, 17:48 »
hola,he provado tu codigo y es lo necesario, pero si le doy los800px que tiene que tener la cabecera se me vuelve a quedar dentro por la derecha, y con el padding del texto estoy intentando que salga pero se queda estancado y no va hacia la derecha.

Código: [Seleccionar]
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>prueba de practica ejercio-4</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
       
        #marco {
            border: 15px solid #696969;
            width: 890px;
            margin: 0 auto;
        }
       
        .contenedor {
            border: 15px solid #DCDCDC;
            width: 860px;
            height: auto;
        }
       
        .cabecera {
           padding: 15px;
            border: none;
            background-color: #696969;
            margin: 15px;
            width: 800px;
            height: auto;
            clear: both;
        }
       
        .columnaderecha {
            background-color: #A9A9A9;
            margin: 0 15px 15px 0;
            width: 200px;
            height: 80px;
            float: right;
            text-align: center;
        }
       
        .bloque1 {
            background-color: #DCDCDC;
            margin: 0 15px  15px 15px;
            width: 610px;
            float: left;
            padding-right: -15;
        }
       
        .bloque2 {
            border: dotted 5px beige;
            margin: 15px;
            font-size: 19px;
        }
       
        .contparrafo1 {
            border: dotted 5px beige;
            margin: 15px;
        }
       
        .parrafo1 {
            font-size: 19px;
            position: relative;
            width: 540px;
            left: -15px;
           
       
        }
       
        .pie {
            clear: both;
            padding: 15px;
            background-color: #696969;
            margin: 15px;
        }
       
        .rojo {
            color: red;
        }
       
        .blanco {
            color: white;
        }
    </style>
</head>

<body>
    <div id="marco">
        <div class="contenedor">
            <div class="cabecera">
                <h1 class="rojo">CABECERA</h1>
                <h3 class="blanco">Subtitulo de la cabecera</h3>
            </div>

            <div class="columnaderecha">
                <h4>Esta es la columna derecha.</h4>
            </div>
            <div class="bloque1">
                <div class="contparrafo1">
                    <p class="parrafo1">esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto
                        es el bloque 1esto es el bloque 1.</p>
                </div>
                <p class="bloque2">Esto es el bloque 2.</p>
            </div>
            <div class="pie">
                <h3 class="blanco">Esto es el pie de pagina.</h3>
            </div>
        </div>
    </div>
</body>

</html>
« Última modificación: 11 de Junio 2017, 17:56 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS. Como sobreponer cajas con texto.
« Respuesta #8 en: 06 de Abril 2017, 18:13 »
Según el enunciado que pusiste lo que tiene que tener 800px es la página.

Citar
--• Página centrada de 800 píxeles de ancho.

Y cuando introduzcas código, pulsa primero el icono "#" y después pega el código entre las etiquetas que apareceran.

[code] aquí tu código [/code]
« Última modificación: 06 de Abril 2017, 18:19 por pedro,, »

miguelito

  • Visitante
Re:CSS. Como sobreponer cajas con texto.
« Respuesta #9 en: 06 de Abril 2017, 20:36 »
tienes razon, perdona y muchas gracias por aclararme lo del como escribir

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".