Hellfire-gamer
Legacy Member
Hallo,
Ik zit in mijn laatste jaar secundair en voor mijn eindwerk moet ik een website maken.
Ik heb nu echter problemen bij Internet Explorer. In Google Chrome en in Firefox kan ik mijn background, header en menu bar zien, maar in Internet Explorer zie ik enkel de background.
Iemand weet een oplossing? Ik beschik namelijk nog maar over de basiskennis voor html en css.
Mijn code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body
{
margin: 0 auto;
padding: 0;
color: #12161B;
background-color: #E9E8E7;
background-image: url('images/design/background.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
}
#page
{
top: 20px;
margin-bottom: 20px;
cursor:auto;
width: 900px;
}
.header
{
position: absolute;
top: 20px;
left:10.5%;
width: 1024px;
height: 180px;
background-image: url('images/design/header.png');
background-repeat: no-repeat;
background-position: center center;
}
/*begin menu*/
#menu
/*end menu*/
</style>
<title>geen </title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="whole-page">
<div id="page">
<div class="header">
</div>
<div class="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
M.v.g.
Ik zit in mijn laatste jaar secundair en voor mijn eindwerk moet ik een website maken.
Ik heb nu echter problemen bij Internet Explorer. In Google Chrome en in Firefox kan ik mijn background, header en menu bar zien, maar in Internet Explorer zie ik enkel de background.
Iemand weet een oplossing? Ik beschik namelijk nog maar over de basiskennis voor html en css.
Mijn code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body
{
margin: 0 auto;
padding: 0;
color: #12161B;
background-color: #E9E8E7;
background-image: url('images/design/background.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
}
#page
{
top: 20px;
margin-bottom: 20px;
cursor:auto;
width: 900px;
}
.header
{
position: absolute;
top: 20px;
left:10.5%;
width: 1024px;
height: 180px;
background-image: url('images/design/header.png');
background-repeat: no-repeat;
background-position: center center;
}
/*begin menu*/
#menu
/*end menu*/
</style>
<title>geen </title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="whole-page">
<div id="page">
<div class="header">
</div>
<div class="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
M.v.g.

