Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Introducir css en body

CSS - Introducir css en body

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Introducir css en body

Publicado por maita (3 intervenciones) el 06/02/2017 11:59:13
Buenas!

estoy diseñando una newsletter en la que el css debe ir introducido en el body. Mi problema es que el diseño tiene unos botones que despliegan texto en css, y no se como podría hacer para que estando en el body pudiera seguir desplegándose.

Este es estilo que deseo integrar en el body:

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
<style>
input[id^="spoiler"] + label {
	display: block;
	background-color: #f8f8f8;

	cursor: pointer;
	width: 10%;
	margin: 0 auto;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 15px;
	float: right;
	background-color: #666666;

	background-position: 85% 0;
	background-size: 20% 100%;
	background-size: 20% 100%;
	background-repeat: no-repeat;
}
input[id^="spoiler"]:checked + label {
	color: #333;

	background-color: #f8f8f8;

	float: right;
	height: 100%;
	width: 10%;
	background-color: #2226DB;

	background-position: 85% 0;
	background-size: 20% 100%;
	background-repeat: no-repeat;
}
input[id^="spoiler"] ~ .spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
}
input[id^="spoiler"]:checked + label + .spoiler{
height: auto;
opacity: 1;
}
</style>


Este es el body:

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
<body>
  <ul style="	height: 100%; color: #000000; margin-left: -3em; font-family: Raleway; font-style: normal;font-weight: 100; font-size: 14px;">
<li style="text-decoration: none; list-style-image: none; list-style-type: none; font-family: Raleway, sans-serif; padding-top: 2%; margin-top: 5px; text-align: left; width: 100%; float: left; background-color: #F8F8F8;
	padding-left: 0%;">Título del texto <input style="display: none;
	width: 20%;" type="checkbox" id="spoiler1"></input>
<label for="spoiler1"></label>
<div style="padding-bottom: 2%; padding-top: 2%; padding-left: 1%; padding-right: 1%;"" class="spoiler"><span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;"> Cuerpo del texto.

</span></div>
</li>
</ul>
<ul style="	height: 100%; color: #000000; margin-left: -3em; font-family: Raleway; font-style: normal; font-weight: 100; font-size: 14px;">
<li style="text-decoration: none; list-style-image: none; list-style-type: none; font-family: Raleway, sans-serif; padding-top: 2%; margin-top: 5px; text-align: left; width: 100%; float: left; background-color: #F8F8F8; padding-left: 0%;">Título del texto<input type="checkbox" id="spoiler2"></input>
<label for="spoiler2"></label>
<div style="padding-bottom: 2%; padding-top: 2%; padding-left: 1%; padding-right: 1%;" class="spoiler"><span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;">Cuerpo del texto.
</span></div>
</li>
</ul>
<ul style="	height: 100%; color: #000000; margin-left: -3em; font-family: Raleway; font-style: normal ;font-weight: 100;
	font-size: 14px;">
<li style="text-decoration: none;list-style-image: none;list-style-type: none;font-family: Raleway, sans-serif;padding-top: 2%;margin-top: 5px;text-align: left;width: 100%;float: left;background-color: #F8F8F8;padding-left: 0%;">Título del texto <input type="checkbox" id="spoiler3"></input>
<label for="spoiler3"></label>
<div style="padding-bottom: 2%;padding-top: 2%;padding-left: 1%;padding-right: 1%;"" class="spoiler"><span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;">Cuerpo del texto.

</span></div>
</li>
</ul>
</body>

Os agradecería que me dijerais si es posible hacerlo y en ese caso como hacerlo.

muchas gracias!
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
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Introducir css en body

Publicado por Brayan (16 intervenciones) el 07/02/2017 18:01:01
Quisiera ayudarte, pero es muy dificil porque tienes codigo css mezclado con html.
Recomendaciones
1. Acomodar el codigo (Css con Css - Html con Html). No hagas estilos en HTML.
2. Exponer un poco mejor el tema. (Por mi Parte no entendi muy bien lo que quieres hacer).
3. Dices que debes introducir estilos en el body, pero ¿que estilo?

