Entrar

Problema con firefox y google crhome

instalberto · · Solicitar retirada
Bueno una vez solventados otros problemas surgen nuevos para variar subo la web y con IE se ve perfecto pero con firefox o google crhome se ve todo descolocado
index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>totpaintball</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad"
<h1>www.totpaintball.com</h1>
</div>
<div id="navegacion"
<ul>
  • Inicio
  • Contacto
  • Equipacion
  • Fotos
  • Videos
  • Tarifas

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>MENU</h1>
    <ul>
  • Que es el paintball
  • Historia del paintball
  • Tipos de juego
  • Normas
    </div>
    <h1>Estas en Mallorca y todavia no has jugado a Paintball</h1>


    A que estas esperando! Ven a jugar unas partidas de paintball, nunca has probado algo tan divertido y desestresante escoje unos grupo de amigos y a disfrutar como nunca.</p>


    Estamos a 10 minutos de Palma</p>


    [contenido no disponible]</p>
    <h1>Descarga adrenalina </h1>


    [contenido no disponible]</p>
    <h1>no dejes que te pinten la mascara</h1>


    [contenido no disponible]</p>
    </div>
    <div id="pie">Tot Paintball</div>
    <div id="curva-inferior"></div>
    </div>

    </body>
    </html>

    hoja estilos
    * {margin:0px ; padding:0px ; border: 0px}
    p {text-align: center; font-size: 1.1em; color:black ; font-weight: bold }
    h1 {font-size: 1.2em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h3 {font.size: 1.1em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeatwidth: 800px ; height: 12px ; overflow : hidden }
    #cabecera {background-color: #FAF0E6; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; border-top: black 1px solid; height:85px }
    #logotipo { background-color:#FAF0E6 ;width:270px ; float:left }
    #publicidad { background-color:orange;width:200px ; float:center ; margin-top:25px ;text-align: center; font-size: 25px ; border:black 1px solid}
    #navegacion {background-color: #FAF0E6 ;width:700px; border: orange 2px solid ; height:25px }
    #navegacion ul { margin-left: 180px }
    #navegacion li {float:left; list-style:none ; margin: 0px 20px 0px 20px }
    #contenido {background-color:#FAF0E6 ;float:left;width:800px;border-left: black 0px solid ; border-right: black 0px solid }
    #contenido p { margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: orange ;width:100px ; float:left ; border:2px solid ; text-align:center ; margin:10px }
    #menu li { margin: 4px 0px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:16px ; background-image: url(objetos/menu-parte-superior.gif) }
    a {color: black; font-size:1.1em ; text-decoration: none; display: block}
    a:link {}
    a:visited {}
    a:hover { text-decoration:none ; background-color: silver}
    a:active {}
    #pie {background-color: #FAF0E6 ;text-align: center; border: border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
    • fernando mendoza · · Solicitar retirada
    hola yo creo que tienes que cerrar el div publicidad ejemplo tu tienes asi
    <div id="publicidad"
    y yo creo que es asi <div id="publicidad"> y el de navegacion tambien esta <div id="navegacion" yo creo que debes cerralos dos prueba para ver.
    saludos
    Raulyure · · Solicitar retirada
    instalberto escribió:http://www.telefonica.net/web2/totpaintball


    Hola:

    Me voy , con vuestro permiso a entrometerme un poco acá, (aprovechándo que estoy por estos lados)
    Sería conveniente que revisara, y cotejara un poco con el curso el como tiene usted la hoja de estilo.
    fuera de lo que le dijeron anteriormente acerca de cerrar correctamente las capas en su página, usted en la hoja de estilo general tiene unos pequeños errorcillos.

    Usted, según lo que nos ha puesto acá, tiene su hoja de estilo de esta manera:



    * {margin:0px ; padding:0px ; border: 0px}
    p {text-align: center; font-size: 1.1em; color:black ; font-weight: bold }
    h1 {font-size: 1.2em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h3 {font.size: 1.1em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeatwidth: 800px ; height: 12px ; overflow : hidden }
    #cabecera {background-color: #FAF0E6; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; border-top: black 1px solid; height:85px }
    #logotipo { background-color:#FAF0E6 ;width:270px ; float:left }
    #publicidad { background-color:orange;width:200px ; float:center ; margin-top:25px ;text-align: center; font-size: 25px ; border:black 1px solid}
    #navegacion {background-color: #FAF0E6 ;width:700px; border: orange 2px solid ; height:25px }
    #navegacion ul { margin-left: 180px }
    #navegacion li {float:left; list-style:none ; margin: 0px 20px 0px 20px }
    #contenido {background-color:#FAF0E6 ;float:left;width:800px;border-left: black 0px solid ; border-right: black 0px solid }
    #contenido p { margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: orange ;width:100px ; float:left ; border:2px solid ; text-align:center ; margin:10px }
    #menu li { margin: 4px 0px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:16px ; background-image: url(objetos/menu-parte-superior.gif) }
    a {color: black; font-size:1.1em ; text-decoration: none; display: block}
    a:link {}
    a:visited {}
    a:hover { text-decoration:none ; background-color: silver}
    a:active {}
    #pie {background-color: #FAF0E6 ;text-align: center; border: border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
    -----------------------------------------------------
    Si la revisa un poco, verá que en la directiva del h3, usted para definir el tamaño de la fuente del título, le pone font.size cuando lo correcto es font-size

    Luego usted tiene la capa cabecera, la cual mide de alto 85px
    Pero dentro de esa capa cabecera va la capa logotipo, que por lógica medirá de alto también 85px, pero en su página usted pone una imagen que será su logotipo, pero esta imagen que usted pone mide de alto mucho más que la capa logotipo, o sea 140px de alto.
    Eso sencillamente quiere decir que ese logotipo es demasiado alto para meterlo dentro de esa capa.
    Solución:
    O a la capa cabecera (que contiene dentro a la capa logotipo) le pone de height:140px como mínimo, o a la imagen le rebaja la altura a 85px.

    Luego siguiéndo con la capa cabecera, usted le tiene puesto unos bordes.
    Si la capa navegación tiene unos bordes por los cuatro lados, y la capa navegación está justo debajo de la capa cabecera, entonces a la capa cabecera no sería conveniente ponerle borde por abajo, cosa que usted no se lo a puesto, pero es que tampoco debe llevar borde por arriba, o sea border-top, fuera de que ese border top lo tiene repetido.

    El lugar que ocupa lo que sería el borde de arriba de la capa cabecera ya está definido por la imagen curva-superior, por tanto la capa cabecera no debiera de llevar esos border-top.

    Luego (siguiéndo con la hoja de estilo) usted en las directivas que le pone a la #curva-superior{etc. etc.}, despues que usted pone background-repeat:no-repeat debiera de haberle puesto el punto y coma para hacer la separación en que a continuación iría ese width:800 etc.

    Luego, si se fija en su pagina html, usted en la capa navegación tiene puestos seis enlaces, pues estos seis enlaces ocupan un espacio en esa capa navegación, y con las medidas que usted le ha dado a esos enlaces de la capa navegación en su hoja de estilo-general, es posible que esos eblaces no le quepan dentro de la capa navegación
    Por tanto sería a lo mejor conveniente que en su hoja de estilo general, donde dice #navegacion ul{margin-left:180px}
    Le rebajara ese margin a 100 o a 80 o a 60, ya depende de cuando usted vea que ya se meten todos los enlaces dentro de la capa navegación.

    Luego en la capa contenido, allí donde usted le pone los bordes, si le pone bordes, es lógico que le tenga que poner un ancho de borde, (ya que lo tiene que llevar).

    Con esto que le digo, no significa que la pagina se le va a arreglar de un momento a otro, pero son los pasos para que se vaya arreglándo.
    Porque aún hay otros pequeños detalles

    Saludos
    Agradecido de los que aprenden enseñando
    instalberto · · Solicitar retirada
    Bueno mi web son las siguientes.

    www.totpaintball.com
    www.instalberto.com

    He retocado algunas cosillas como biemn me has indicado Raulyure algo se ha arreglado pero sigo viendo la pagina descolocada en el resto de navegadores.

    estilo.css
    * {margin:0px ; padding:0px ; border: 0px}
    p {text-align: center; font-size: 1.1em; color:white; font-weight: bold }
    h1 {font-size: 1.2em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h3 {font-size: 1.1em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    body {background-color: #FAF0E6 ; height:100%; }
    #global {width:800px ; margin: 4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat;width; 800px ; height: 12px ; overflow : hidden }
    #cabecera {background-image:url(objetos/fondo1.png) ; height:140px }
    #logotipo { background-image:url(objetos/fondo1.png) ;width:270px ; float:left }
    #publicidad { background-image:url(objetos/fondo1.png) ;width:200px ; float:rigth ; margin-top:20px ;text-align: center; font-size: 25px ;}
    #navegacion {background-image:url(objetos/fondo1.png) ;width:800px; border: black 2px solid ; height:25px }
    #navegacion ul { margin-left: 100px }
    #navegacion li {float:left; list-style:none ; margin: 0px 20px 0px 20px }
    #contenido {background-image:url(objetos/fondo1.png) ;width:800px }
    #contenido p { margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color:orange ;width:100px ; float:left ; border:black 2px solid ; text-align:center ; margin:10px }
    #menu li { margin: 4px 0px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:16px ; background-image: url(objetos/menu-parte-superior.gif) }
    a {color: white; font-size:1.1em ; text-decoration: none; display: block}
    a:link {}
    a:visited {}
    a:hover { text-decoration:none ; background-color: silver}
    a:active {}
    #pie {background-color: #FAF0E6 ;text-align: center }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }

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

    <html>
    <head>
    <meta name="verify-v1" content="FTJOcR8ZOTZiBYUO+mk/fX6Niszeecoe/WfNrhXp5ws=" />
    <title>totpaintball</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</a>
    </div>
    <div id="publicidad">
    <h1>www.totpaintball.com</h1>
    </div>
    <div id="navegacion">
    <ul>
  • Inicio
  • Contacto
  • Equipacion
  • Fotos
  • Videos
  • Tarifas

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>MENU</h1>
    <ul>
  • Que es el paintball
  • Historia del paintball
  • Tipos de juego
  • Normas
    <h1>WEB AMIGAS</h1>
    <ul>
  • Tus Links
    </div>
    <h1>Estas en Mallorca y todavia no has jugado a Paintball</h1>


    A que estas esperando! Ven a jugar unas partidas de paintball, nunca has probado algo tan divertido y desestresante escoge unos grupo de amigos y a disfrutar como nunca.</p>


    Estamos a 10 minutos de Palma</p>


    [contenido no disponible]</p>
    <h1>Descarga adrenalina </h1>


    [contenido no disponible]</p>
    <h1>no dejes que te pinten la mascara</h1>


    [contenido no disponible]</p>
    </div>
    <div id="pie">Tot Paintball</div>
    <div id="curva-inferior"></div>
    </div>

    </body>
    </html>
    • Yaneth · · Solicitar retirada
    aqui un fallo
    separaste con punto y coma, en vez de dos puntos

    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat;width; 800px ; h

    aqui otro
    debe ser
    float: right
    #publicidad { background-image:url(objetos/fondo1.png) ;width:200px ; float:rigth

    aqui otro
    cerraste un "a" pero olvidaste abrirlo

    <div id="logotipo">[contenido no disponible]</a>

    yy olvidaste cerrar la cabecera
    </div>

    otra cosita
    debes aumentar un poco el ancho y el alto a publicidad, ya que... no cabe
    el texto en el espacio que le dejaste

    has los cambios necesarios lo subes y nos avisas de nuevo

    saludos