Beste CP'ers,
Ik zit met een klein probleempje. Ik heb een kleine HTML website opgezet, maar ik krijg nu de volgorde van de content maar niet goed. Wat ik bedoel is het volgende.
Ik wil dus dat het "Screenshots" gedeelte rechts van de trailer en de andere tekst komt, en dus de lege ruimte opvullen. Mijn HTML ziet er als volgt uit:
PHP
<!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" />
<title>BlackOps2Bestellen.nl - Call of Duty Black Ops 2 bestellen en pre-orderen tegen de laagste prijs!</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
</script>
</head>
<div id="header">
</div><p>
<!-- main -->
<div id="main">
<div id="text">
<h1>OVER CALL OF DUTY BLACK OPS 2</h1><p>
Door de grenzen te verleggen zoals fans dat gewend zijn van de entertainment franchise die record na record<br>
deed sneuvelen, brengt Call of Duty : Black Ops II gamers naar de nabije toekomst; een Koude Oorlog gesitueerd<br>
in de 21e eeuw, waar technologie en wapens gezamenlijk een nieuwe generatie van oorlogsvoering inluiden.<p>
<h1>CALL OF DUTY BLACK OPS 2 REVEAL TRAILER</h1><p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/x3tedlWs1XY" frameborder="0" allowfullscreen></iframe>
<h1>BLACK OPS 2 SCREENSHOTS</h1><p>
<div id="image"><img src="images/1.png" border="0"/></div>
<a href="#" rel="images/1.png" class="image"><img src="images/t1.png" class="thumb" border="0"/></a>
<a href="#" rel="images/2.png" class="image"><img src="images/t2.png" class="thumb" border="0"/></a>
<a href="#" rel="images/3.png" class="image"><img src="images/t3.png" class="thumb" border="0"/></a>
</div>
<!-- end main -->
<!-- footer -->
<div id="footer">
<div id="footer_left">© Copyright 2012 Black Ops 2 Bestellen.nl</div>
</div>
<!-- end footer -->
</div>
</body>
</html>CSS
PHP
body {padding:50px 100px; margin:0; font-family:Calibri; background-image:url(images/blackops2background.jpg);}
#container {background-color:#FFFFFF; padding:10px;}
#header {height:150px; width:500; background-image:url(images/blackops2logo.png);background-repeat:no-repeat;}
#slogan {float:right; font-size:22px; color:#FFD800; padding:60px 30px 0 0;}
#menu {height:40px; background-image:url(images/menu_bg.png); margin-top:5px;}
#menu ul {margin:0; padding:0;}
#menu li {list-style:none; float:left; background:url(images/menu_border.png) right no-repeat;}
#menu a {text-decoration:nunderline; float:left; height:20px; padding:10px 30px; color:#FFFFFF; font-size:15px; font-weight:bold; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
#menu a:hover {font-weight:bold; text-decoration:none; font-size:18px; color:#000000;font-weight:bold; background:url(images/menu_hover.png);}
#main {float:left; width:100%; margin:5px 0; background:url(images/main_bg.png) right repeat-y; color:#111111; font-size:13px;}
#main a {text-decoration:nunderline; color:#333333;}
#main a:hover {font-weight:bold; text-decoration:none; font-size:13px; color:#0094FF;}
#main br {line-height:8px;}
#text {line-height:14px; margin-right:225px; padding:10px 30px 30px 30px;}
#text h1 {font-size:26px; font-weight:normal; margin:20px 0 10px 0;}
#text h2 {font-size:23px; font-weight:normal; margin:20px 0 10px 0;}
#text ol, #text ul {padding:0; margin:8px 0;}
#text li {margin-left:40px;}
#footer {height:40px; color:#000000; font-size:15px; background-image:url(images/footer_bg.png); clear:both;}
#footer a {text-decoration:none; color:#FFFFFF;}
#footer a:hover {color:#0094FF;}
#footer_left {float:left; padding:13px 0 0 30px;}
#footer_right {float:right; padding:13px 30px 0 0;}
#image {border:4px #666 solid; height:480px; width:640px;}
.thumb {float:left; margin-right:10px; margin-top:10px;}
