Website centreren?
Ik ben op dit moment bezig voor mijn stage een website te ontwikkelen alleen lukt het me maar niet om de website te centreren ik moet hem horizontaal centreren en verticaal dus de website moet precies is het midden komen hieronder staan mijn brondcode
Header.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sweet-lake</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="sweetlake.css" rel="stylesheet" type="text/css">
<SCRIPT>
message = "Welkom bij sweetlake.nl^" +
"::: Next Friday: Ladies Night Dj Man!e & Dyna ::: ^" +
"No presale Entrance 10 euro ^" +
"(Free entrance for the ladies) Age ^" +
"18+^" +
"^"
scrollSpeed = 25
lineDelay = 1500
txt = ""
function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</SCRIPT>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script language="JavaScript" type="text/javascript" src="wysiwyg.js">
</script>
<STYLE type=text/css>
body {
background: url(achtergrond.jpg) no-repeat;
A:active {
TEXT-DECORATION: underline
}
A:link {
COLOR: #FFFF33; TEXT-DECORATION: none
}
A:visited {
COLOR: #BDBA40; TEXT-DECORATION: none
}
A:hover {
COLOR:#FFFFFF; TEXT-DECORATION: none
}
</STYLE>
</head>
<body margin="0" topmargin="0" rightmargin="0" leftmargin="0" bottommargin="0" text="#FFFFFF">
<div id="Layer1" style="position:absolute; width:702px; height:22px; z-index:1; left: 124px; top: 89px;">
<a class="nav" href="">News</a>
<a class="nav" href="">Next SL</a>
<a class="nav" href="page.php?action=dj">Artists</a>
<a class="nav" href="gallery">Gallery</a>
<a class="nav" href="">About us</a>
<a class="nav" href="http://www.clubplayers.nl" target="_blank">The Club</a>
<a class="nav" href="">Contact</a></div>
<div id="Layer2" style="position:absolute; width:229px; height:291px; z-index:2; left: 6px; top: 117px;">
Code (php)
1
2
3
4
5
2
3
4
5
<?php
verbinden();
flyer();
sluiten();
?>
verbinden();
flyer();
sluiten();
?>
</div>
<div id="Layer3" style="position:absolute; width:228px; height:101px; z-index:3; left: 5px; top: 422px;">
<marquee direction="left" BEHAVIOR=scroll SCROLLAMOUNT=2 SCROLLDELAY=1 >
</marquee>
</div>
<div id="Layer4" style="position:absolute; width:585px; height:406px; z-index:4; left: 242px; top: 117px; overflow-x:hidden; overflow:scroll;S">
footer.php
</div>
</body>
</html>
Code (php)
1
2
3
4
2
3
4
#container {
width: 600px;
margin: 10px auto;
}
width: 600px;
margin: 10px auto;
}
Zie ook dit voorbeeldje.
Gewijzigd op 01/01/1970 01:00:00 door Josef Zorgui
Kalle schreef op 01.11.2006 12:33:
@blanche die van jou is niet verticaal gecentreerd.
Nee klopt. Lees nu pas dat dat ook de bedoeling is ;)
http://www.phphulp.nl/forum/showtopic.php?cat=5&id=6410&page=480&PHPSESSID=...90bb3bd162021e74f86d77303
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
html,body,table.middle {
text-align:center;
height:100%;
width:960px;
margin: 0 auto;
vertical-align:middle;
padding: 0;
color: #000;
background-color: #fff;
}
div.container {
height:480px;
background-color: #e4a;
color: #000;
text-align:left;
}
-->
</style>
</head>
<body>
<table class="middle"><tr><td>
<div class="container">
</div>
</td></tr></table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
html,body,table.middle {
text-align:center;
height:100%;
width:960px;
margin: 0 auto;
vertical-align:middle;
padding: 0;
color: #000;
background-color: #fff;
}
div.container {
height:480px;
background-color: #e4a;
color: #000;
text-align:left;
}
-->
</style>
</head>
<body>
<table class="middle"><tr><td>
<div class="container">
</div>
</td></tr></table>
</body>
</html>
ik heb die manier geprobeerd maar hij werkt niet ik heb ook al die andere geprobeerd
Tevens zie ik dat je al je divs een absolute positie hebt gegeven. Op die manier is centreren binnen een pagina natuurlijk niet mogelijk. Zolang die divs een absolute positie hebben, krijg je ze niet in het midden.
Ik heb ook even een voorbeeldje van horizontaal en verticaal centreren online gezet.