Error de capas en firefox

SloganSmith · #1 (**permalink**) 02/08/2008, 04:20

Hola!! Soy nuevo aquí saludos.

Jamati · #2 (**permalink**) 02/08/2008, 09:59

Hola, la verdad qeu el código esta muy abultado y sobrecargado con cosas que podrías hacer desde el CSS.

Acá te mando un retoque que hice:

Código HTML:

<html>
<head>
<title>OSIRIS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<style type="text/css">
body {background-image:url(objetos/calavera.jpg) center center no-repeat;height:100%;margin:0;text-align:center;}
#global {width:800px;margin:4px auto;text-align:left;}
#cabecera {background-image:url(objetos/camerino.jpg);height:209px;border:1px solid black;border-top:0;position:relative;}
#navegacion {background-image:url(objetos/navegacion.jpg);border:0;height:50px;position:absolute;top:150px;left:0;}
#navegacion ul li {display:inline;margin-left:25px;}
#navegacion ul li a {font:bold 26px "Evanescent"}


h1 {font-size: 1.2em; color:White ; font-weight: bold ; text-decoration: underline ; text-align: center ; margin-bottom: 20px ; margin-top: 10px}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center ; margin-bottom: 10px}
h5 {font.size: 0.8em; color:#FFB90F ; font-weight: bold ; text-decoration: none ; text-align: left ; margin-bottom: -10px}
#contenido {background-color: black ; width: auto ; border-left: black 1px solid ; border-right: black 1px solid}
#menu {background-color: yellow; width: 150px ; float:left ; text-align:left ; margin:10 ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:10px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:12px }
a {color: white ; text-decoration:none ; display: block}
a:hover {color:silver }
p {text-align: }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow: hidden }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow: hidden }
#navegacion li {float: left ; list-style:none ; margin: 2x 5px 0px 20px }
#navegacion ul { margin-left: 30px }
#bio-dani {width: 150px ; float:right}
#bio-dani2 {width: 150px ; float:left ; margin-top: 30px ; margin-bottom: 20px ; margin-right: 20px}
#bio-dani3 {width: auto ; text-align: left ; margin-top: 40px}
#bio-carri {width: auto ; text-align: left}
#bio-adri {width: auto ; text-align: left ; margin-top: 30px}
#bio-edu {width: auto ; text-align: left ; margin-top: 70px}
</style>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>

<body onload="init();">
<font color="white">
<div id="global">
  <div id="cabecera">
    <div id="navegacion">
      <ul>
        <li><a href="principal.html">home</a></li>
        <li><a href="noticias.html">noticias</a></li>
        <li><a id="desplegable1" href="bio-componentes.html">bio</a></li>
        <li><a href="conciertos.html">conciertos</a></li>
        <li><a id="desplegable2" href="media.html">multimedia</a></li>
        <li><a href="contacto.html">contacto</a></li>
      </ul>
    </div>
    <div id="contenido"></div>
  </div>



<h1>Noticias</h1>
<br></br>
<h5>1-VIII-2008</h5>
<div align="left"><img src="objetos/raya.gif" width="800" height="5" />
<div><p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Qué tal? Informamos muy contentos que estamos dando los últimos retoques a un tema de nuestra primera maqueta. Pronto estará terminado, y podremos grabarlo. Os informaremos de todo. Saludos!</p></div>
<div align="left"><img src="objetos/raya.gif" width="800" height="5" />
<br></br>
<h5>1-VIII-2008</h5>
<div align="left"><img src="objetos/raya.gif" width="800" height="5" />
<div><p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hola! Bienvenidos a nuestro espacio web. Ya estamos funcionando, y queremos daros las gracias por visitarnos! Esperamos ponernos en marcha lo más pronto posible e ir actualizando la página. Saludos!</p></div>
<div align="left"><img src="objetos/raya.gif" width="800" height="5" />
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</font>
</body>
</html>

Está modificada solamente el div.cabecera, como podrás observar, se achicó muchísimo el codigo en comparación al que pasaste vos y ahora sí funcion atanto en FF como para IE.

Luego tratas de seguir con lo de abajo, cualquier cosa vuelve a preguntar.

Saludos

SloganSmith · #3 (**permalink**) 03/08/2008, 03:24

Ey, gracias por ayudarme! Lo que es la barra de navegacion si esta ahora toda horizontal tanto en firefox como en IE, bastante mejor. Pero lo que es el color de los h1 en firefox no los respeta y los pone blancos, mientras que en IE salen como deben, amarillos. Alguna idea?
Y ntonces lo que me recomientas es que ponga lo que tengo en la hoja de estilos dentro del archivo HTML?

Mikmoro · #4 (**permalink**) 03/08/2008, 04:48

Esta etiqueta debajo de body impide que el color salga como debe:

<font color="white">

Elimínala.

Jamati · #5 (**permalink**) 03/08/2008, 13:08

Lo que te recomiendo es que siempre la hoja de estilos la pongas en un archivo separado, para que el día de mañana sea más facil cambiar el aspecto de tu sitio.

Todo el CSS que tengas en tu HTML lo grabas en un archivo con extension .css y ese archivo lo colocas en tu sitio.

Luego, en todas las páginas, entre el HEAD escribes la siguiente linea:

Cita:

obviamente modificando la ruta para que sea valido.

SloganSmith · #6 (**permalink**) 03/08/2008, 13:14

Mikmoro, cambie font color y ya los colores salen bien!! gracias

Y es que jamati, yo hago eso, pongo un archivo css, pero luego en el firefox lo lee de un modo distinto al IE. Tengo problemas con las capas. Le pongo las caracteristicas k kiero, y el IE lo lee bien, pero firefox descentra las capas, y no las pone bien, nose si hago algo mal, o es que el firefox tiene problemas con las capas, y nunca saldra en el IE igual que en el firefox

SloganSmith · #7 (**permalink**) 03/08/2008, 13:31

Mira, os dejo el codigo HTML y el CSS asociado haber si podeis ayudarme, porque me esta volviendo loco. En internet se ve exactamente

SloganSmith · #8 (**permalink**) 03/08/2008, 13:32

Y aquí está el CSS, lo pongo en otro mensaje porque no me cabía. Perdonad por la longitud de todo esto....

Mikmoro · #9 (**permalink**) 03/08/2008, 16:36

Lo primero de todo, y antes de mirar otra cosa, creo que tienes un poco de lio con un par de cosas:

No uses <p class="h1">Daniel Márquez</p>, sino directamente el h1

<h1>Daniel Márquez</h1>, si no, el selector h1 de tu css no hará nada. Lo mismo con <p class="h2">Datos personales</p>

Elimina todos lo formatos que tienes en el html como:

<p align="left"><font color: color="#4682B4">

y en su lugar, cambia el selector CSS p {text-align} (que por cierto, no hace nada), por:

p {text-align: left; color: #4682B4}, y será aplicado a todos tus párrafos.

No uses tres selectores para body:

Cita:

body {background-color: #000000}
body {text-align: center}
body {background-image: url(objetos/calavera.jpg) ; background-attachment: fixed ; background-position: center center ; background-repeat: no-repeat ; height:100%; }

usa uno sólo como:

Cita:

body {text-align: center; background-image: url(objetos/calavera.jpg) no-repeat fixed center middle; height: 100%;}

Y sobre todo, busca un buen manual de CSS porque tienes unas cuantas cosas más como estas. Conseguir con Dreamweaber que un html funcione para Explore no tiene mucha utilidad, y sobre todo no se aprende mucho de html y css. Busca un manual y empieza a entender todo lo que haces y por qué. Es mejor para ti.

SloganSmith · #10 (**permalink**) 04/08/2008, 04:16

Ok gracias, lo hare. Y respecto a los h1... es que yo ponia <h1> y tal, los definia en el estilo css y en el IE perfecto, pero el firefox no les hace caso. Cuando visualizo la pagina en mi ordenador con firefox si salen los h1 h2 h3... tal como les puse en el estilo.css, pero cuando cuelgo la pagina en internet, en IE si se siguen viendo, pero con firefox los h1 h2... se ponen por defecto, igual que los margenes y algunas cosas mas, y ni idea de por qué...

Mikmoro · #11 (**permalink**) 04/08/2008, 04:45

Pues como te decía, porque hay muchos errores en el código. Límpialo todo bien y si sigue habiendo errores pones un enlace para que te echemos una mano.

Jamati · #12 (**permalink**) 05/08/2008, 06:32

trata de resumirlo y no poner todo el código.