Entrar

Se ve distinto en IE y FIREFOX

TuSuegra · · Solicitar retirada
Ya ha habido temas parecidos hoy, pero a mi tambien me ha pasado hoy, y no paro de darle vueltas y no se como arreglarlo.

IE: en el menu, en vez de verse el titulo (con la barra superior de fondo) y el resto del menu(con la barra inferor) debajo, se ve una al lado de la otra, desconfigurandome el resto de la pagina
FIREFOX: no me deja modificar el titulo del menu ni color ni nada...

Os agradeceria que me ayudarais, estoy desesperado :(
Os dejo los codigos y CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="reset.css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mi pagina</title>
<link href="Mi web/estilos.css" rel="stylesheet" type="text/css" />

</head>


<body>
<div id="globalfondo">
<div id="global">

<div id="cabecera">

<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</div>

<div id="publicidad">.</div>
</div>

<div id="navegacion"> Bienvenidos a mi Web
</div>


<div id="contenidoglobal">

<div id="menu">
<ul><h1>TITULO MENU</h1>
  • Enlace 1
  • Enlace 1
  • Enlace 1
  • Enlace 4
    </div>



    <div id="contenido">
    <h1>Esta será la zona principal de la web.</h1>

    Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a reparar esos margenes. Como los textos que vemos sin margen pertenecen a la capa de fondo naranja (orange) y en la Hoja de Estilos solo pone "orange" en la capa "#contenido", ya sabemos a qué capa incluirle la propiedad padding (el padding es parecido al margin, ya veremos la diferencia), verdad? Por eso le pusimos esos colores tan feos, para encontrar cada capa rápidamente, je je je. Pero solo queremos por ahora poner margen a sus párrafos, es decir, queremos margenes para los párrafos de dentro de la capa #contenido, así que, si recuerdas bien lo que hicimos la otra vez, esto se pone así</p>


    Resumiendo, escribimos primero la capa y luego el elemento de dentro de esa capa al que queremos definir cosas y luego,</p> <h2> para terminar </h2>

    entre paréntesis, las propiedades. Le hemos puesto 10px en los dos lados y solo 5 por arriba y abajo, para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si fuera necesario.</p>
    </div>

    <div id="barra"><ul><h1>TITULO BARRA</h1>
  • Enlace 1
  • Enlace 1
  • Enlace 1
  • Enlace 4</div>
    </div></div>



    </div>

    </body>
    </html>



    *{margin:0px ; padding:0px ; border: 0px}
    p {text-align: justify}

    body {
    text-align: center;
    background-color: #d3edf4;
    width: 100%;
    height: 100%; }

    #global {width:1024px ; margin: 4px auto; }

    #cabecera {background-color: white ; background-image:url(objetos/fondomenu.gif);
    height:120px}
    #logotipo {
    heigh
    width:auto;
    float:left;
    margin: 10px 2px 10px 50px
    }
    #publicidad {background-color: #0e76a9; width:518px ; float:right ; margin: 50px}
    #navegacion {
    background-image:url(objetos/fondonavegacion.gif);
    height: 20px;
    width: 1024;
    margin: 20px 2px 20px 2px;
    text-align: center;}
    #contenido {
    background-color: white;
    float:left;
    width:700px;
    margin: 10px 0px 0px 0px;
    border-left: black 1px solid;
    border-right: black 1px solid;
    clear:none}
    #menu {
    background-color: yellow;
    width: 150px;
    float:left;
    text-align:left;
    margin:10px 3px 3px 3px;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom;
    padding-bottom:5px;
    overflow: hidden
    }
    #menu h1 { color:red;
    text-decoration:none;
    font-size:12px;
    background-image: url(objetos/menu-partesuperior.gif);
    padding-top:12px; clean: none}
    #menu li { list-style:none ; margin: 4px 6px 4px 6px ; }
    #contenidoglobal {width:1024px; heigh: 1024px}



    #barra {background-color: yellow;
    width: 150px;
    float:left;
    text-align:left;
    margin:10px 3px 3px 3px;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom;
    padding-bottom:5px }
    #barra h1 {text-decoration:none;
    font-size:12px;
    background-image: url(objetos/menu-partesuperior.gif);
    padding-top:12px; clean: none}
    #barra li { list-style:none ; margin: 4px 6px 4px 6px ; background-image: url(../../Escritorio/Dise%C3%B1o%20web/Botones/botonazul3.gif}




    Gracias
    • TuSuegra · · Solicitar retirada
    No, aun no la tengo subida a internet. te pongo una imagen de lo que pasa en IE:
    http://img21.imageshack.us/i/30673092.png/

    En firefox los menus de la izkierda y de la derecha se ven bien, pero no me deja modificar el titulo del menu de la izquierda, no se porque.

    Que puede ser? Gracias por la ayuda! :)
    Foley · · Solicitar retirada
    El título lo cambias aquí:

    <div id="menu">
    <ul><h1>TITULO MENU</h1>
  • Enlace 1
  • Enlace 1
  • Enlace 1
  • Enlace 4
    </div>

    Cambias titulo menu por lo que tu quieras. No sé pero me dá que no es eso lo que querías :lol:, si no es eso me avisas ok?

    En la imagen señalas el menú de abajo para que vaya a la derecha, no? Para eso tendrías que, o aumentar el ancho de la capa general (la que contiene a todas) para así hacerle sitio o bajarle la anchura alguna capa para hacerle así sitio también.

    Saludos ;)
    • TuSuegra · · Solicitar retirada
    gracias por la respuesta, pero no es exactamente lo que preguntaba.
    En cuanto lo del titulo del menu, a vista de firefox, lo que no me deja es modificar su color, tamaño de letra, etc (desde el css) mientras que al contenido central y al menu de la derecha si.

    en cuanto lo de ponerlo a la derecha, se como se hace, y en firefox me aparece bien. El problema es que en IE el titulo del menu de la izquierda, y los enlaces de abajo, aparecen separados, los ves? por eso se me monta el otro menu debajo.