zoiets:
[code="html"]html, body {
margin: 0px;
width: 100%;
height: 100%;
}
#site {
width: 100%;
height: 500px;
background-color: #000;
display: block;
position: relative;
top: 50%;
margin-top: -250px;
left: 50%;
margin-left: -250px;
}[/code]
[code="html"]<div id="site">bla bla bla</div>[/code]
Maar ik zag dat je er al achter was gekomen op html-site.nl
aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef
verticaal centreren..
13 berichten
• Pagina 1 van 1
Re: verticaal centreren..
door KillerSponge » 13 jun 2006 20:33
Blabla en andere onzin - http://killersponge.nl
-
KillerSponge - Beheerder
- Berichten: 14456
- Geregistreerd: 24 aug 2004 13:05
Re: verticaal centreren..
door Remi » 14 jun 2006 10:07
Laatst bijgewerkt door Remi op 01 jan 1970 01:00, in totaal 1 keer bewerkt.
-
Remi - wmpr
- Berichten: 3010
- Geregistreerd: 04 apr 2006 15:22
Re: verticaal centreren..
door KillerSponge » 14 jun 2006 10:18
Je kan de width beter een relatieve waarde geven, dus in procenten, zodat hij rekbaar wordt.
Blabla en andere onzin - http://killersponge.nl
-
KillerSponge - Beheerder
- Berichten: 14456
- Geregistreerd: 24 aug 2004 13:05
Re: verticaal centreren..
door KillerSponge » 14 jun 2006 13:24
De height kan je niet in procenten opgeven 
Blabla en andere onzin - http://killersponge.nl
-
KillerSponge - Beheerder
- Berichten: 14456
- Geregistreerd: 24 aug 2004 13:05
Re: verticaal centreren..
door marja » 14 jun 2006 18:05
(klopt Remi, maar ben er nog niet uit)
Maar, waar voer ik de gegevens precies in? En wat verander ik dan in mijn html? (kom er echt niet uit...)
Dit is mijn html code:
[code="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="flashobject.js"></script>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="cssjamiez" rel="stylesheet" type="text/css">
<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>
<style type="text/css">
<!--
.style8 {color: #FF0000}
-->
</style>
</head>
<STYLE type="text/css">
BODY {scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#8A2BE2;
scrollbar-base-color:#FFFFE6;
scrollbar-track-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#FFFFE6;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF}
.style9 {color: #000000}
.style5 {font-size: 10px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
</STYLE>
<body>
<div align="center">
<div id="Layer1" style="position:absolute; width:730px; height:115px; z-index:1; margin-left: -369px;">
<div id="cssjamiez">
<div align="left"><img src="afbeeldingen/banner2.jpg" width="400" height="117">
<div id="Layer9" style="position:absolute; width:8px; height:22px; z-index:9; left: 726px; top: 498px;"><img src="afbeeldingen/witstreep.jpg" width="8" height="22"></div>
<div id="Layer6" style="position:absolute; width:200px; height:51px; z-index:2; left: 59px; top: 117px;"><img src="afbeeldingen/boogonder.jpg" width="600" height="30"></div>
<div id="Layer4" style="position:absolute; width:322px; height:271px; z-index:2; left: 178px; top: 148px;">
<script type="text/javascript">
var fo = new FlashObject("intro.swf", "movie", "400", "300", "7", "#ffffE6");
fo.write("layer4");
fo.addParam("quality", "high")
fo.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
fo.addParam("codebase", "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("movie", "intro.swf", loop="false");
</script>
</div>
<div id="Layer8" style="position:absolute; width:200px; height:72px; z-index:2; left: 131px; top: 452px;"><img src="afbeeldingen/boogbovengrijs.jpg" width="601" height="68"></div>
<div id="Layer3" style="position:absolute; width:162px; height:115px; z-index:2; left: 8px; top: 144px;">
<script type="text/javascript">
var fo = new FlashObject("knoppenlinks.swf", "movie", "160", "300", "7", "#ffffE6");
fo.write("layer3");
fo.addParam("quality", "high");
fo.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
fo.addParam("codebase", "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("movie", "knoppenlinks");
</script>
</div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left: 334px; top: 0px;">
<script type="text/javascript">
var fo = new FlashObject("pcman.swf", "movie", "400", "117", "7", "#ffffff");
fo.write("layer2");
fo.addParam("quality", "high");
fo.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
fo.addParam("codebase", "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("movie", "pcman.swf");
</script>
</div>
<div id="Layer5" style="position:absolute; width:131px; height:115px; z-index:2; left: 595px; top: 139px;">
<table width="5" border="10" cellspacing="0">
<tr>
<th scope="col"><img src="afbeeldingen/standard.jpg" width="100" height="75"></th>
</tr>
<tr>
<th scope="row"><img src="afbeeldingen/basic.jpg" width="100" height="75"></th>
</tr>
<tr>
<th scope="row"><img src="afbeeldingen/basicxtra.jpg" width="100" height="75"></th>
</tr>
<tr>
<th scope="row"><img src="afbeeldingen/webwinkel.jpg" width="100" height="75"></th>
</tr>
</table>
</div>
<div id="Layer7" style="position:absolute; width:200px; height:33px; z-index:2; left: 4px; top: 520px;"><img src="afbeeldingen/onderbanner.jpg" width="724" height="30"></div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
Maar, waar voer ik de gegevens precies in? En wat verander ik dan in mijn html? (kom er echt niet uit...)
Dit is mijn html code:
[code="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="flashobject.js"></script>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="cssjamiez" rel="stylesheet" type="text/css">
<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>
<style type="text/css">
<!--
.style8 {color: #FF0000}
-->
</style>
</head>
<STYLE type="text/css">
BODY {scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#8A2BE2;
scrollbar-base-color:#FFFFE6;
scrollbar-track-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#FFFFE6;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF}
.style9 {color: #000000}
.style5 {font-size: 10px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
</STYLE>
<body>
<div align="center">
<div id="Layer1" style="position:absolute; width:730px; height:115px; z-index:1; margin-left: -369px;">
<div id="cssjamiez">
<div align="left"><img src="afbeeldingen/banner2.jpg" width="400" height="117">
<div id="Layer9" style="position:absolute; width:8px; height:22px; z-index:9; left: 726px; top: 498px;"><img src="afbeeldingen/witstreep.jpg" width="8" height="22"></div>
<div id="Layer6" style="position:absolute; width:200px; height:51px; z-index:2; left: 59px; top: 117px;"><img src="afbeeldingen/boogonder.jpg" width="600" height="30"></div>
<div id="Layer4" style="position:absolute; width:322px; height:271px; z-index:2; left: 178px; top: 148px;">
<script type="text/javascript">
var fo = new FlashObject("intro.swf", "movie", "400", "300", "7", "#ffffE6");
fo.write("layer4");
fo.addParam("quality", "high")
fo.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
fo.addParam("codebase", "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("movie", "intro.swf", loop="false");
</script>
</div>
<div id="Layer8" style="position:absolute; width:200px; height:72px; z-index:2; left: 131px; top: 452px;"><img src="afbeeldingen/boogbovengrijs.jpg" width="601" height="68"></div>
<div id="Layer3" style="position:absolute; width:162px; height:115px; z-index:2; left: 8px; top: 144px;">
<script type="text/javascript">
var fo = new FlashObject("knoppenlinks.swf", "movie", "160", "300", "7", "#ffffE6");
fo.write("layer3");
fo.addParam("quality", "high");
fo.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
fo.addParam("codebase", "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("movie", "knoppenlinks");
</script>
</div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left: 334px; top: 0px;">
<script type="text/javascript">
var fo = new FlashObject("pcman.swf", "movie", "400", "117", "7", "#ffffff");
fo.write("layer2");
fo.addParam("quality", "high");
fo.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
fo.addParam("codebase", "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("movie", "pcman.swf");
</script>
</div>
<div id="Layer5" style="position:absolute; width:131px; height:115px; z-index:2; left: 595px; top: 139px;">
<table width="5" border="10" cellspacing="0">
<tr>
<th scope="col"><img src="afbeeldingen/standard.jpg" width="100" height="75"></th>
</tr>
<tr>
<th scope="row"><img src="afbeeldingen/basic.jpg" width="100" height="75"></th>
</tr>
<tr>
<th scope="row"><img src="afbeeldingen/basicxtra.jpg" width="100" height="75"></th>
</tr>
<tr>
<th scope="row"><img src="afbeeldingen/webwinkel.jpg" width="100" height="75"></th>
</tr>
</table>
</div>
<div id="Layer7" style="position:absolute; width:200px; height:33px; z-index:2; left: 4px; top: 520px;"><img src="afbeeldingen/onderbanner.jpg" width="724" height="30"></div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
- marja
Re: verticaal centreren..
door KillerSponge » 14 jun 2006 18:12
Het bovenste stukje code moet tussen de <style> tags komen, samen met de css code die je nu al hebt.
Het onderste stukje code moet vlak onder <body> let er wel op dat het tags zijn, en hij dus bovenaan moet beginnen, en helemaal onderaan weer af moet sluiten
Het onderste stukje code moet vlak onder <body> let er wel op dat het tags zijn, en hij dus bovenaan moet beginnen, en helemaal onderaan weer af moet sluiten
Blabla en andere onzin - http://killersponge.nl
-
KillerSponge - Beheerder
- Berichten: 14456
- Geregistreerd: 24 aug 2004 13:05
Re: verticaal centreren..
door marja » 14 jun 2006 18:37
Het is gelukt! thanx!
Is het mogelijk om in te stellen dat de site zich "rekbaar" maakt zodat bijvoorbeeld bij een schermresolutie van 1280x1024 ook het hele scherm gevuld is?
Is het mogelijk om in te stellen dat de site zich "rekbaar" maakt zodat bijvoorbeeld bij een schermresolutie van 1280x1024 ook het hele scherm gevuld is?
- marja
Re: verticaal centreren..
door KillerSponge » 14 jun 2006 18:43
Nee, eigenlijk niet. In principe loopt het beeld namelijk 'oneindig' door naar onder, waardoor HTML niet weet waar het op moet houden. De enige mogelijke manier is javascript, maar ik denk niet dat het de moeite waard is...
Nouja, fijn dat het nu werkt iig
Nouja, fijn dat het nu werkt iig
Blabla en andere onzin - http://killersponge.nl
-
KillerSponge - Beheerder
- Berichten: 14456
- Geregistreerd: 24 aug 2004 13:05
13 berichten
• Pagina 1 van 1
Keer terug naar HTML, CSS, Javascript