Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 8 de 8

Tema: display: block no funciona en curso completo paso a paso

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    23 may, 10
    Mensajes
    6
    Poder de Reputación
    0

    display: block no funciona en curso completo paso a paso

    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[/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>

  2. #2
    Recien Llegado! Merodeador
    Fecha de Ingreso
    23 may, 10
    Mensajes
    6
    Poder de Reputación
    0

    Novedades ... tristes

    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.... :?

  3. #3
    Me va gustando esto... Habitante Avatar de nexuxirc
    Fecha de Ingreso
    16 ene, 08
    Mensajes
    126
    Poder de Reputación
    18
    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

  4. #4
    Recien Llegado! Merodeador
    Fecha de Ingreso
    23 may, 10
    Mensajes
    6
    Poder de Reputación
    0
    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-k...ntilla-10.html
    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-k...e-enlaces.html

    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.

  5. #5
    Me va gustando esto... Habitante Avatar de nexuxirc
    Fecha de Ingreso
    16 ene, 08
    Mensajes
    126
    Poder de Reputación
    18
    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.

    Código:
    * {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:

    Código:
    <!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>[*]Enlace 1[*]Enlace 2[*]Enlace 3[/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

  6. #6
    Recien Llegado! Merodeador
    Fecha de Ingreso
    23 may, 10
    Mensajes
    6
    Poder de Reputación
    0
    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.

  7. #7
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,599
    Poder de Reputación
    71
    hola

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

    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  8. #8
    Recien Llegado! Merodeador
    Fecha de Ingreso
    23 may, 10
    Mensajes
    6
    Poder de Reputación
    0
    Muchas gracias, era justamente eso Yaneth.

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

Temas Similares

  1. Como puedo imprimir el curso completo paso a paso ?
    Por Danixxx en el foro Foro General
    Respuestas: 1
    Último Mensaje: 08/01/2010, 23:12
  2. Respuestas: 0
    Último Mensaje: 04/01/2009, 20:23

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •