Entrar

display: block no funciona en curso completo paso a paso

jorge5075 · · Solicitar retirada
Hola a todos.

Estoy siguiendo entusiasmado el curso completo paso a paso, pero me he encontrado con algo que no logro que salga igual de lo que comentáis.

Para situarnos: voy por Leccion Segunda, punto "Enlaces con Fondo". Y no logro que funcione la propiedad "display: block" de los enlaces. Cuando lo puse en la hoja de estilos "estilo-general.css", sí logre el efecto no deseado de que se separan los enlaces, y que vosotros mismos decís que se soluciona poniendo los elementos de la lista, unos detras de otro, en la misma línea. Así lo he solucionado.

Pero el efecto "positivo" de que aunque el cursor esté alejado del texto, pero sobre la misma línea del enlace, se active todo el enlace con la línea en silver (background-color: silver) no sale, SALVO que me ponga sobre la palabra.

Espero haberlo explicado y no haberme enrollado mucho.

Muchas gracias de antemano, el curso está genial, es ameno, claro y muy entretenido.

Reproduzco aquí estilo-general.css y plantilla.html

Código de estilo-general.css

* {margin:0px ; padding:0px ; border: 0px}

body {text-align: center}

a {color: brown; text-decoration: none ; display: block}
a:link {}
a:visited {}
a:hover {color: red; text-decoration: underline; background-color: silver}
a:active {}

#global {width:800px ; margin: 4px auto}
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange ; width: 800px ; float:left}
#menu {background-color: yellow; width: 150px ; float:left ; text-align:left ; }
#pie {background-color: brown}

#menu li {list-style:none ; margin: 4px 0px 4px 6px}

Código de plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>

<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    Esta será la zona principal de la web
    </div>
    <div id="pie">Este es el pié de página</div>
    </div>

    </body>
    </html>
    • jorge5075 · · Solicitar retirada
    Por si acaso había cometido algún error gilipollesco, he hecho copy/paste del código que aparece en el curso (de la hoja de estilos y de plantilla.html) en la lección segunda, enlace "Indentar Párrafos", donde ponéis el código completo de ambos archivos.
    Lo he ejecutado y continúa mal, es decir, los enlaces del menú no funcionan como "bloque" y solo se ponen en gris cuando paso sobre las letras del enlace y no sobre el bloque.... :?
    nexuxirc · · Solicitar retirada
    Buenas.. He leido mas de 10 veces tu consulta y no entendi nada..

    He recogido tus fragmentos de tu codigo y lo estuve checando y funciona muy bien.

    La verdad no se que deseas hacer.

    Expresate mejor por favor para poder ayudarte
    jorge5075 · · Solicitar retirada
    A ver si soy más claro. El problema es que no funciona la sentencia "display: block".

    En este enlace del curso: http://www.comocreartuweb.com/html-kit-tutorial/ejemplos/plantilla-…
    aparece el efecto que yo no logro.

    Si desplazo el puntero del cursor sobre la parte naranja hacia la parte amarilla del menú, justo en el límite entre ambas, el enlace 1, por ejemplo, se pone con la banda gris. NO HACE FALTA LLEGAR a posicionar el puntero del ratón sobre la palabra "Enlace 1", sino que antes de llegar, ya se pone en gris (como si ya pudiera seleccionarse).

    En mi ejemplo, eso no funciona y no se pone en gris hasta llegar a la palabra "Enlace 1".

    El curso lo explica en esta página: http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…

    Lo diré de otra manera. No logro que funcione la frase siguiente del curso:
    "situando el cursor en la misma línea del enlace pero lejos del texto, también se activa el enlace"

    Quizás así esté más claro.

    MUCHAS GRACIAS por tu interés nexuxirc.
    nexuxirc · · Solicitar retirada
    Mira, como te dije, revise justamente ayer tu codigo y para mi funciona como debe ser.


    Pero si tu dices que debe ser como en el curso, aqui te paso el codigo del css del curso.


    Archivo estilo-general-10.css del curso.

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
body        {text-align: center }
#global     {width:800px ; margin:4px auto }
#cabecera   {background-color: pink }
#navegacion {background-color: gray }
#contenido  {background-color: orange ; width: 800px ; float:left }
#menu       {background-color: yellow ; width: 150px ; float:left ; text-align:left ;}
#menu li    {list-style:none ; margin: 4px 0px 4px 6px}
#pie        {background-color: brown }

a         {color: brown ; text-decoration:none ; display: block }
a:link    {}
a:visited {}
a:hover   {color:red ; text-decoration:underline ; background-color: silver}
a:active  {}


    Y el codigo fuente de la pagina es:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general-10.css" type="text/css" media="all">
</head>
<body>
<div id="global">
  <div id="cabecera">Bienvenidos a mi Web</div>
  <div id="navegacion">Barra de Navegación</div>
  <div id="contenido">

			 <div id="menu">
<ul>[*][url="#"]Enlace 1[/url][*][url="#"]Enlace 2[/url][*][url="#"]Enlace 3[/url][/list]
       </div>
			 Esta será la zona principal de la web
  </div>
	<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>


    Espero, que ahora si funcione como en el curso.

    O sea.. deberas cambiar los datos que te paso del codigo css y de tu pagina web.


    Cualquier cosa a las ordenes
    jorge5075 · · Solicitar retirada
    Gracias por intentar ayudarme, nexuxirc.

    He copiado tu código y tampoco me funciona. Lo que no funciona es la sentencia "display: block ", nada más, pero es curioso que el mismo código a mí no me vaya bien, y a los demás sí.

    Es frustrante, pero si a ti te va bien, es imposible que encuentres el error (es como cuando llevas el coche al mecánico y delante de él, el coche funciona de puta madre).

    Gracias de nuevo, mientras tanto seguiré avanzando en el curso.
    Yaneth · · Solicitar retirada
    hola

    eso solamente funciona en la red, no en la vista previa de local

    saludos
    jorge5075 · · Solicitar retirada
    Muchas gracias, era justamente eso Yaneth.

    Ahora que he subido la web de ejemplo, funciona perfectamente.