I have a question. I'm a disaster in web design, and I have to make a website for a job at uni, so here's my query :/
I am trying to make a menu that is inserted on all pages. Since 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 they don't apply. I try to resize it, make it not scroll, etc... Nothing works.
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;
}
This is because the dedicated styles must be explicitly indicated in the
iframe/object
, otherwise they will not be taken into account:header.html
header.css
Notice that
body
we have givenoverflow: hidden
. This will make the scroll not show.Then you add the header in a
object/iframe
:index.html
No, you can't give
height
a car to aiframe/object
. The default measurements of aiframe/object
are 300px x 150px . That's why you are left with that image as a gap .What you have to do is create a small function that is executed when it loads
iframe/object
so that it adapts the height based on the content:By default, elements in an iframe act on their own document , this includes
anchor
. The solution is to add the tag<base />
telling it to open the links in the parent usingtarget="parent"
. If you want to open them in another tab, change parent to _blank . Youheader.html
would be like this:In the end, your website would be like this .