Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Ayuda con esta lista

HTML - Ayuda con esta lista

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 11
Ha aumentado su posición en 7 puestos en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con esta lista

Publicado por Sergio (5 intervenciones) el 09/03/2020 02:08:14
Hola gente queria saber si en la lista que cree, si ven la imagen el borde verde que tiene cada comida, si puedo reducirlo al tamaño de la palabra, porque yo tenia pensaba hacer que cuando la persona pase el mouse sobre el nombre de la comida se abra un imagen, con el hover, pero si lo dejo asi como está en la imagen se abre en cualqueir parte dentro de la zona verde... y no quiero eso porque es molesto... ayuda
sopas2
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 joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con esta lista

Publicado por joel (460 intervenciones) el 09/03/2020 08:41:57
Hola Sergio, no me queda muy claro tu problema... entiendo que quieres reducir el tamaño de la separación entre las letras y las lineas verdes de la tabla?
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
sin imagen de perfil
Val: 11
Ha aumentado su posición en 7 puestos en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con esta lista

Publicado por Sergio (5 intervenciones) el 09/03/2020 16:07:58
Hola joel, en realidad lo que quiero es que esa lista cuando pase el mouse se abre una imagen, como muestra la imagen que paso, lo que quiero es reducir el campo ese verde que tengo, porque si paso el mouse sobre la esquina de la palabra, se abre igual, ahí en la imagen lo ejemplifique, si no me entendes te puedo pasar el html y css si queres, para que te quede mas claro..

click
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 joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con esta lista

Publicado por joel (460 intervenciones) el 09/03/2020 20:53:44
Hola Sergio, ahora si que te entendí!!! gracias por comentarlo con una imagen.

Si puedes, estaría bien que colocaras el código para ver como te podemos ayudar... simplemente con la imagen, no se muy bien por donde mirar.
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: 11
Ha aumentado su posición en 7 puestos en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con esta lista

Publicado por Sergio (5 intervenciones) el 09/03/2020 21:23:55
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
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Restaurante Saravia</title>
	<link rel="stylesheet" href="estilo.css">
</head>
<body>
	<div id="principal">
	<header id="header">
		<h1>Restaurante Saravia</h1>
	</header>
 
	<nav id="navegador">
		<ul>
			<li><a href="#sopas">Menú</a></li>
			<li><a href="#ubicacion">Ubicación</a></li>
			<li><a href="#Contacto">Contacto</a></li>
		</ul>
	</nav>
 
	<section id="sopas">
		<h2>Sopas</h2>
		<ul>
			<li id="mani">Mani</li>
			<li id="chairo">Chairo</li>
			<li id="zapallo">Zapallo</li>
			<li id="verduras">Verduras</li>
		</ul>
	</section>
 
	<section id="Contacto">
		<h2>Contacto</h2>
		<p>Horarios: 12hs a 22hs</p>
 
	</section>
 
 
	</div>
	<footer id="footer">
	<div id="copyright">Copyright&copy; 2020 - Página creada por Sergio Mancilla - Todos los derechos reservados</div>
	</footer>
 
 
</body>
</html>

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
*{
	margin: 0px;
	padding: 0px;
	font-family: verdana;
}
@font-face{
	font-family: Signatra;
	src:url(Signatra.ttf);
}
 
#principal
{
	width: 1200px;
	margin: 0px auto;
	border:1px solid blue;
 
}
 
h1{
	text-align: center;
	font-family: Signatra;
	font-size:125px;
}
 
#navegador ul li{
	display: inline-block;
	margin: 15px;
 
}
#navegador{
	text-align: center;
}
 
section{
 
 
	text-indent: 550px;
	font-size: 25px;
}
 
section ul li{
	list-style: none;
	line-height: 50px;
	font-size: 25px;
}
h2{
	margin-top: 50px;
}
 
#ubicacion p{
	line-height: 70px;
}
 
a{
	text-decoration:none;
}
 
#sopas ul li{
 
    border: 1px solid green;
 
 
}
 
#mani:hover{
    font-family: sans-serif;
    color: white;
    background-image: url(imagenes/sopamani.jpg);
    width: 1200px;
    height: 500px;
    transition: border 1s;
    display: block;
}

ese el html y css
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 joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con esta lista

Publicado por joel (460 intervenciones) el 10/03/2020 07:38:23
Hola Sergio, creo que la solución pasa por poner un <span> dentro del <li> y poner el evento :hover en el span, de esta manera, te funcionara solamente al pasar el ratón por encima del texto... algo así:

cambiar:
1
<li id="mani">Mani</li>
por:
1
<li id="mani"><span>Mani</span></li>

y cambiar el estilo:
1
#mani:hover{
por:
1
#mani span:hover{

Con esto, creo que te mostrara la imagen solo con pasar el ratón por encima del nombre.

Lo puedes probar?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 11
Ha aumentado su posición en 7 puestos en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con esta lista

Publicado por Sergio (5 intervenciones) el 10/03/2020 20:37:13
Hola Joel, Muchas gracias! me funciona perfecto, ahora solo me queda hacer arreglos del diseño .. 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