Entrar

Mi pagina se ve bien en el HTML KIT pero no en el navegador

hedalo · · Solicitar retirada
Hola tengo una duda con una pagina que estoy haciendo gracias al curso paso a paso pero tengo un problema, ya tengo el index mas o menos hecho y se ve decente en el html kit cuando le doy prevista se ven mis imágenes perfectamente, pero me di cuenta de que al abrir el archivo del index, que esta en la carpeta de mis paginas web se deforman los margenes y no se ven las imágenes, ya revise en el html y segun yo todo esta bien incluso puedo ver el resultado en prevista pero no se por que en los navegadores no se ve como debería, bueno dejo el código del index y de la hoja de estilos, ojala ue me puedan ayudar, gracias

INDEX:

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

<html>
<head>
<title>Espacio para la comunidad de arquitectura UNAM</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>

<div id="global">
<div id="cabecera">Bienvenidos a nuestra Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu"menu>
<ul>
  • Publicaciones
  • Profesores
  • Alumnos
    </div>

    <p class="centrado">Bienvenidos alumnos de la facultad de arquitectura
    este es un espacio para los
    profesores y alumnos de la UNAM
    donde podras compartir lo que quieras


    <p class="right">[contenido no disponible]</p>
    <div id="pie">Este es el pié de página</div>


    </body>
    </html>
    HOJA DE ESTILOS:
    body {background-image: url(objetos/Fondo UNAM 1.jpg);
    img {border-style: none};
    body {text-align: center};
    .centrado {text-align:center};
    .right {text-align:right};
    #cabecera {background-color: red };
    #navegacion {background-color: gray };
    #contenido {background-image: url(objetos/Teteras.jpg); width: 800px ; float:left};
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px};
    #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};
    #menu {................... margin:3px 10px 3px 3px};
    #pie {background-color: cyan};
    a {color: blue; font-size:1.3em ; text-decoration: none; display: block };
    • hedalo
    spitfire2 · · Solicitar retirada
    Hola, el problema es que tienes algunos punto y comas en el lugar incorrecto y te falta uno de estos } al final del background-image del body, tambien te puede traer problema el hecho de abrir dos body en la misma CSS, soluciona eso andara bien

    aqui te lo dejo medio arreglado, tambien te agregue un hover para que tus enlaces cambien a rojo, queda mejor :wink: :

    img {border-style: none;}
    body {background-image: url(objetos/Fondo UNAM 1.jpg);
    text-align: center;}
    .centrado {text-align:center;}
    .right {text-align:right;}
    #cabecera {background-color: red; }
    #navegacion {background-color: gray ;}
    #contenido {background-image: url(objetos/Teteras.jpg); width: 800px ; float:left;}
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px;}
    #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;}
    #menu {margin:3px 10px 3px 3px;}
    #pie {background-color: cyan;}
    a {color: blue; font-size:1.3em ; text-decoration: none; display: block ;}
    a:hover{color:red;}