Entrar

firefox

genis2008 · · Solicitar retirada
Hola a todos.
Tengo el siguiente problema, he insertado una fotografia en el contenido de la pag. En el html la vista previa se ve bien, osea, centrada, en el explorer tb se ve bien, sin embargo, cuando la abro con el firefox la fotografia me aparace en la izquierda de la pag.

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

<html>
<head>
<title>estilo-general.css</title>
<link rel="stylesheet" href="estilos-experimentos.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id=cabecera>Prueba</div>
<div id="navegacion">
<ul>
  • Quienes somos
  • Que hacemos
  • Por qué lo hacemos
  • información
  • Contacto

    </div>
    <div id="contenido">
    <div id="oso">[contenido no disponible]</div>
    <h1>Quienes somos</h1>


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



    * {margin:0px ; padding:0px ; border: 0px}
    p {text-align: justify}
    h1 {font-size: 1.8em ; color:#372412 ; font-weight: bold ; text-decoration: none ; text-align: left ; padding: 0px 0px 0px 147px ; background-color: red}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: #372412 ; height:30px ; color:#FFEA6F ; font-size:1.8em }
    #navegacion {background-color: #372412 ; height:50px}
    #navegacion li {float:left ; list-style:none ; margin: 15px 10px 0px 10px }
    #navegacion ul { margin-left: 50px }
    #contenido {background-color: #FFEA6F ; width: 800px ; float: left}
    #oso {margin:20px 0px 50px 0px ; width:610px ; float: center ; background-color: white}
    #contenido p {padding: 5px 170px 5px 147px ; font-size:1em ; color:#371412 }
    #pie {background-color: #372412 ; height:30px ; font-size:0.75em ; padding: 5px 0px 0px 0px ; color:#FFEA6F}
    a {color: #FFEA6F ; font-size:1.3em ; text-decoration: none ; display: block }

    a:link {}
    a:visited {}
    a:hover {color:#372412 ; background: #FFEA6F }
    a:active {}


    (He puesto background-color a la foto y al titulo para ver si encontraba el fallo pero no doy con él)
    Gracias por adelantado.
    • genis2008 · · Solicitar retirada
    Y por si eso no fuera poco para mí, además, no se ve el color de fondo del pie ( tb en firefox).
    Y yo que creia q seria una pag muy sencillita, está claro q esto me supera.
    genis2008 · · Solicitar retirada
    Bueno el tema de la foto lo he solucionado con un :
    {margin:20px 0px 50px 0px ; width:500px ; margin-left:auto ; margin-right:auto } en la hoja de estilos.
    Ahora me falta el tema del pié, se aceptan sugerencias.
    Grácias
    Raulyure · · Solicitar retirada
    genis2008 escribió:Bueno el tema de la foto lo he solucionado con un :
    {margin:20px 0px 50px 0px ; width:500px ; margin-left:auto ; margin-right:auto } en la hoja de estilos.
    Ahora me falta el tema del pié, se aceptan sugerencias.
    Grácias

    Hola:
    Por lo visto le falta cerrar el div global
    Antes de </body> debe de insertar un cierre como este </div>
    Saludos
    Agradecido de los que aprenden enseñando
    genis2008 · · Solicitar retirada
    hola raulyure, he probado lo que me dices y nada, con el firefox sigue sin verse el color de fondo del pié. Grácias de todos modos y si se te ocurre algo nuevo no dejes de decirmelo, te lo agradeceré muchísimo.
    Raulyure · · Solicitar retirada
    genis2008 escribió:hola raulyure, he probado lo que me dices y nada, con el firefox sigue sin verse el color de fondo del pié. Grácias de todos modos y si se te ocurre algo nuevo no dejes de decirmelo, te lo agradeceré muchísimo.

    Hola:

    Como no he hecho todavía pruebas del porqué le sucede, pruebe en su hoja de estilo quitarle a la capa contenido el float:left, ya que usted la imagen la tiene puesta en la capa contenido.
    Para que una imagen quede centrada , la capa que la contiene (en este caso la capa contnido) también debe estar centrada, pero como se le ha dicho a la capa contenido que flote a la izquierda, entonces la imagen toma ese lugar.
    Después de quitarle a la capa contenido ese float:left, revise si se arregló.
    Si no se a arreglado entonces a la capa contenido quítele también el width:800px y ponga width:auto, pero primero pruebe lo de quitarle el float:left.
    Y Díganos si se arregló o no
    Saludos
    #contenido {background-color: #FFEA6F ; width: 800px ; }
    #contenido {background-color: #FFEA6F ; width: auto ; }
    Ya veré si hago alguna prueba con más calma
    Saludos
    Agradecido de los que aprenden enseñando
    Raulyure · · Solicitar retirada
    genis2008 escribió:hola raulyure, he probado lo que me dices y nada, con el firefox sigue sin verse el color de fondo del pié. Grácias de todos modos y si se te ocurre algo nuevo no dejes de decirmelo, te lo agradeceré muchísimo.

    Hola:
    Esto lo he hecho pero muy rápidamente, así que aún hay fallos, pero ya se irá arreglándo, Pruebe por ahora ponerlo así:


    Estilos-experimentos.css

    *{text-indent:0px;margin:0px;padding:0px;border:0px}
    p {text-align: justify}
    h1 {font-size: 1.8em ; color:#372412 ; font-weight: bold ; text-decoration: none ; text-align: left ; padding: 0px 0px 0px 147px ; background-color: red}
    body {text-align:center}
    #global {width:800px;margin:4px auto }
    #cabecera {background-color: #008000; height:30px ; color:#FFEA6F ; font-size:1.8em }
    #navegacion {background-color: #372412 ; height:50px}
    #navegacion li {float:left ; list-style:none ; margin: 10px 10px 0px 10px }
    #navegacion ul { margin-left: 50px }
    #contenido {background-color: #FFEA6F;width:auto;}
    #oso {margin:20px 0px 0px 94px ; width:610px;height:181px; ;background-color:#00FFFF}
    #contenido p {padding: 5px 10px 5px 10px ; font-size:1em ; color:#371412 }
    #pie {background-color: #372412 ; height:30px ; font-size:0.75em ; padding: 5px 0px 0px 0px ; color:#FFEA6F}
    a {color: #FFEA6F ; font-size:1.3em ; text-decoration: none ; display: block }

    a:link {}
    a:visited {}
    a:hover {color:#372412 ; background: #FFEA6F }
    a:active {}

    Plantilla.html

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

    <html>
    <head>
    <title>estilo-general.css</title>
    <link rel="stylesheet" href="estilos-experimentos.css" type="text/css" media="all">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div id="global">
    <div id=cabecera>Prueba</div>
    <div id="navegacion">
    <ul>
  • Quienes somos
  • Que hacemos
  • Por qué lo hacemos
  • información
  • Contacto

    </div>
    <div id="contenido">
    <div id="oso">[contenido no disponible]</div>
    <h1>Quienes somos</h1>


    texto.</p>
    </div>
    <div id="pie">Este es el pie de pagina</div>
    </div>
    </body>
    </html>

    Disculpe que lo haya hecho un poco a la ligera, por eso no lo he ajustado, pero como le digo se arreglará (es que me tengo que ir a trabajar)
    Saludos
    • Agradecido de los que aprenden enseñando
    Raulyure · · Solicitar retirada
    genis2008 escribió:hola raulyure, he probado lo que me dices y nada, con el firefox sigue sin verse el color de fondo del pié. Grácias de todos modos y si se te ocurre algo nuevo no dejes de decirmelo, te lo agradeceré muchísimo.

    Hola:

    Bueno lo he arreglado un poco más, parece que así queda un poco mejor

    PLANTILLA

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

    <html>
    <head>
    <title>Mi Pagina</title>
    <link rel="stylesheet" href="estilos-experimentos.css" type="text/css" media="all">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div id="global">
    <div id=cabecera>Prueba</div>
    <div id="navegacion">
    <ul>
  • Quienes somos
  • Que hacemos
  • Por qué lo hacemos
  • información
  • Contacto

    </div>
    <div id="contenido">
    <div id="oso">[contenido no disponible]</div>
    <h1>Quienes somos</h1>


    texto.</p>
    </div>
    <div id="pie">Este es el pie de pagina</div>
    </div>
    </body>
    </html>

    ESTILOS-EXPERIMENTOS.CSS

    *{text-indent:0px;margin:0px;padding:0px;border:0px}
    p {text-align: justify}
    h1 {font-size: 1.8em ; color:#372412 ; font-weight: bold ; text-decoration: none ; text-align: left ; padding: 0px 0px 0px 147px ; background-color: red}
    img{border-style:none}
    body {text-align:center}
    #global {width:800px;margin:4px auto }
    #cabecera {background-color: #008000; height:30px ; color:#FFEA6F ; font-size:1.8em }
    #navegacion {background-color: #372412 ; height:50px}
    #navegacion li {float:left ; list-style:none ; margin: 10px 10px 0px 10px }
    #navegacion ul { margin-left: 50px }
    #contenido {background-color: #FFEA6F;width:auto;}
    #oso {height:181px;background-color:#00FFFF;padding-top:5px;padding-bottom:5px;}
    #contenido p {padding: 5px 10px 5px 10px ; font-size:1em ; color:#371412 }
    #pie {background-color: #372412 ; height:30px ; font-size:0.75em; color:#FFEA6F}
    a {color: #FFEA6F ; font-size:1.3em ; text-decoration: none ; display: block }

    a:link {}
    a:visited {}
    a:hover {color:#372412 ; background: #FFEA6F }
    a:active {}


    Los colores cámbielos usted a su gusto, ya que como lo hizo usted anteriormente, así lo he puesto yo para poder diferenciar las capas
    Saludos
    • Agradecido de los que aprenden enseñando
    genis2008 · · Solicitar retirada
    Hola, he estado fuera por cuestiones de trabajo y dejé la página un poco abandonada. Sigo con el mismo problema pero gracias por la ayuda. De todos modos creo q este no era el lugar para exponer mi duda, creo que debería haber sido en paso a paso, no es así?.