insert menu with html5 - I can not style iframe

Navigation
3

I have a query. I am a disaster in web design, and I have to make a web for a work of the uni, so here my query: /

I am trying to make a menu that is inserted in all the pages. Since the frames are deprecated in html5 (at least that's what I read), I try to use iframe.

The problem is that I apply styles to the iframe and these do not apply. I try to resize it, make it not scroll, etc ... Nothing works.

In itself, what you would need is to insert the menu cleanly, with a width of 100%, and a min-heigth of 15 - 20%. I'm using iframe, but if you know any better alternative with html5, welcome.

Here is a screenshot of how the site looks:

I hope you can help me. Thank you very much!

At the moment I have this code:

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;
}
    
asked by Facundo Curti 01.10.2016 в 01:10
source

1 answer

2
  

Note: You should not use iframes/objects to include templates. Use a templating library like Handlebars , Pug , Nunjucks or Marko .

  

I apply styles to the iframe and these do not apply. I try to resize it, do not scroll, etc.

It is because the dedicated styles should be indicated explicitly in the iframe/object , otherwise, they will not be taken into account:

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;
}

Notice that at body we have given overflow: hidden . This will not show the scroll.

Then you add the header in a 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>
  

look: Demo I have a blank space before the image, this is because the object does not grab heigth auto

No, you can not give height auto to iframe/object . The default measures of a iframe/object are 300px x 150px . That's why you have that image as gap .

What you should do is create a small function that executes when you load the iframe/object so that it adapts the height according to the content: 

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

The links do not work. I mean, he does not send me to google or anywhere.

By default, the elements in an iframe act in the same document , this includes the anchor . The solution is to add the <base /> tag telling you to open the links in the parent by target="parent" . If you want to open them in another tab, you change parent to _blank . Your header.html would look like this: 

<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>

In the end, your website would be in this way .

    
answered by 01.10.2016 / 14:44
source
Android studio object visibility Customize the arrival of mail with CSS through PHPMailer