computercrash
Gebruiker
- Lid geworden
- 10 jun 2007
- Berichten
- 57
ik wil een achtergrond op me pagina maar als ik een achtergrond er in zet dan schijnt hij door, en dan word de container doorzichtig en dan zie je de achtergrond er door heen(srry kan niet beter uitleggen)
plaatje: http://img132.imageshack.us/img132/3919/siteeu7.gif
script:
plaatje: http://img132.imageshack.us/img132/3919/siteeu7.gif
script:
HTML:
<!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" />
<link rel="stylesheet" href="layout.css" type="text/css" />
<style type="text/css">
.style1 {
font-size: large;
}
</style>
</head>
<body style="background-image: url('background.jpg')">
<div id="container">
<div id="header"><img src="2G4life.jpg" width="748" height="100" /></div>
<div id="titel">Home</div>
<div id="content"><div id="foto"></div><p>Dolor sit amet consectetuer adipiscing elit.
Quisque suscipit congue leo. Morbi eget quam. Maecenas vehicula leo a nisl.
Curabitur nec felis. Suspendisse id lectus. Morbi ultrices porta nibh.
Sed quis nunc eget urna ultrices tincidunt. Vivamus laoreet, mauris fermentum
viverra pellentesque, magna nulla nonummy lorem, ut volutpat sem nisl eu lorem.
Mauris tristique ipsum sed nisl. Vestibulum consectetuer fermentum arcu.
Aliquam erat volutpat. Nam vel justo. Suspendisse a quam id dolor fringilla malesuada.
Duis non urna. Nunc nec metus. Quisque porta pharetra est. Phasellus ac enim.
Proin eleifend condimentum tellus.</p>
<p>
Nam luctus magna vitae turpis. Proin feugiat, arcu at lobortis fermentum,
enim lectus rhoncus est, sed feugiat libero libero eleifend eros. Fusce nisl pede,
vestibulum eget, vestibulum quis, rhoncus eu, leo. Nullam at metus non est condimentum
porta. In hac habitasse platea dictumst. Praesent ornare dui nec sapien.
Nam faucibus. Fusce vel erat. Donec at ligula eu diam tincidunt bibendum.
Aenean laoreet, diam vitae elementum ullamcorper, quam purus ornare libero,
faucibus scelerisque ligula justo ac justo. Integer blandit. Nam euismod elementum
ipsum. Donec eget nulla sit amet mi venenatis mollis. Mauris enim arcu, molestie quis,
congue ac, faucibus eu, elit. Sed fringilla nisl et libero. Duis iaculis lectus a dolor.
</p>
<p>
Sed tristique sapien quis metus. Nam vehicula arcu ac augue. Aliquam aliquam dui.
Donec volutpat laoreet purus. Nunc vitae nisi. Nulla dictum leo id nulla.
Fusce bibendum turpis eu quam. Etiam ornare tellus id quam. Vestibulum iaculis,
metus ac laoreet tincidunt, libero mauris bibendum nibh, a eleifend leo nisi vitae libero.
Suspendisse nec est. Sed nunc nibh, vehicula eget, interdum non, placerat a, enim.
</p>
<p>
Curabitur ultrices, eros nec suscipit aliquet, sem velit vulputate turpis,
ac pharetra nisi est in ligula. Duis dapibus. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus enim mauris,
tincidunt tincidunt, cursus eget, scelerisque sit amet, eros. Sed rutrum.
Nulla posuere nisi eget est. Sed nunc eros, aliquet vel, ultrices sit amet,
gravida vel, dui. Praesent ultrices tristique arcu. Quisque tempor.
Sed tincidunt pretium turpis. Aliquam nec augue.
</p> </div>
<div id="menu" class="style1"><ul>
<li><a href="index.htm">Home</a></li>
<li><a href="Untitled_1.htm">School</a></li>
<li><a href="/">Games</a></li>
<li><a href="/">Forum</a></li>
<li><a href="/">Chatbox</a></li>
<li><a href="/">Contact</a></li>
</ul></div>
<div id="footer"> Deze site is gemaakt door:<span class="style2"> Dennis Kok
</span>en voor het laatst Bijgewerkt op: <span class="style2">18 december 2007</span></div></div>
</body>
</html>
HTML:
#container{
margin: 0px auto;
width: 800px;
border: 10px outset #808080;
background-image: url('metaal.png');
background-repeat: repeat-xy
}
#header{
width: 750px;
border: 1px solid #000;
margin-right: 25px;
margin-left: 25px;
margin-top: 25px;
}
#menu {
border: 10px outset #CCCCCC;
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
width: 200px;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
margin-top: 25px;
margin-left: 25px;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
border-width: 1px;
margin: 0;
background-color: #CC0000;
border-top-style: solid;
}
#menu ul li a {
display: block;
padding: 2px 2px 2px 4px;
background-color: #FF0000;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #menu ul li a {
width: auto;
}
#menu ul li a:hover {
border-width: 5px;
border-style: inset;
background-color: #CC0000;
color: #fff;
}
#footer{
border-width: 5px;
border-color: #CCCCCC;
width: 800px;
clear: both;
border-top-style: groove;
padding-top: 10px;
padding-bottom: 10px;
font-family: "Comic Sans MS";
color: #FF0000;
text-align: center;
}
#content {
width: 500px;
height: 500px;
float: right;
font-family: "Comic Sans MS";
font-size: larger;
color: #FF0000;
height: 85%;
padding: 20px;
}
#foto {
border-width: 2px;
border-style: dotted;
width: 150px;
height: 150px;
float: left;
margin-bottom: 10px;
margin-right: 10px;
background-image: url('geen foto.jpg');
}
{}
#titel {
font-family: "comic Sans MS";
font-size: xx-large;
border-top-style: groove;
border-width: 5px;
border-bottom-style: groove;
font-weight: bold;
color: #FF0000;
border-color: #CCCCCC;
width: 800px;
text-align: center;
margin-top: 25px;
margin-bottom: 25px;
}
