Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » sobreponiendo cajas de texto

CSS - sobreponiendo cajas de texto

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de miguel
Val: 21
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

sobreponiendo cajas de texto

Publicado por miguel (8 intervenciones) el 04/04/2017 22:50:30
hola ,primero gracias por la atencion. pues lo que quiero es hacer lo que se ve,es que para sacar el texto del borde de puntos lo mejor es 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. .
La idea no es ponerlo encima, si no desplazarlo en el espacio para que parezca que está desplazado por encima. y no soy capaz, jugando con position: relative; ni de inguna manera lo saco, me sale saturado, ya no se que hacer.
la imagen que mando va dentro de otros dos cajas div.... a ver si te he aclarado algo y me echas una mano estoy desesperaooooo. gracias, un saludo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique
Val: 126
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

sobreponiendo cajas de texto

Publicado por Enrique (43 intervenciones) el 04/04/2017 23:00:24
Te recomiendo meter la etiqueta p dentro de un div
Y al div darle el margen dotte y su margen del bottom con posición. Relativa
Y al p darle posición relativa con margin-left:-10px
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de miguel
Val: 21
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

sobreponiendo cajas de texto

Publicado por miguel (8 intervenciones) el 05/04/2017 12:42:34
ke no doy con ello amigo, esto es lo ke me sale:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Enrique
Val: 126
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

sobreponiendo cajas de texto

Publicado por Enrique (43 intervenciones) el 05/04/2017 18:11:35
Ya respondi tu mensaje
de igual modo lo posteo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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;
 
}
 
#contentP{

	    border: dotted 5px beige;
    width: 540px;
    margin-left: 15px;
    padding: 5px;
}
#contentP p{

	position: relative;
	margin-left: -25px;
}
/*.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">
 
<div id="contentP">
<p>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>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>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de miguel
Val: 21
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

sobreponiendo cajas de texto

Publicado por miguel (8 intervenciones) el 05/04/2017 22:53:27
muchas gracias, ahora voy a intentar sacar el texto por el otro lado. mil gracias a ver si con esto soy capaz. me esta costando
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar