Entrar

Estilos para listas

Aprendiendo · · Solicitar retirada
Antes de nada felicitar a los responsables de CCTW y agradecer su curso paso a paso.
Empeze esta tarde a leer el curso y mirad que horas... y aún sigo enganchado.
Os cuento, voy por el tema2 y no consigo eliminar puntos de la lista y además me aparece como:

menu
- -- enlace 1
- enlace2
- enlace3
- enlace4
el menu a la izq y los enlaces en el centro de la página, estando el primero descuadrado con respecto al resto de enlaces.

He seguido todos los pasos aunque el paso de -reparando fallo menu- ( #contenido {background-color: orange ; width: 800px ; float:left} ). Si lo elimino de estilos me aparece el menu(sin la capa amarilla) y los enlaces alineado todos en el centro.
Bueno lo cierto es que no tengo ninguna idea, estoy aprendiendo y soy algo cabezon e intento averiguar como solucionarlo antes de molestar a alguien, pero esto me sobre pasa... hay madre y es solo el principio.

Os muestro lo que llevo realizado, a ver si podeis echarme una mano.

GRACIAS

plantilla html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="estilo-general.css" />
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">Esta será la zona principal de la web</div>
<div id="menu">menu</div>
<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4

    </div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>

    estilos.css

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #cabecera {background-color: pink }
    #navegacion {background-color: PaleGreen }
    #contenido {background-color: orange}
    #pie {background-color: brown}
    #global {width:800px ; margin: 4px auto }
    #menu {background-color: yellow; width: 100px ; float:left ; ; text-align:left }
    #contenido {background-color: orange ; width: 800px ; float:left}
    #menu li { list-style:none }
    • Gracias CCTW
    Novato · · Solicitar retirada
    Hola, si lo que nos muestras está escrito como lo has copiado en el mensaje de arriba tienes varias cosas mal, en primer lugar veo que NO has relacionado la plantilla con la hoja de estilos, tu tienes esto:

    <link rel="stylesheet" type="text/css" href="estilo-general.css" />

    y luego nos dices que la hoja se llama estilos.css , cuidado yaque no se llaman igual como ves, además la hoja de estilos que se llama estilos.css es para relacionarla con el index.html , para que te funcione bien la hoja que nos muestras ha de llamarse estilo-general.css y ya que estamos, poner lo que te falta en esta linea: media="all", deberia ser así:

    <link rel="stylesheet" href="estilo-general.css" type="text/css"media="all">


    luego veo que tienes capas (div) mal cerradas,tu tienes:

    <div id="contenido">Esta será la zona principal de la web</div>
    <div id="menu">menu</div>
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4

    </div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>



    Lo rojo está mal, quitalos y añade el que ahora te muestro en verde:


    <div id="contenido">Esta será la zona principal de la web
    <div id="menu">menu
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4

    </div>
    </div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>

    En cuanto a la hoja de estilos ordenala un poco ya que si en la plantilla llevas un orden en la hoja de estilos hay que respetar ese orden, por ejemplo si en la plantilla aparece antes la capa global que la capa contenido en la hoja de estilos tambien ha de estar así, tu tienes:

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

    la capa global la tienes despues del pie.., la capa contenido la tienes dos veces..., te deberia quedar así:

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



    modifica esto y luego nos cuentas.
    Un saludo.
    • Aprendiendo · · Solicitar retirada
    Gracias Novato

    La hoja si la tengo puesta como estilo-general.css.
    El fallo de no relacionar la plantilla con la hoja de estilos viene de mi mala picaresca, que pensaba que arrastrando desde el workspace podria servir. Por cierto, esto si es aplicable a imagenes? o por el contrario puede dar problemas? Yo lo hice y parece que funciona...

    Quitando los </di> se soluciono el problema de los puntos y el desorden, por cierto, el </di> y el otro que ya tenia son los que cierran a "contenido" y a "menu", no?

    ahora funciona bien
    Nuevamente gracias
    Un saludo
    Gracias CCTW
    Novato · · Solicitar retirada
    Hola, me alegra que te funcione bien, lo de arrastrar las imagenes no entiendo bien a que te refieres, procura hacerlo todo como se explica en el curso ya que si tienes otro problema será más facil ayudarte, respecto a los </div> tienes razón en que eran de esas capas y por lo tanto estaban mal cerrados.

    Si tienes alguna otra duda ya sabes..., un saludo.