La capa se baja con

stardust · #1 (**permalink**) 29/11/2007, 16:24

Hola:

Vuelvo de nuevo a preguntar por qué se me baja la capa en Firefox con el siguiente código:

Código PHP:

  <?xml version="1.0" encoding="utf-8"?>

<!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" xml:lang="es" lang="es">

<head>

<title>Capas</title>

<LINK REL="stylesheet" TYPE="text/css" HREF="lib/estilos.css">

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="todo">

  <div id="cabecera">Cabecera</div>

  <div id="menu">

    <p><?php include ('menu.php'); ?></p>

  </div>

  <div id="derecha">

    <div id="menu_opciones">

      <p>Submenú</p>

    </div>

    <div id="principal">  

    </div>

  </div>

</div>

</body>

</html>

Y este el CSS:

Código PHP:

  #todo{

        margin-left: auto;

        margin-right: auto;

        margin-top: 10px;

        margin-bottom: 0px;

        width:900px;

    height:900px; 

    border-style: solid;

    border-width: 1px;

    }

 
    

#cabecera{

    width:898px;

    height:100px; 

    border-style: solid;

    border-width: 1px;

    }

    

#menu{

    width:140px;

    height:452px; 

    margin-left: 5px; 

    margin-top: 2px;

    border-style: solid;

    border-width: 1px;

    }

 
#derecha{

    position:absolute;

    top:115px;

    float:left;

    margin-left:155px;     

    width:740px;

    border-style: solid;

    border-width: 1px;

    }

    

#menu_opciones{

    width:100%;

    height:30px !important; 

    background-color:red;

    }

    

#principal{

    width:100%; 

    background-color:green;

        height:452px; 

    }

El de la capa id=menu_opciones me inserta un "enter" en Firefox que me baja la capa.

¿Alguien sabe por qué?

No pensé que el CSS fuera tan complicado...

DragonX · #2 (**permalink**) 29/11/2007, 16:37

No es problema del CSS el tag  equivale a parrafo, por ende "hace ese enter".

Proba con esto:

Código HTML:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="es" lang="es">
<head>
<title>Capas</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="lib/estilos.css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="todo">
  <div id="cabecera">Cabecera</div>
  <div id="menu">
    <p><?php include ('menu.php'); ?></p>
  </div>
  <div id="derecha">
    <div id="menu_opciones">
      <span>Submenú</span>
    </div>
    <div id="principal">  
    </div>
  </div>
</div>
</body>
</html>

y esto otro:

Código HTML:

#menu_opciones{
    width:100%;
    /*height:30px !important; */
    background-color:red;
    }

stardust · #3 (**permalink**) 29/11/2007, 16:40

Gracias!
Mientras esperaba la respuesta he estado ojeando el código de unas cuantas webs bien diseñadas y me ha extrañado que apenas salía el tag .

Ahora mismo lo pruebo

caricatos · #4 (**permalink**) 29/11/2007, 16:46

Cita:

Iniciado por DragonX

No es problema del CSS el tag  equivale a parrafo, por ende "hace ese enter".

...

La verdad es que los párrafos en "anglosajón" dejan una separación que en español no debería existir.

Mi forma de definir párrafos, porque prefiero que mis páginas se lean en el mejor español, es:
p {
margin: 0;
text-indent: 1cm;
}

Con el text-indent se sangra la primera línea.

Saludos

La capa se baja con <p>