3

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;
}
9
  • 1
    Yo veo que sí le puedes dar estilos. He copiado tu código y lo he modificado un poquito, mira este enlace. Un header por lo general no debe tener un alto definido tan alto, es mejor que el tamaño del header se adapte a su contenido. Para eso puedes jugar con padding.
    – gugadev
    Commented el 30 sept. 2016 a las 23:41
  • sisi, ya se que no queda lindo tan alto jaja, era a modo de prueba. Pero no entiendo por que se hace scroll :/ Me gusta lo del padding, me habia olvidado de eso jaja. Muchas gracias! Quedó muy bonita, sos un idolo :) Commented el 1 oct. 2016 a las 1:13
  • hace scroll porque hay un desbordamiento; es decir, el contenido sobrepasa los 550px que le diste al iframe. Si no quieres scroll, tan solo debes añadir body { overflow: hidden; } pero en los estilos del header (header.css).
    – gugadev
    Commented el 1 oct. 2016 a las 1:17
  • Si es lo que deseas, comentas para pasarla como respuesta ;)
    – gugadev
    Commented el 1 oct. 2016 a las 1:18
  • Si men. Excelente, muchas gracias por la ayuda. una ultima consulta, mira: plnkr.co/edit/aZaTtvBIfBnqnlucDFIP?p=preview Me queda un espacio en blanco antes de la imagen, esto es por que el object no agarra heigth auto. Alguna forma de arreglarlo? Commented el 1 oct. 2016 a las 2:37

1 respuesta 1

2

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.