Entrar

PROBLEMA en Tratar elementos como bloques 2 Lección

Pilar · · Solicitar retirada
Hola!!! Pues vuelvo a estar por aquí un poco encallada. Haber en el apartado que ya he puesto en el asunto tengo que poner:
a {color: brown ; text-decoration:none ; display: block }

Bien, lo hago, lo guardo y no ocurre lo de que se activen las palabras de enlace con solo cursar el cursor sobre la línea. En cambio sí ocurre que los enlaces salen más separados, cómo bien habéis dicho y una curiosidad que no hay prevista, y es que el cursor (la flechita marcadora) sale con una sombra rosada muy interesante, jejejej

Bueno, que es lo que he hecho incorrecto ahora, pues igual es cosa del explorer de nuevo?

Saludos, y buen Domingo!!!

Pilar
Salmarina · · Solicitar retirada
hum, yo hace poco he usado esa funcion del "block" pero no he tenido ningun problema ni con explorer ni con firefox... voy a mirarme el curso que estas siguiendo para enterarme un poco que si no...
Salmarina · · Solicitar retirada
sabes se me ocurre que podias abrir un espacio web gratuito para poner tus progresos, asi podriamos verlo directamente. de todas formas si no te apetece pues al menos dejame aqui en el foro el codigo entero y lo investigo vale?
Pilar · · Solicitar retirada
Bien, pero lo de abrir un espacio gratuito no he llegado todavía a la lección correspondiente, o no? Y lo del código completo no se a qué te refieres. Es que soy muy novata!!!! jejeje
JorGens · · Solicitar retirada
Mira en esa misma lección lo que os comento de colocar todos los enlaces seguidos, en la misma línea. Quizás eso arregle lo del block....

Hazlo y nos cuentas, oki?

Ah, y lo del hosting, lo vas a encontrar más adelante en las lecciones, no te preocupes.

Un abrazo!
Pilar · · Solicitar retirada
bueno, he copiado los enlaces seguidos, que me faltaba por hacerlo y me sigue pasando lo mismo. Esta es la copia de los estilos css de la plantilla:
#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}
#global {width:800px ; margin: 4px auto }
body {text-align: center}
* {margin:0px ; padding:0px ; border: 0px}
a {color: blue ; text-decoration:none ; display: block }
a:hover {color:red ; text-decoration:underline}
a:active {}

Y esta es la plantilla en html:
<DOCTYPE>

