insertar menu con html5 – No puedo dar estilo a iframe

publicado por: Anonymous

Tengo una consulta. Soy un desastre en diseño web, y me toca hacer una web para un trabajo de la uni, asique aca mi consulta :/

Estoy tratando de hacer un menú que se inserte en todas las páginas. Como los frames están deprecados en html5 (por lo menos eso leí), intento utilizar iframe.

El problema es que aplico estilos al iframe y estos no se aplican. Intento redimensionarlo, hacer que no haga scroll, etc… Nada funciona.

En si lo que necesitaría es insertar el menú de forma limpia, con un width al 100%, y un min-heigth al 15 – 20%. Estoy utilizando iframe, pero si conocen alguna alternativa mejor con html5, bienvenidos.

Aca una captura de como me queda el sitio:
Pagina fallida

Espero puedan ayudarme. Muchas gracias!

De momento tengo este codigo:

index.html

<html>
<head>
    <title>Grabarino</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>

<body>
        <iframe id="frame" src="header.html"></iframe>


    <div>TODO write content</div>2

</body>

header.html:

<html>
<head>
    <title>Header</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
    <header>
            <p id="titulo">Grabarino.com</p>
            <p id="subtitulo">Tu tecno, Tu casa</p>
    </header>
    <nav>
        <ul class="menu">
            <li><a class="linkMenu" href="www.google.com">Inicio</a></li>
            <li><a class="linkMenu" href="www.google.com">Tienda Online</a></li>
            <li><a class="linkMenu" href="www.google.com">Sucursales</a></li>
       </ul>
    </nav>

</body>

style.css

#titulo{
    color:red;
}

body{
    padding: 0px;
    margin: 0px;
    border:none;
}

#frame{
    width: 100%;
    padding: 0px;
    margin: 0px;
    border:2px;
    height: 550px;
    overflow:hidden;
}

nav{
    width: 100%;
    min-height: 100px;
    border:0px;
    padding: 0px;
    margin: 0px;
    background: #66ccff;
}


.menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li{
    display: inline;
}

.linkMenu{
    color:black;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    padding:15px;
    text-decoration: none;
}

solución

Nota: No debes usar iframes/objects para incluir plantillas. Usa alguna librería para templating como Handlebars, Pug, Nunjucks o Marko.


aplico estilos al iframe y estos no se aplican. Intento redimensionarlo, hacer que no haga scroll, etc

Es por que los estilos dedicados deben ser indicados explíctamente en el iframe/object, de lo contrario, no se tomarán en cuenta:

header.html

<link rel="stylesheet" href="header.css">
    <header>
            <p id="titulo">Grabarino.com</p>
            <p id="subtitulo">Tu tecno, Tu casa</p>
        <nav>
          <ul class="menu">
              <li><a class="linkMenu" href="//thehackernews.com">Inicio</a></li>
              <li><a class="linkMenu" href="//muylinux.com">Tienda Online</a></li>
              <li><a class="linkMenu" href="//scotch.io">Sucursales</a></li>
         </ul>
       </nav>
    </header>

header.css

*,
*:before,
*:after {
  box-sizing: border-box;
  font-family: 'segoe ui';
  margin: 0;
  padding: 0;
}
header {
  background-color: rgba(0,0,0,.9);
}
header > p {
  color: #fff;
  display: inline-block;
  padding: .6rem .5rem ;
}
nav{
    border:0px;
    padding: 0px;
    margin: 0px;
    background: #66ccff;
    padding: 1rem .6rem;
}

.menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.menu li{
    display: inline-block;
    padding: .5rem;
}

.linkMenu{
  border-radius: 25px;
    color:black;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    padding:15px;
    text-decoration: none;
}
.linkMenu:hover {
  background-color: #f2f2f2;
}

Fíjate que al body le hemos dado overflow: hidden. Esto hará que no se muestre el scroll.


Luego agregas el header en un object/iframe:

index.html

<html>
<head>
    <title>Grabarino</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
    <object id="frame" data="header.html" 
            onload="resizeObject(this)" 
            onresize="resizeObject(this)">
    </object>

    <h1 id="titulo">Object/IFrame demo</h1>

    <script>
      function resizeObject(object) {
        var header = object.contentDocument.querySelector('header');
        height = header.offsetHeight;
        object.style.height = height + 'px';
      }
    </script>
</body>
</html>

mira: Demo Me queda un espacio en blanco antes de la imagen, esto es por que el object no agarra heigth auto

No, no puedes darle height auto a un iframe/object. Las medidas por defecto de un iframe/object son 300px x 150px. Es por eso que te queda esa imagen como gap.

Lo que debes hacer es crear una pequeña función que se ejecute cuando cargue el iframe/object para que adapte el alto en función del contenido:

function resizeObject(object) {
  var header = object.contentDocument.querySelector('header');
  height = header.offsetHeight;
  object.style.height = height + 'px';
}

Los links no funcionan. Es decir, no me envía ni a google ni a ninguna parte

Por defecto, los elementos en un iframe actúan en su mismo documento, esto incluye los anchor. La solución es agregar la etiqueta <base /> diciéndole que abra los links en el padre mediante target="parent". Si los quieres abrir en otra pestaña cambias parent por _blank. Tu header.html quedaría así:

<link rel="stylesheet" href="header.css">
      <base target="_parent" />
        <header>
                <p id="titulo">Grabarino.com</p>
                <p id="subtitulo">Tu tecno, Tu casa</p>
            <nav>
              <ul class="menu">
                  <li><a class="linkMenu" href="//thehackernews.com">Inicio</a></li>
                  <li><a class="linkMenu" href="//muylinux.com">Tienda Online</a></li>
                  <li><a class="linkMenu" href="//scotch.io">Sucursales</a></li>
             </ul>
           </nav>
        </header>

Al final, tu web quedaría de ésta manera.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *