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

miguelito · « **en:** 05 de Abril 2017, 15:17 »

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>

pedro,, · « **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.

miguelito · « **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>

pedro,, · « **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.

miguelito · « **Respuesta #4 en:** 06 de Abril 2017, 12:00 »

buen dia, muchas gracias ya casi lotengo si puedo acoplar tu solucion genial

pedro,, · « **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.

miguelito · « **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 · « **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>

pedro,, · « **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]

miguelito · « **Respuesta #9 en:** 06 de Abril 2017, 20:36 »

tienes razon, perdona y muchas gracias por aclararme lo del como escribir

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

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

miguelito

CSS. Como sobreponer cajas con texto superposición una encima de otra caja

pedro,,

Re:SOBREPONER CAJAS CON TEXTO

miguelito

Re:SOBREPONER CAJAS CON TEXTO

pedro,,

Re:SOBREPONER CAJAS CON TEXTO

miguelito

Re:CSS. Como sobreponer cajas con texto.

pedro,,

Re:CSS. Como sobreponer cajas con texto.

miguelito

Re:CSS. Como sobreponer cajas con texto.

miguelito

Re:CSS. Como sobreponer cajas con texto.

pedro,,

Re:CSS. Como sobreponer cajas con texto.

miguelito

Re:CSS. Como sobreponer cajas con texto.

Preguntas y respuestas