Entrar

lección 2 / estilos para listas / reparando el fallo del men

gayo · · Solicitar retirada
al añadir en la hoja de estilo-general.css:
#contenido {background-color: orange ; width: 800px ; float:left}
efectivamente la capa de la zona principal de la web se hace tan alta como la capa del menú...pero eh aquí EL PROBLEMA:

A la vez que adquiere la altura de la capa menu, reduce su ancho, de modo que esta capa (zona principal de la web) se queda más estrecha que el resto de capas.... Y ADEMÁS:

Se queda de tal modo que parece que se encuentra dentro de la capa pie de página... de forma que al poner "float:left", a la derecha de la capa (zona principal de la web) se puede ver como el "trozo" de anchura (de la misma altura que esta capa) que le falta para llegar a tener el mismo ancho que el resto de capas es del color que tiene la capa pie de página... Es como si la capa zona principal estuviera dentro de la capa pie de página.

Os dejo mi página 1.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 de Logopedia</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4

    </div>
    Esta será la zona principal de la web
    </div>
    <div id="pie">Este es el pié de página</div>
    </div>

    </body>
    </html>



    Y mi hoja estilo-general.css:

    * {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 }
    #menu li { list-style:none }
    #pie {background-color: brown}


    por si alguien sabe qué es lo que hago mal....MUCHAS GRACIAS de antemano.
    • gayo · · Solicitar retirada
    Soy gayo otra vez ampliando el problema que comentaba anteriormente:

    además de lo relatado, cuando maximizo la pantalla la capa de pie de página (al igual que la capa de bienvenidos y la capa de barra de navegación) se hacen todavía mas anchas, ocupando toda la pantalla y quedándose la capa de zona principal de la web con la misma anchura. Todo parece como si la capa de zona principal de la web la hubiese creado como un menú dentro de la capa pie de página...pero no es así...

    NO ENTIENDO NADA...

    por cierto tengo internet explorer...por si viene por ahí el problema...
    gayo · · Solicitar retirada
    Pues como veis sigo respondiéndome yo....

    YA HE SOLUCIONADO EL PROBLEMA !!!

    Pero no sé si le habré dado la solución adecuada, ya que no entiendo mucho de informática y muchísimo menos de creación de páginas web, ni lenguaje html y hojas de estilos ni nada de nada....por eso necesito la opinión de un experto como los que os moveis por este foro...

    En fin vamos al tema que pongo a hablar y no paro...Lo he solucionado todo como no podía ser de otro modo en la hoja de estilo-general.css añadiendo "width:800px; float:left" en la #cabecera, en la #navegación, y en el #pie, tal que así:

    estilo-general.css:

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink ; width:800px; float:left}
    #navegacion {background-color: gray; width:800px; float:left }
    #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}
    a {color: brown; font-size:1.3em ; text-decoration: none; display: block }
    a: link {}
    a: visited {color: red; text-decoration: none}
    a: hover {color: red; text-decoration:underline ; background-color: silver}
    a: active {}
    p {text-align: justify}
    .centrado {text-align:center}
    #pie {background-color: brown; width:800px; float:left}

    Lo he hecho bien??? o ya LA HE LIADO OTRA VEZ... ;)
    gayo · · Solicitar retirada
    TEMA RESUELTO !!! YA HE DADO CON EL PROBLEMA!!!

    todo viene de la pagina 1.html, en la que yo antes tenía:

    <!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>

    Y el problema venía en que no entrecomillaba "global", sino que dejaba las comillas sin cerrar, de modo que ahora lo he puesto bien:

    <div id="global">

    Y he vuelto a la hoja de estilo, lo he colocado todo como estaba y problema solucionado. Uf...que trabajo me ha costado...