<html>
<head><link>
<title>Page title</title>
</head>
<body>
<div>
<div>Bienvenidos a mi Web</div>
<div>Barra de Navegación</div>
<div><div>
<ul>
  • <a>Enlace 1</a>
  • <a>Enlace 2</a>
  • <a>Enlace 3</a>
    </div>Esta será la zona principal de la web</div>
    <div>Este es el pié de página</div>
    </div>




    </body>
    </html>

    Haber si me sabéis ver dónde esta el fallo, porque sigue saliendo una sombra en el cursor y las lineas de enlace no se activan.

    Gracias
    • Salmarina · · Solicitar retirada
    aja, a eso me referia cuando dije "codigo". el codigo es todo esto que has puesto.

    mira, dos cosas:
    1- fijate en el documento html, ¿como puede saber él que cosas tienen que ser cabecera, cuales deben ser el menu, etc etc? tienes que indicarselo porque el no puede averiguarlo. para eso tienes que identificar cada cosa. al encabezado le debes dar una identidad, por ejemplo "cabecera", se hace asi:

    <div id="cabecera">Bienvenidos a mi Web</div>
    y listo, a cada div le tienes que asignar una identidad (id) y luego en el documento css simplemente tienes que usar esa id:
    #cabecera {background-color: pink }
    asi la capa que se llame cabecera, ira al css y si hay algun estilo para el pues lo usará. un ejemplo ilustrativo:
    carlos se levanta y, antes de nada va al armario. si ve alguna ropa con su nombre se la pondra, y si no saldra en pelotas a la calle :lol:


    y 2- cuando ya le hayas dado nombre a todo, ¿cómo sabe el documento qué hoja de estilos coger?? no puede improvisar jeje asi que debes indicarselo mediante esta linea:
    <LINK rel="stylesheet" href="estilos.css" type="text/css">
    ves donde pone "estilos.css"? pues ese es el nombre del archivo. si tu le has llamado por ejemplo, styles.css pues entonces eso es lo que debes poner.
    empleando de nuevo el ejemplo ilustrativo, carlos no solo necesita que le pongan su nombre a su ropa, si no que ademas necesita que le digan como se va al armario. esta linea de codigo vendria a ser el mapa para ir al armario.
    asi que acuerdate, necesitas primero dar nombre al idividuo (id=carlos, o en tu caso, id=cabecera), despues necesitas darle un mapa (link rel="stylesheet" href= etc etc etc) y por ultimo tienes que dejarle ropa con su nombre (#carlos {lo que sea} o en tu caso #cabecera {lo que sea})

    con eso carlos estara listo para salir bien vestido a la calle.
    :D
    JorGens · · Solicitar retirada
    Creo que el código que pegaste no ha salido completo Pilar. Para que salga entero y bien el código que nos pegas en el mensaje has de activar la casilla "Deshabilitar HTML en este mensaje" a la hora de escribirlo.

    Un abrazo!
    Pilar · · Solicitar retirada
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head><link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <title>Page title</title>
    </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>

    Pues este es el código completo, que no había manera de poner, jejeje. Con razón Salmarina me decía que lo escribiera correctamente y yo rompiendome los cascos y pensando qué más tenía que hacer.
    Jorgens no sé que es lo que ocurre, algo no hago bien o se me escapa....

    Gracias por estar ahí.
    • JorGens · · Solicitar retirada
    En las leccies os comento que aunque estén vacios, es conveniente colocar los 4 estados de los enlaces en la hoja de estilo, es decir, coloca los
    a:link {}
    a:visited{}
    a:hover{}
    a:active{}

    Con o sin nada dentro. Hazlo y nos cuentas, oki? Por lo que vemos en el codigo de tu hoja de estilo, te has comido alguno.... :roll:

    Un saludo!
    Pilar · · Solicitar retirada
    Yo los había deshabilitado pensando que ese podía ser el problema. Vale los he vuelto a colocar y sigue igual ¿? Qué rollo.... Tienes alguna idea más de lo que puede ser?
    JorGens · · Solicitar retirada
    Pues acabo de copiar el codigo que nos dices en un index.html y el codigo del css en su hoja de estilos y veo que los enlaces se subrayan y se ponen de color rojo al poner el cursor sobre ellos... Qué navegador usas para comprobarlo? A mi me funciona con explorer, opera y firefox, cual estas usando tú?
    Pilar · · Solicitar retirada
    los enlaces se subrayan y se ponen de color rojo, si, pero se trataba del siguiente paso, que pasando el cursor por la linea sin tener que pasar encima del enlace este se pusiera subrayado y en rojo. No es eso lo que explicas en la lección? o ya me estoy imaginando cosas. Pero si vuelvo a leer la lección entiendo lo mismo. ¿?
    SoNoR · · Solicitar retirada
    hola a todos resutal que a mi me ha pasado exactamente lo mismo y he seguido todo al pie de la letra, pero lo de bloques no me sale
    Salmarina · · Solicitar retirada
    funciona. el html no le he tocado, bueno y el css tampoco. pero para que os deis cuenta bien añadid esto en el a:hover:
    background-color:#000000;

    asi sera mas facil ver que realmente el vinculo funciona como un bloque.
    de tal forma que la hoja de estilos quedara identica salvo por esa linea:

    #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}
#global {width:800px ; margin: 4px auto }
body {text-align: center}
* {margin:0px ; padding:0px ; border: 0px}
a {color: blue ; text-decoration:none ; display: block }
a:hover {color:red ; text-decoration:underline; background-color:#000000;}
a:active {}

    venga menudo tropiezo mas tonto, a seguir con las lecciones :D
    Pilar · · Solicitar retirada
    La que he liado no? Bueno, ahora hay novedades. Cuando pico en la palabra enlace toda la linea cambia de color. Era esto no, lo que había que conseguir? es que ya tengo duda de todo...jeje
    SoNoR · · Solicitar retirada
    el problema sigue sin solucionarse :(:(:( el resultado que hay que conseguir es que cuando el cursos este en la linea no en el enlace propiamente dixo la linea se vuelva gris y puedas clikear sin embargo no funciona :(
    Aquí dejo mis códigos como veran tal y como lo explican en el tutorial:

    body{text-align:center}
    #cabecera{background-color:pink}
    #navegacion{background-color:gray}
    #contenido{background-color:orange ; width:800px ; float:left}
    #pie{background-color:brown}
    #global{width:800px ; margin:4px auto}
    #menu{background-color:yellow ; width:150px ; float:left ; text-align:left}
    #menu li{list-style:none ; margin: 4px 0px 4px 6px}
    * {margin:0px ; padding:0px ; border: 0px}
    a {color: brown ; text-decoration:none ; display: block }
    a:link{}
    a:visited{}
    a:hover{color:red ; text-decoration: underline ; background-color:silver}
    a:active{}
    p{text-align: justify}

    y en plantilla:

    <!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 navegacion</div>
    <div id="contenido"><div id="menu">
    <ul>
  • Enlace1
  • Enlace2
  • Enlace3
    </div>


    Esta será la zona principal de la Web</p>


    Tengo un problema con este programa y es que no se aplicar la caracteristica de block y
    es una verdadera lástima pero que le voy a hacer. Espero algun dia poder crear mi pagina web
    en condiciones ya que es mi reto ahora mismo aparte de sacarme la carrera.</p>


    Ahora encima tengo que escribir dos textos mucha tela no?. No se que más poner salvo
    que me gusta mucho la página en la que estoy aprendiendo.</p></div>
    <div id="pie">Este es el pie de la página</div>
    </div>
    </body>
    </html>
    • Pilar · · Solicitar retirada
    Estoy contigo Sonor, nos pasa lo mismo!!! Creo que no era eso lo que se pretendía conseguir, en fin. No me gustaría pasar a lo siguiente con la sensación de que se quedan cosas sin resolver, porque cuando estemos a nuestro aire, ya verás que risa!!! jejeje
    Salmarina · · Solicitar retirada
    repito que a mi me funciona copiando el codigo tal y como le tienes tu, mira:
    [contenido no disponible]

    y al pulsar parece que no va a ningun lado, porque en el codigo html esta puesto que vaya a:
    href="#"
    pero poned en vez de "#" poned "www.comocreartuweb.com" y vereis como si que funciona.

    y eso en firefox y en explorer. es imposible que no os funcione.
    Pilar · · Solicitar retirada
    Y yo el Explorer.

    Bueno, he puesto el www.comocreartuweb.com en todos los href y sigue igual. Sólo si pongo el cursor encima de la palabra enlace ocurre, pero si lo pongo dónde está el dibujo que habéis mandado, nada de nada.
    Salmarina · · Solicitar retirada
    jobar, no puede ser, mismo codigo, mismo navegador... no puede haber diferencia. no lo entiendo.