Nota: Intenta explicarme mejor que deseas hacer o has un boceto en Photshop o danos una img referencial de lo que deseas. y asi poder ayudarte.
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

Introducir css en body

Publicado por maita (3 intervenciones) el 08/02/2017 10:51:38
Buenas Brayan,
para que se visualice correctamente me han dicho que debo meter el css en el html. Mi problema es que el css tiene unos botones desplegables, y no se si puedo meter ese css también el el html para que sigan desplegándose... ya se que no se debe hacer pero es la manera en la que funcionan.

1
2
3
4
5
6
7
8
9
10
11
input[id^="spoiler"]:checked + label {
	color: #333;

	background-color: #f8f8f8;

	float: right;
	height: 100%;
	width: 10%;
	background-color: #2226DB;

	background-position: 85% 0;
	background-size: 20% 100%;
	background-repeat: no-repeat;
}

Es una pestaña que tiene texto oculto y al hacer click muestra el texto oculto.
Siento explicarme mal, a ver si ahora me entiendes mejor.

Gracias!
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
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Introducir css en body

Publicado por Brayan (16 intervenciones) el 08/02/2017 13:48:04
Te puedo asegurar que no es del todo correcto, a nivel de estandar para eso se creo la extension .css, y la etiqueta link en .html, sino funciona es porque no se estan usando bien los selectores.

Tocando otro punto no hay problema alguno, un estilo no interfiere con el otro, puedes sin ningun problema darle estilo al body, sin afectar los botones, solo los afectara por ejemplo si al body le das un display none, o le das propiedades que alteren lo interno, pero colocarle background, fontsize, margin, y el resto de atributos no debe traerte problema, pero insisto has todo por separado.

Recordemos que para los estandares que maneja la w3 lo mejor es hacerlos estilos en las hojas de cascadas, en vez de aplicarlos directamente en el html.

y si necesitas una ayuda para darle estilo al body dinos que necesitas colocarle, y te ayudo con mucho gusto.

NOTA: el width del body si lo modificas puede generar que los botones sean mas pequeños!
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

Introducir css en body

Publicado por maita (3 intervenciones) el 08/02/2017 16:33:43
Gracias por tu ayuda Brayan!

mi problema es que un mismo elemento, por ejemplo <input> y <label>, tienen diferente css al hacer click en el botón, y no se como introducirlo en el html.

por ejemplo:

1
2
3
4
5
6
7
<li style="text-decoration: none; list-style-image: none; list-style-type: none; font-family: Raleway, sans-serif; padding-top: 2%; margin-top: 5px; text-align: left; width: 100%; float: left; background-color: #F8F8F8;
	padding-left: 0%;">Título del texto <input style="display: none;
	width: 20%;" type="checkbox" id="spoiler1"></input>
<label for="spoiler1"></label>
<div style="padding-bottom: 2%; padding-top: 2%; padding-left: 1%; padding-right: 1%;"" class="spoiler"><span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;"> Cuerpo del texto.

</span></div>
</li>

Aquí arriba el <input> tiene un css metido, que tiene display:none; . Lo que no se es como puedo meter el siguiente css por ejemplo,

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
input[id^="spoiler"] + label {
	display: block;
	background-color: #f8f8f8;

	cursor: pointer;
	width: 10%;
	margin: 0 auto;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 15px;
	float: right;
	background-color: #666666;

	background-position: 85% 0;
	background-size: 20% 100%;
	background-size: 20% 100%;
	background-repeat: no-repeat;
}
input[id^="spoiler"]:checked + label {
	color: #333;

	background-color: #f8f8f8;

	float: right;
	height: 100%;
	width: 10%;
	background-color: #2226DB;

	background-position: 85% 0;
	background-size: 20% 100%;
	background-repeat: no-repeat;
}
para que al hacer click me aparezca como display: block; y demás.

No se si me explico bien... pero si me pudieras ayudar te lo agradecería enormemente!

Gracias Brayan!
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
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Introducir css en body

Publicado por Brayan (16 intervenciones) el 08/02/2017 16:59:17
Sinceramente no entiendo mucho, lo que veo al unir los codigos es que el checked si aparece a nuestra derecha como un barra pequeña, al darle click se hace una especie de aside

Adjunte todo tu codigo en uno quedo asi
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
<style>
 
input[id^="spoiler"] + label {
display: block;
background-color: #f8f8f8;

cursor: pointer;
width: 10%;
margin: 0 auto;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 15px;
float: right;
background-color: #666666;

background-position: 85% 0;
background-size: 20% 100%;
background-size: 20% 100%;
background-repeat: no-repeat;
}
input[id^="spoiler"]:checked + label {
color: #333;

background-color: #f8f8f8;

float: right;
height: 100%;
width: 10%;
background-color: #2226DB;

background-position: 85% 0;
background-size: 20% 100%;
background-repeat: no-repeat;
float: none;
}
 
</style>
 
 
<li style="text-decoration: none; list-style-image: none; list-style-type: none; font-family: Raleway, sans-serif; padding-top: 2%; margin-top: 5px; text-align: left; width: 100%; float: left; background-color: #F8F8F8;
padding-left: 0%;">
    Titulo del texto
    <input style="display: none; width: 20%;" type="checkbox" id="spoiler1">
    <label for="spoiler1">
    Hola soy un label
    </label>
 
    <div style="padding-bottom: 2%; padding-top: 2%; padding-left: 1%; padding-right: 1%;" class="spoiler">
 
        <span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;">
             Cuerpo del texto.
        </span>
    </div>
</li>

En este código lo que hice fue quitar el flotante y el input queda centrado. para que sepas los input son etiquetas sin cierre es decir:

1
2
<input>//Esto es lo correcto

<input></input>//Esto esta catastróficamente mal

Ahora si lo que tu quieres es ocultar label y que cuando le des al checked aparezca deberias hacer esto:

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
<style>
 
input[id^="spoiler"]  {
display: block;
background-color: #f8f8f8;

cursor: pointer;
width: 10%;
margin: 0 auto;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 15px;
float: right;
background-color: #666666;

background-position: 85% 0;
background-size: 20% 100%;
background-size: 20% 100%;
background-repeat: no-repeat;
height: 3%;
padding: 5%
 
}
 
input[id^="spoiler"] + label {
display: none;
}
 
input[id^="spoiler"]:checked + label{
color: #333;

background-color: #f8f8f8;

float: right;
height: 100%;
width: 10%;
background-color: #2226DB;

background-position: 85% 0;
background-size: 20% 100%;
background-repeat: no-repeat;
float: none;
display: block;
}
 
</style>
 
 
<li style="text-decoration: none; list-style-image: none; list-style-type: none; font-family: Raleway, sans-serif; padding-top: 2%; margin-top: 5px; text-align: left; width: 100%; float: left; background-color: #F8F8F8;
padding-left: 0%;">
    Titulo del texto
    <input style=" width: 20%;" type="checkbox" id="spoiler1">
    <label for="spoiler1">
    Hola soy el label
    </label>
 
    <div style="padding-bottom: 2%; padding-top: 2%; padding-left: 1%; padding-right: 1%;" class="spoiler">
 
        <span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;">
             Cuerpo del texto.
        </span>
    </div>
</li>

si eso es lo que necesitas me avisas sino creo que no entiendo lo que dices.

NOTA: PUEDES COLOCAR TODO EN UN MISMO ARCHIVO HTML Y PROBARLO SI TE RESULTA NOS AVISAS, COMENTAS Y VALORAS XD
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