+ Responder Tema
Resultados 1 al 3 de 3

Tema: sólo se abre con el explorer...

  1. #1
    Me va gustando esto... Habitante KNLO04 Está en el buen camino
    Fecha de Ingreso
    25 may, 10
    Mensajes
    32
    Poder de Reputación
    3

    sólo se abre con el explorer...

    Bueno, estoy muy satisfecha con el resultado la verdad. No me imaginaba que pudiera tenerla en tan poco tiempo gracias a vuestras lecciones!!


    El único problema que me queda es que se abra correctamente en todos los navegadores, sólo se ve bien en el explorer y según Yanet también en el opera. En los demás se desordena todo....

    www.protectoradeayamonte.herobo.com

    que puedo hacer??

    Muchas gracias por la ayuda!!

    PD: os adjunto el index y el css.

    INDEX

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <title>Página principal</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">
    [img]objetos/cabecera.png[/img]
    </div>

    <div id="navegacion">
    <ul>[*]QUIENES SOMOS[*]CÓMO AYUDAR[*]ADOPCIONES[/list] </div>

    <div id="contenido">

    <h1>adoptar un perro o un gato en ayamonte</h1>



    En nuestro refugio puedes encontrar un amigo para toda la vida, están impacientes por demostrar que se merecen una oportunidad... y tú se la puedes dar.</p>


    <div id="bienvenidos">[img]objetos/bienvenidos.png[/img]</div></p>

    <h2>Necesitan un hogar feliz....</h2>
    </div>

    <div id="pie">
    <div id="pieuno"><ul>[*]web amiga[/list]</div>
    <div id="piedos">A.P.A.P.A.</div>
    <div id="pietres"><ul>[*]E-MAIL[/list]</div>
    </div>

    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    ESTILO CSS

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px;font-family:stencil}
    p {text-align: justify;color:black;font-family:britannic bold}
    h1 {font-size: 2em; color:black ; font-family:stencil;text-decoration: underline ;
    text-align: center;padding-top:20px;margin-bottom:20px}
    h2 {font.size: 1.1em; color:black ; font-weight: bold ;font-family:stencil; text-decoration: none ;
    text-align: center;margin-top:20px ;padding-bottom:10px}
    body {text-align: center;background-color:#1C1C1C; background-image: url(objetos/gris.gif) ; background-position: center center ; 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 {float:left;background-color:white ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #navegacion {float:left ;background-color: #66CD00; border: black 1px solid ; height:20px;width:800}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: #EEEED1; border-left: black 1px solid ;
    border-right: black 1px solid;border-bottom: black 1px solid }
    #contenido p {margin: 10px 40px 20px 40px ; text-indent: 15px}
    #menu {width: 150px ; float:left ;
    text-align:left ; margin: 40px 10px 10px 10px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;padding-bottom:10px }
    #menu li {list-style:none ; margin: 4px 8px 10px 20px }
    #menu h1 {text-decoration:none ; font-size:20px ; padding-top:6px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #volver { width: 85px ;height:25 ;background-color: white; float:left ;font-size:1em ;
    text-align:left ; margin: 20px 10px 10px 40px;
    padding: 5px 5px 5px 10px;
    border-left: black 1px solid ; border-right: black 1px solid;
    border-top: black 1px solid;border-bottom:black 1px solid}
    #pie { border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid;
    height: 25px ;background-color:white}
    #pie li {list-style: none; font-size: 12px }
    #pieuno { float:left; width:150px }
    #piedos {float:left; width:498px }
    #pietres { float:left; width:150px}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: black ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:brown ; text-decoration:underline ; background-color: silver}
    a:active {}
    #pie a {color: blue; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}
    #foto1 { float:left; width:260px;margin-top:20px}
    #foto2 {float:left; width:278px;margin-top:20px}
    #foto3 { float:left; width:260px;margin-top:20px}
    #nombre1 { float:left; width:260px;font-family:britannic bold;background-color:white}
    #nombre2 {float:left; width:278px;font-family:britannic bold;background-color:white }
    #nombre3 {float:left; width:260px;font-family:britannic bold;background-color:white}
    #reservado {float:left; width:260px;font-family:stencil;color:red}
    #pagina { width: 170px ;height:25 ;background-color: white; float:center ;font-size:1em ;
    text-align:left ; margin: 20px 10px 10px 40px;
    padding: 5px 5px 5px 10px;
    border-left: black 1px solid ; border-right: black 1px solid;
    border-top: black 1px solid;border-bottom:black 1px solid}
    #pagina1 { width: 170px ;height:25 ;background-color: white; float:left ;font-size:1em ;
    text-align:left ; margin: 20px 10px 10px 200px;
    padding: 5px 5px 5px 10px;
    border-left: black 1px solid ; border-right: black 1px solid;
    border-top: black 1px solid;border-bottom:black 1px solid}
    #pagina2 { width: 170px ;height:25 ;background-color: white; float:left ;font-size:1em ;
    text-align:left ; margin: 20px 10px 10px 50px;
    padding: 5px 5px 5px 10px;
    border-left: black 1px solid ; border-right: black 1px solid;
    border-top: black 1px solid;border-bottom:black 1px solid}

  2. #2
    Esto empieza a ser un vicio... Habitante josesd Está en el buen camino
    Fecha de Ingreso
    27 mar, 10
    Ubicación
    Valencia
    Mensajes
    727
    Poder de Reputación
    7
    que es lo que se desconfigura? yo uso chrome y la veo bien.

  3. #3
    Esto empieza a ser un vicio... Habitante Raulyure Está en el buen camino
    Fecha de Ingreso
    16 feb, 08
    Ubicación
    Estella-Spain
    Mensajes
    2,249
    Poder de Reputación
    18
    Cita Iniciado por KNLO04
    Bueno, estoy muy satisfecha con el resultado la verdad. No me imaginaba que pudiera tenerla en tan poco tiempo gracias a vuestras lecciones!!


    El único problema que me queda es que se abra correctamente en todos los navegadores, sólo se ve bien en el explorer y según Yanet también en el opera. En los demás se desordena todo....

    www.protectoradeayamonte.herobo.com

    que puedo hacer??

    Muchas gracias por la ayuda!!

    PD: os adjunto el index y el css.

    INDEX

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <title>Página principal</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">
    [img]objetos/cabecera.png[/img]
    </div>

    <div id="navegacion">
    <ul>[*]QUIENES SOMOS[*]CÓMO AYUDAR[*]ADOPCIONES[/list] </div>

    <div id="contenido">

    <h1>adoptar un perro o un gato en ayamonte</h1>



    En nuestro refugio puedes encontrar un amigo para toda la vida, están impacientes por demostrar que se merecen una oportunidad... y tú se la puedes dar.</p>


    <div id="bienvenidos">[img]objetos/bienvenidos.png[/img]</div></p>

    <h2>Necesitan un hogar feliz....</h2>
    </div>

    <div id="pie">
    <div id="pieuno"><ul>[*]web amiga[/list]</div>
    <div id="piedos">A.P.A.P.A.</div>
    <div id="pietres"><ul>[*]E-MAIL[/list]</div>
    </div>

    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    ESTILO CSS

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px;font-family:stencil}
    p {text-align: justify;color:black;font-family:britannic bold}
    h1 {font-size: 2em; color:black ; font-family:stencil;text-decoration: underline ;
    text-align: center;padding-top:20px;margin-bottom:20px}
    h2 {font.size: 1.1em; color:black ; font-weight: bold ;font-family:stencil; text-decoration: none ;
    text-align: center;margin-top:20px ;padding-bottom:10px}
    body {text-align: center;background-color:#1C1C1C; background-image: url(objetos/gris.gif) ; background-position: center center ; 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 {float:left;background-color:white ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #navegacion {float:left ;background-color: #66CD00; border: black 1px solid ; height:20px;width:800}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: #EEEED1; border-left: black 1px solid ;
    border-right: black 1px solid;border-bottom: black 1px solid }
    #contenido p {margin: 10px 40px 20px 40px ; text-indent: 15px}
    #menu {width: 150px ; float:left ;
    text-align:left ; margin: 40px 10px 10px 10px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;padding-bottom:10px }
    #menu li {list-style:none ; margin: 4px 8px 10px 20px }
    #menu h1 {text-decoration:none ; font-size:20px ; padding-top:6px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #volver { width: 85px ;height:25 ;background-color: white; float:left ;font-size:1em ;
    text-align:left ; margin: 20px 10px 10px 40px;
    padding: 5px 5px 5px 10px;
    border-left: black 1px solid ; border-right: black 1px solid;
    border-top: black 1px solid;border-bottom:black 1px solid}
    #pie { border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid;
    height: 25px ;background-color:white}
    #pie li {list-style: none; font-size: 12px }
    #pieuno { float:left; width:150px }
    #piedos {float:left; width:498px }
    #pietres { float:left; width:150px}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: black ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:brown ; text-decoration:underline ; background-color: silver}
    a:active {}
    #pie a {color: blue; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}
    #foto1 { float:left; width:260px;margin-top:20px}
    #foto2 {float:left; width:278px;margin-top:20px}
    #foto3 { float:left; width:260px;margin-top:20px}
    #nombre1 { float:left; width:260px;font-family:britannic bold;background-color:white}
    #nombre2 {float:left; width:278px;font-family:britannic bold;background-color:white }
    #nombre3 {float:left; width:260px;font-family:britannic bold;background-color:white}
    #reservado {float:left; width:260px;font-family:stencil;color:red}
    #pagina { width: 170px ;height:25 ;background-color: white; float:center ;font-size:1em ;
    text-align:left ; margin: 20px 10px 10px 40px;
    padding: 5px 5px 5px 10px;
    border-left: black 1px solid ; border-right: black 1px solid;
    border-top: black 1px solid;border-bottom:black 1px solid}
    #pagina1 { width: 170px ;height:25 ;background-color: white; float:left ;font-size:1em ;
    text-align:left ; margin: 20px 10px 10px 200px;
    padding: 5px 5px 5px 10px;
    border-left: black 1px solid ; border-right: black 1px solid;
    border-top: black 1px solid;border-bottom:black 1px solid}
    #pagina2 { width: 170px ;height:25 ;background-color: white; float:left ;font-size:1em ;
    text-align:left ; margin: 20px 10px 10px 50px;
    padding: 5px 5px 5px 10px;
    border-left: black 1px solid ; border-right: black 1px solid;
    border-top: black 1px solid;border-bottom:black 1px solid}
    Hola:
    Bueno, le daré alguna explicación rápida por el momento (ya tengo que salir).
    Digamos que es para que más o menos comprenda como funcionan los navegadores, y poruqé a veces existen algunos problemas.

    Usted abra su navegador Internet Explorer, pulse en la pestaña HERRAMIENTAS, en el deslegable que se abre pulse en OPCIONES DE INTERNET, cuando se abra la carpeta Opciones de internet, seguramente estará ya por defecto activa la ficha GENERAL, (si no lo está pues pulse en ella),.
    Cuando tenga abierta la carpeta de General verá que abajo hay un apartado (donde donde dice Apariencia) aparecen cuatro fichas.
    COLORES - IDIOMAS - FUENTES - ACCESIBILIDAD.

    Pues si usted pulsa en FUENTES, verá que se le abre la carpeta FUENTES, y en ella, remarcada en azul aparece la Fuente por defecto que utiliza el navegador Internet Explorer para mostrar las páginas web.

    Esa fuente suele ser la Times New Roman, y su tamaño por defecto suele ser de 16 píxeles.
    Hasta ahora bien, así que ya puede cerrar todo, incluso el navegador.


    Ahora abra usted el navegador Firefox.
    Vaya a la pestaña HERRAMIENTAS, y en el desplegable pulse en OPCIONES.
    Se le abrirá la carpeta OPCIONES, y en esa carpeta usted pulse en CONTENIDO.

    Allí verá que la fuente por defecto que utiliza el navegador Firefox para mostrar las páginas web es la misma que utiliza el navegador Internet explorer, o sea , la fuente Times New Roman, y su tamaño es de 16 píxeles.

    Bueno, ahora que ya sabe cuál es la fuente por defecto que utilizan los navegadores para mostrar las páginas web, le diré que:

    Si usted a su página web, no le dice en ninguna parte que utilice tal fuente y de tal tamaño, lo que hará el navegador será mostrar esa página web con la fuente por defecto y el tamaño por defecto.

    Ahora, si ponemos en la pagina , allí en la capa navegación unos cuantos enlaces, bastará que la capa navegación tenga una altura (height) de 20 píxeles. ¿Porqué? Porque la fuente Times New Roman (que es la fuente por defecto de los navegadores) no necesita más altura.

    Pero si yo le digo a la página, que voy a utilizar la fuente de la familia britanic bold, seguramente la cosa ya cambia un poco. ¿Porqué?.
    Porque esa fuente, es una fuente gruesa, por tanto ocupa más espacio que la Times New Roman.

    Así que si voy a utilizar enlaces, (sobre todo en la capa navegación) los enlaces se basarán en esa fuente britanic bold, así que creo, y solo creo, que tendría que darle un poco más de altura a esa capa navegación.
    22,24, o 25px. No lo sé, es cosa de probar.

    Fuera de eso, si a la capa global se le dió una anchura (width) de 800 píxeles, no es necesario decirle a la capa navegación que también tenga ella 800 píxeles.

    Ahora si se ve que para que se vea más o menos bien esa capa navegacion, uno considera que debe tener esos 800px de ancho, entonces es porque el problema es de espacio en los enlaces y no en el ancho de la capa navegación.

    Yo se los quitaría

    Ahora usted en la capa #pagina, tiene puesto un float:center,.
    Por lo que yo se, existe el float right y el float left.

    Para esa posición que usted le dió a esa capa no creo sea la center la más adecuada.

    Seguramente habría que utilizar para ella quizás una position absoluta
    especificando a qué distancia del borde superior izquierdo de la capa que la contiene va a posicionarse tanto hacia abajo como a la derecha.

    Por ejemplo, si yo tengo una capa #contenedora que mide de ancho 800px , y dentro de esa capa quiero poner una que se llama #pagina, que mide 250px de ancho por 250px de alto, y la quiero poner en una posición, le diré a esa capa #pagina que esté a :

    #pagina{position:absolute;top:100px;left:100px;bor der:2px solid red;}.
    así me quedará a 100px hacia abajo del borde superior y a 100px hacia la derecha del borde izquierdo de la capa que la contiene, o sea la capa #contenedora.


    Ya le comentarán más cosas, y veré si en alguna ocasión puedo poner sus códigos en el ordenador para ir probando.

    En todo caso yo la veo con Chrome, con Opera, con Inernet explorer 8 y con Firefox , y en todas la capa navegación se pasa unos pocos pixeles hacia la derecha, pero es porque usted le puso 800 de ancho a esa capa,
    En el firefox ya la capa navegacion se ve un poco más mal, ya que se sobre pone hacia arriba y entra en la capa cabecera, (será por la altura de la capa navegación que a lo mejor debe ponerle un poco más, y también ajustar los márgenes entre los enlaces.
    bueno, ya se irá viendo, pero está muy bien y le felicito

    Saludos
    Agradecido de los que aprenden enseñando

+ Responder Tema

Temas Similares

  1. capa fondo no se abre, solo lo hace en IE
    Por ricky en el foro Todo sobre Estilos CSS
    Respuestas: 1
    Último Mensaje: 20/08/2010, 19:24

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes